Beginners Notes for React

React is a framework for building user interfaces. It uses JSX which is a combination of HTML and JavaScript to state what should be rendered to the DOM and when it should be rendered.

Some basics to keep in mind when you are first learning react are:

1. Components

Components are written as JavaScript classes or regular JavaScript functions

class App extends Component {
//... more code here
  render() {
    return (
      <div>
        Something rendered to the page
      </div>
    )
  }
}

const App = props => {
//...more code here
  return (
    <div>
      Something rendered to the page
    </div>
  )  
}

Both types of component return JSX in either the render( ) method in a class component in conjunction with a return statement or just a return statement in the functional component. The JSX is a visual way of seeing what will be rendered to the DOM by that particular component. Props is short for properties and is a way for data to be passed from one component to the next. Notice that in a class component, props are implicitly passed in while the functional component receives the props as an argument, explicitly. The other important thing about components is they often return other components. It is helpful to map out the parent components and child components that are nested inside.

1. State

State in React is a place where data is stored and can be modified as needed. Learning where to put the state is important because parent components usually keep track of the stored data and pass this information to the children components. The data cannot be passed or accessed from a child component to its sibling component. Instead the child component communicates changes to the parent component and the parent will pass the changed data back down to the sibling components.

An example of state is an amount being stored in a parent component that two children components need to know about.

class App extends Component {
  state = {
    amount: 50
  } 
//...more code here
}

When a child component is clicked on, they need to subtract an amount from the amount stored in state in their parent component. The parent will update the amount and let the both children components know about the new updated amount in state.

1. Props

Props are passed from the parent component to the children component(s). These props can be data types that are stored in state, objects, strings, arrays, and functions for the child component to use. They are passed by naming an attribute on the component and passing in the props.

class App extends Component {
  state = {
    amount: 50
  }
  render() {
    return (
      <div>
        <ChildComponent1 amount={this.state.amount} />
        <ChildComponent2 amount={this.state.amount} />
      </div>
    )
  }
}

In this example the amount in state is passed to the children component through the named attribute amount= and then followed by curly braces where the JavaScript will access the state and pass these props to the children component. The children component can then use these props and access them using either this.props.amount if the child is a class component or props.amount if the child is a functional component.

class ChildComponent1 extends Component {
  render(){ 
  console.log(this.props.amount)
    return (
      <div>
        Something Displayed Here
      </div>
   )
  }
}

const ChildComponent2 = (props) => {
  console.log(props.amount)
  return (
    <div>
      Something Displayed Here
    </div>
  )
}

Functions can also be written in a parent component and passed to the children component to receive information back in the parent component.

class App extends Component {
  state = {
    amount: 50
  }

  subtractAmount = (amount) => {
    const newAmount = this.state.amount - amount;
    this.setState({ amount: newAmount })
  }

  render() {
    return (
      <div>
        <ChildComponent1 amount={this.state.amount} 
                         subtractAmount={this.subtractAmount}/>
        <ChildComponent2 amount={this.state.amount}
                         subtractAmount={this.subtractAmount}/>
      </div>
    )
  }
}

Now each component will have access to this function through their props and will be able to pass in an amount to subtract back to the parent component. When the function passed down is run (usually on a clickEvent) the parent can take the amount passed back from the child and update the amount stored in state. After the state is updated in the parent component, the render function will be called and the new amount in state will be passed to the child components.

class ChildComponent1 extends Component {
  handleClick = () => {
    this.props.subtractAmount(5)
    //this could be any amount that is passed into this function 
  }
  render(){ 
    return (
      <div onClick={this.handleClick} >
        Something Displayed Here
      </div>
   )
  }
}

Figuring out what kind of component will be used to render the JSX, where to store state and how to pass props down to children components as well as receive information back from the children components will help when learning React for the first time.