React basics

react-basics.md

How to manage the state

1. state is an obj (state={})
2. setState() - updates the state

How to use lifecycle methods

1. render() - convert what is inside return() into HTML
2. componentDidMount() - after the first render, only runs once
3. componentDidUpdate() - after setState()

How to write components in React

1. class nameOfComponent extends React.Component {}
2. function nameOfComponent {}
3. const nameOfComponent = () => {}

How to import components

1. Syntax for importing a component

import <NameOfComponent> from "path" import Button from "./Button"

Why we use components

1. We use components to avoid repeating ourselves because we can simply write some code once and reuse it whenever we need to by importing

Passing props to child components

1. Syntax for passing props

<Component nameOfProp={valueOfProp}/> <Button text={"my message for my button child"}/> <Homepage users={[ {id:1, username: 'blake'}, {id:2, username: 'RYAN'}, ]}/>

2. We want our child components to receive some data (props)

Remember to open your console to see if there are any error messages

Use React dev tools