Loading lesson path
React
React fundamentals: components, JSX, props, state, events, forms, and rendering patterns.
React is a JavaScript library for building user interfaces.
React is a front-end JavaScript library.
To use React in production, you need npm which is included with Node.js .
This is the default content of the App.jsx file in the src folder:
React's goal is in many ways to render HTML in a web page.
Upgrading an existing React application to version 19 only requires two steps.
ES6 stands for ECMAScript 6.
ES6 introduced classes.
Arrow functions allow us to write shorter function syntax:
Before ES6 there was only one way of defining your variables: with the var keyword. If you did not define them, they would be assigned to the global object. Unless you were in strict mode, then you w…
The map() method creates a new array with the results of calling a function for every array element.
Destructuring is a JavaScript feature that allows you to extract values from objects or arrays into distinct variables. In React, it's commonly used with props, hooks, and state management.
The JavaScript spread operator ( ... ) copies all or part of an existing array or object into another array or object.
JavaScript modules allow you to break up your code into separate files.
The ternary operator is a simplified conditional operator like if / else .
Template strings allow you to write strings that span multiple lines and include embedded expressions:
JSX stands for JavaScript XML.
One of the most powerful features of JSX is the ability to embed JavaScript expressions directly within your markup.
JSX allows you to insert attributes into HTML elements, but there are a few important differences.
React supports if statements, but not inside JSX.
Components are like functions that return HTML elements.
Before React 16.8, Class components were the only way to track state and lifecycle on a React component. Function components were considered "state-less".
Props are arguments passed into React components.
You can limit the properties a component receives by using destructuring.
In React, you can send the content between the opening and closing tags of a component, to another component.
Just like HTML DOM events, React can perform actions based on user events.
In React, you can conditionally render components.
In React, you will render lists with some type of loop.
Just like in HTML, React uses forms to allow users to interact with the web page.
You can control the submit action by adding an event handler in the onSubmit attribute for the <form> :
The textarea element in React is slightly different from ordinary HTML.
A drop down list, or a select box, in React is also a bit different from HTML.
When you have multiple controlled input fields in a form, you can manage their state either by:
For checkboxes, use the checked attribute instead of value to control its state.
Radio buttons are typically used in groups where only one option can be selected.
React Portals provide a way to render HTML outside the parent component's DOM hierarchy.
React Suspense lets you display an alternative HTML while waiting for code or data to load.
- Inline styling - CSS stylesheets - CSS Modules
CSS Modules let you write CSS that is scoped locally to a specific component.
CSS-in-JS is a styling technique where you can write CSS directly in your JavaScript code.
React Router is a library that provides routing capabilities for React applications.
The useTransition hook helps you keep your React app responsive during heavy updates.
forwardRef lets your component pass a reference to one of its children. It's like giving a direct reference to a DOM element inside your component.
A Higher Order Component (HOC) is like a wrapper that adds extra features to your React components. Think of it like putting a case on your phone - the case adds new features (like water protection)…
Sass is a CSS pre-processor.