# React 01: Cheatsheet
***
### Docs
- legacy
***
### Best Practices
Reusability principles:
* To reuse JSX markup, create a component
* To reuse logic without React Hooks, create a utility function
* To reuse logic with React Hooks, create a custom hook
States
* When updating `state`, always do it IMMUTABLY. Do a deep copy/clone for arrays and objects
* When updating `state` based on old `state`, always pass a `function` with `prev` to your `state` updating function
* Derive `states` from `props` when possible
* Remove unnecessary `states`
* Lift `states` if needed
* Lift computed `values` if needed
* Derive computed `values` when possible
Lists items must have keys
* `Keys` must have unique value
* Generate it if needed
Effects
* One effect hook per process i.e. one effect per API call
* If you’re not interacting with an external system, you might not need an Effect
***
### React Project Setup: Build Tools
* `Create React App` aka `CRA`
* `Webpack`
* `Vite`
* `esbuild`
* `Parcel`
* `Snowpack`
`Create React App` (CRA) - DEPRECATED - was the default option for developing React applications
* `Vite` vs `CRA` :
* Start your project w `Vite` (first 14min):
***
### COMPONENTS THE WORLD
React apps are made out of `components`.
A `component` is a piece of the UI (user interface) that has its own logic and appearance.
A component can be as small as a `button`, or as large as an entire page.
***
### Component Instances Work In Isolation
They use the same logic, but on their own.
***
### Strict Mode
`Component` to help you catch errors and mistakes during development phase.
Double renders components.
***
### Strict Mode: How To
You can wrap a specific component or your entire app.
```javascript
import { StrictMode } from "react";
```
***
### index.js
```javascript
import React from 'react';
import { createRoot } from 'react-dom/client';
createRoot(document.getElementById('app')).render();
```
***
### React Component
```javascript
import React from 'react';
function Component(){
}
export default Component;
```
***
### React Component: Props
React component functions accept a single argument, a props object
props are the only argument to your component
***
### React Component: Props Example
```javascript
import React from 'react';
function Component(props){
let person = props.person;
let size = props.size;
}
export default Component;
```
```javascript
import React from 'react';
function Component({ person, size }){ // Destructured — Same as above
...
}
export default Component;
```
***
### Pass Props To Component When Name Equal Value
If `boolean`
```javascript
// is equivalent to
```
If `not boolean`
```javascript
// is equivalent to
```
You can use this alongside other props
```javascript
```
***
### React: Inline Styling
```javascript
Hello, World!
// equiv
const myStyle = { color: "red" }
Hello, World!
```
***
### React: Styling
```css
// in TitleScreen.module.css
// mind here that we switch to "className" — before we used "style" attribute
.btn {
height: 45px;
width: 110px;
}
```
```javascript
// in App.js
import titlescreen from './styles/TitleScreen.module.css'
```
***
### Functions in Components
```javascript