React Guide | Notion

REACT NATIVE WEB

yarn start → starts local server

Basics

Can't have 2 divs in a component, wrap in one parent div

props: pass info from one component to another (like a variable)

use props to use states between diff files

# in App.js
<HelloWorld name="Christina" />

# in the HelloWorld.js file
function HelloWorld(props) {
	<h1>Hello {props.name}</h1>
}

Class Based React Component

class HelloWorld extends React.Component{
    render(){
        return (
				# use this to access props
        <h1>Hello {this.props.name}</h1>
        )
    }
}

Sample onClick Function, you can use arrow functions
```
onClick={() => setCount(count + 1)}
```
Create a Components folder to hold components, ex. navmenu, header
Create a Views Folder to hold view, ex. homepage, aboutpage

`` back ticks allow you to use variables inside of your string

# useParams uses the params from id, makes id dynamic
const { id } = useParams()
const url = `https://5f9fa56901e6960016d09720.mockapi.io/travel/travel/${id}`

States and Hooks

State Hooks use useState()
Class Based uses this.state = {}

Using Hooks Example

function CounterExample() {
		# this is setting the state of count to 0 initially
    const [count, setCount] = useState(0)

    return (
        <div>
            <h1>
                {count}
            </h1>
						# setCount changes the state of count
            <h1 onClick={() => setCount(count + 1)}>
                Plus
            </h1>
            <h1 onClick={() => setCount(count - 1)}>
                Minus
            </h1>
        </div>
    )

}

To onClick and change to opposite state, ex. switch from true to false or false to true,
```
onClick={() => setShowMenu(!showMenu)}
# do !variable, basically a not
```
useState can be turned into an object too

	const [travel, setTravel] = useState({
        loading: false // check if api request is loading
        data: null
    })