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