React Fundamentals Quiz

Study Notes

The React Handbook is a guide to learn React in 20% of the time, focusing on the 80% of the topic.
The book is written by Flavio, a programming tutorial writer, and bootcamp organizer.

React is a JavaScript library that simplifies the development of visual interfaces.
It was developed at Facebook and released in 2013.
React aims to make it easy to reason about an interface and its state at any point in time.
It divides the UI into a collection of components.

React is very popular and widely used in Web development.
Many tooling and frameworks, such as Next.js and Gatsby, are built on top of React.
Knowledge of React is a valuable skill for frontend engineers.

You can install React using the create-react-app command line tool.
npx is an easy way to download and execute Node.js commands without installing them.
npx create-react-app will download the latest version of create-react-app and create a new React application.

A React component is a function that returns JSX.
A component can have its own state, which means it encapsulates some variables that other components can't access.
A component can also receive data from other components through props.

JSX is a special language used to build a component's output.
JSX looks like HTML, but it's not.
JSX is processed by React and transformed into JavaScript that the browser can interpret.

JSX makes it easy to build a UI by importing and embedding other React components.
A React component can be created in its own file or in the same file as another component.

JSX is not forgiving, unlike HTML, and requires correct syntax.
In JSX, the className attribute is used instead of class due to the reserved word class in JavaScript.
JSX can embed JavaScript expressions using curly brackets {}.

JSX allows embedding JavaScript expressions using curly brackets {}.
JavaScript expressions can be used to print values, perform conditional statements, and more.

Data typically flows from a parent component to a child component using props.
Functions can be passed as props to allow a child component to call a function in the parent component.
Changes to the parent component's state can be made from a child component using a function passed as a prop.### Data Management in React
There are two common ways to manage data in React: passing props down and using state
More advanced ways to manage data include the Context API and libraries like Redux, but these introduce more complexity

React provides an easy way to manage events fired from DOM events like clicks, form events, and more
You can use the onClick attribute on any JSX element to fire a function when the element is clicked
React supports a vast amount of types of events, including onKeyUp, onFocus, onChange, onMouseDown, onSubmit, and many more

The useEffect hook allows components to have access to the lifecycle events of a component
When you call the useEffect hook, you pass it a function that will be run by React when the component is first rendered, and on every subsequent re-render/update
The useEffect function is run after the DOM is updated, and does not block the UI rendering even on blocking code
You can tell React to skip re-running the side effect by adding a second parameter to useEffect, which is an array that contains a list of state variables to watch for
You can also tell React to only execute the side effect once (at mount time) by passing an empty array as the second parameter

To learn more about React, start by learning more theory about the Virtual DOM, writing declarative code, unidirectional data flow, immutability, and composition
Build simple React applications, such as a counter or an application that interacts with a public API
Learn about conditional rendering, loops in JSX, and using the React Developer Tools
Learn how to apply CSS in a React application, manage state using the Context API, useContext, and Redux, and interact with forms
Learn how to use React Router, test React applications, and an application framework built on top of React, like Gatsby or Next.js