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

Events and State

Events

React adds its own event attribute to use in JSX elements

Each event starts with "on" and pops in Intellisense

<button onClick={clickHandler}>Change Title</button>

const clickHandler = () => {
        setTitle('Updated!');
        console.log(title);
    };

State

Uses a variable and a method to store and update information on the screen

Work with state using the built-in method useState()

const [title, setTitle] = useState(props.title);

const clickHandler = () => {
    setTitle('Updated!');
    console.log(title);
};

If your form has a lot of fields to track there are two ways of using state.

1. The more common approach is to have everything outlined individually

const [enteredTitle, setEnteredTitle] = useState('');
const [enteredAmount, setEnteredAmount] = useState('');
const [enteredDate, setEnteredDate] = useState('');

const titleChangeHandler = (event) => {
    setEnteredTitle(event.target.value);
};
const amountChangeHandler = (event) => {
    setEnteredAmount(event.target.value);
};
const dateChangeHandler = (event) => {
    setEnteredDate(event.target.value);
};

2. The less common way is to use an object

const [userInput, setUserInput] = useState({ 
    enteredTitle: '',
    enteredAmount: '',
    enteredDate: ''
});

const titleChangeHandler = (event) => {
    setUserInput((prevState) => {
        return {...prevState, enteredTitle: event.target.value};
    });
};
const amountChangeHandler = (event) => {
    setUserInput((prevState) => {
        return {...prevState, enteredAmount: event.target.value};
    });
};
const dateChangeHandler = (event) => {
    setUserInput((prevState) => {
        return {...prevState, enteredDate: event.target.value};
    });
};

Form Handlers

const submitHandler = (event) => {};

return <form onSubmit={submitHandler}>