Learning React

This week I did the 'introduction to react' lesson, 'react components' lesson, and did some exercises in organizing react components. This was really me getting a feel for how react works, working through it as fast as I can. Here is an example of an early exercise I did;

import  React  from 'react';

const Popup = props => {
    return(
        <div>
        <h1>Taylor Swift</h1>
        </div>
    );
};

export default Popup;

...This is where they kind of give you every single file except the 'popup' where you practice making a div and using return and importing the react library and exporting your component... and you make a popup.

I read 'react nested components' and did another exercise that required me to build components on top of component; icon.js (component 1)

import React from 'react';

const Icon = props => {
    let iconClass = "fa fa-2x fa-fw " + props.fontAwesomeSymbol;
    let iconName = props.iconName;
    let descriptionAlert = () => alert(props.description);

    return (
        <li onClick  ={descriptionAlert}  >
        <i className ={iconClass} /> - {iconName}
        </li>
    );
};

export default Icon;

iconGuide.js (component 2)

import React from 'react';
import IconReferenceList from './IconReferenceList';

const IconGuide = props => {
    return(
        <div>
        <h2> Icon Guide</h2>
      <p>symbols!</p>
        <IconReferenceList />
        </div>
    );
};

export default IconGuide;

iconReferenceList.js(component 3)

import React from 'react';
import Icon from './Icon';

const IconReferenceList = props => {
  let articleDescription='this is a newspaper';
  let exerciseDescription=`blah!`;
  let challengeDescription=`hello`;
   let listOfIcons = [
    <Icon
      key="1"
      iconName="Article"
      fontAwesomeSymbol='fas-fa-user-md'
      description={articleDescription}
    />,
    <Icon
      key="2"
      iconName="Exercise"
      fontAwesomeSymbol='fa-heartbeat'
      description={exerciseDescription}
    />,
    <Icon
      key="3"
      iconName="Challenge"
      fontAwesomeSymbol='fa-puzzle-piece'
      description={challengeDescription}
    />
  ]

     return(
       <div>
         <ul>
           {listOfIcons}
         </ul>
       </div>
     );
};

export default IconReferenceList;

...there was also a 'main.js' file I needed to make that took all of the components I made and rendered them (and had the document.getaElementById method...)

import './app.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import IconGuide from './components/IconGuide';

ReactDOM.render(
  <IconGuide />,

  document.getElementById('app')
);

Practice With Components

I did an exercise called 'react grocery list' that was pretty similar to 'react nested components' except I had to build the whole thing from scratch. took a bunch of information they gave and broke it into smaller pieces, made 2 components instead of three, but the thing works! Again this is just practice compartmentalizing sections of code into chunks that make sense, and hooking them all together correctly.

Item.js component;

import React from 'react';

const Item = props => {
    let itemName= props.itemName;
    let descriptionAlert = () => alert(props.description);

    return(
        <li onCLick ={descriptionAlert} >
        {itemName}
        </li>

    );
};

export default Item;

app.js component;

import React from 'react';
import Lisp from './Lisp';


const App = props => {

    let data = [
        { id: 1, name: 'test1'},
        { id: 2, name: 'test2'},
        { id: 3, name: 'test3'}
    ];

  return(
    <div>
      <h1>Lisp</h1>


<Lisp
items={data}
handleButtonClick= {(event) => {alert('selected')} }
/>
</div>
)
};

export default App;

list.js component;

import React from 'react';
import Item from './Item';

const Lisp = props => {
let listOfItems =[
    {
    key: "1",
    itemName:"test1",
    description: "test1 Description"
    },
    {
    key:"2",
    itemName:"test2",
    description:"test2 Description"
    },
    {
    key:"3",
    itemName:"test3",
    description:"test3 Description"
    }
]
let items =listOfItems.map(item => {
    return(
    <Item
    key = {item.key}
    itemName={item.itemName}
    description={item.description}
    />
)
})

return(
    <div>
    <ul>
    {items}
    </ul>
    </div>
)};

export default Lisp;

... This was a great exercise and I think really help solidify my understanding of how react works.

I also had to make a main.js file;

import './main.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

Summary of Learning

Overall, it seems react is kind of a simple way to break down otherwise unwieldily and large and unorganized apps into bits and pieces that can be separated out and attached elsewhere like legos. The price you pay for getting such re-usability, however, are the extra lines of code you need to write for each components to allow them to hook up to the larger application and top-level components.

Next Plans Towards Plan

This week I'm going to go a bit farther with react, maybe make a mock twitter feed, them move onto rails and then start building my plan project from there.