Loading lesson path
React
React fundamentals: components, JSX, props, state, events, forms, and rendering patterns.
React Tutorial
React Introduction
React Getting Started
Now that your development environment is set up, let's try to modify the default app to display "Hello, World!". Modify the React App Look in the my-react-app directory, and you will find a src folde…
React Render HTML
Upgrade to React 19 Upgrading an existing React application to version 19 only requires two steps. If you are already using the latest version of React, you can skip this section. Step 1: Install Rea…
React ES6
Classes ES6 introduced classes. A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class, and the properties are assigned inside a constructor…
Variables 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,…
Destructuring in React 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 stat…
Modules JavaScript modules allow you to break up your code into separate files. This makes it easier to maintain the code-base. ES Modules rely on the import and export statements. Export You can exp…
React JSX
One of the most powerful features of JSX is the ability to embed JavaScript expressions directly within your markup. Expressions You can insert any valid JavaScript expression inside JSX by wrapping…
JSX allows you to insert attributes into HTML elements, but there are a few important differences. class = className The class attribute is a much used attribute in HTML, but since JSX is rendered as…
Conditions - if statements React supports if statements, but not inside JSX. To be able to use conditional statements in JSX, you should put the if statements outside of the JSX, or you could use a t…
React Components
React Class Components
Props are arguments passed into React components. Props are passed to components via HTML attributes. props stands for properties. React Props React Props are like function arguments in JavaScript an…
Props Children In React, you can send the content between the opening and closing tags of a component, to another component. This can be accessed in the other component using the props.children prope…
Just like HTML DOM events, React can perform actions based on user events. React has the same events as HTML: click, change, mouseover etc. Adding Events React events are written in camelCase syntax:…
In React, you will render lists with some type of loop. The JavaScript map() array method is generally the preferred method. If you need a refresher on the map() method, check out the ES6 Array map()…
Textarea The textarea element in React is slightly different from ordinary HTML. In HTML the value of a textarea is the text between the start tag <textarea> and the end tag </textarea>. <textarea> C…
Select A drop down list, or a select box, in React is also a bit different from HTML. In HTML, the selected value in the drop down list is defined with the selected attribute: HTML: <select> <option…
Handling Multiple Inputs When you have multiple controlled input fields in a form, you can manage their state either by: 1. Using a separate useState call for each input. 2. Using a single useState c…
Checkbox For checkboxes, use the checked attribute instead of value to control its state. We'll use the useState Hook to manage the value of the textarea: In the handleChange function, use the e.targ…
Radio Radio buttons are typically used in groups where only one option can be selected. All radio buttons in a group should share the same name attribute. You control radio buttons based on whether t…
React Portals
React Suspense lets you display an alternative HTML while waiting for code or data to load. The alternative HTML can be a component, text, or any valid content. What is Suspense? Suspense is a React…
Styling React Using CSS
CSS Modules let you write CSS that is scoped locally to a specific component. This prevents CSS class name conflicts and makes your styles more maintainable. What are CSS Modules? In React, CSS Modul…
React CSS-in-JS
React Router
â® Previous Next ⯠What is useTransition? The useTransition hook helps you keep your React app responsive during heavy updates. It lets you mark some state updates as "non-urgent", allowing other,…
â® Previous Next ⯠What is a Higher Order 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 pho…