My React Learnings

README.md

React Learnings

• npx create-react-app <folder-name>
• parentheses after return-statements are used so js won't insert semicolons automatically

Props

Are used to pass data from parent to child

class Child extends React.Component {
  render(){
    return(
      <p>{this.props.value}</p>
    );
  }
}

class Parent extends React.Component {
  render(){
    return(
      <div>
        <Child value="I was passed as a prop!"/>
      </div>
    );
  }
}

• props can be functions as well

State

State stores the private data of a component

classes are old fashioned, use modern hooks instead

class SomeButton extends React.Component {
  // using state requires a constructor for defining an initial state
  constructor(props) {
    super(props);
    this.state = {
      value: 'Click me',
    }
  }
  render() {
    return (
      // setState changes the internal data of the component and forces it to re-render
      <button onClick={()=>this.setState({value: 'Clicked!!!'})}>
        {this.state.value}
      </button>
    );
  }
}

changing state of complex objects

• detecting changes in complex objects is hard.
• that's why react recommends using immutability over mutatability

handleClick(i) {
  // Create a copy of the array
  const squares = this.state.squares.slice();
  squares[i] = 'X';
  this.setState({squares: squares});
}

Hooks

Hooks always start with use[...]

useState

const [count, setCount] = useState(0);

useEffect

useEffect(() => {
  console.log('Component has been mounted!')
});

Examples

• Traversy React Crash Course