lamp/react-complete-guide/react-complete-notes.md

# REACT NOTES
https://www.udemy.com/course/react-the-complete-guide-incl-redux/

## Basics and working with components

React is a javascript library for building UI.

Fundamental building block of React are reusable components.

React uses a declarative approach. This means that you will define the end states and React will work with the DOM to achieve it.

### Creating a new React Project

facebook/create-react-app (https://github.com/facebook/create-react-app) 

This github is a tool for creating a react app

### Post create

```
npm install # install all dependencies
npm start
```

### Project Structure

Mostly work in the /src folder

/src/index.js executes when the app starts. 

### JSX

JSX is a special syntax created by the React team

Allows you to mix JS with HTML

Best practice is 1 file per component

The App.js component is generally the root component of a component tree. Everything is a child of the app component.

Convention is to start all component filenames with Capital letter

### Creating a component

1. Create the file
2. Add the function
3. Export it
4. Import in the App component
5. Add the HTML in the App component

### Component design

Can only have 1 root div in a component

#### Styles

There are no rules for CSS files but best practice is to use the same name and put the css file in the same dir as the js file.

Import the css file into the component. 
Note: JSX uses className in place of class

{} Are used as dynamic placeholders for content.

#### Props

Are how to pass data into a component