Loading lesson path
React
Exercises, quizzes, examples, and short drills that reinforce react core.
Arrow Functions Arrow functions allow us to write shorter function syntax: Example Before: hello = function() { return "Hello World!"; } Example With Arrow Function: hello = () => { return "Hello Wor…
The map() Method The map() method creates a new array with the results of calling a function for every array element. Example Multiply each number by 2: const numbers = [1, 2, 3, 4]; const doubled =…
Spread Operator The JavaScript spread operator (... ) allows us to quickly copy all or part of an existing array or object into another array or object. Example const numbersOne = [1, 2, 3]; const nu…
Ternary Operator The ternary operator is a simplified conditional operator like if / else. Syntax: condition ? <expression if true> : <expression if false> Here is an example using if / else Example…
â® Previous Next ⯠Template Strings Template strings allow you to write strings that span multiple lines and include embedded expressions: Example Before: const name = "John"; const age = 30; cons…
Destructuring Props You can limit the properties a component receives by using destructuring. Example The component knows it only need the color property, so in the function definition, it only speci…
In React, you can conditionally render components. There are several ways to do this. if Statement We can use the if JavaScript operator to decide which component to render. Example: We'll use these…
Just like in HTML, React uses forms to allow users to interact with the web page. Adding Forms in React You add a form with React like any other element: Example: Add a form that allows users to ente…
Submitting Forms You can control the submit action by adding an event handler in the onSubmit attribute for the <form> Example: Add a submit button and an event handler in the onSubmit attribute: imp…
â® Previous Next ⯠What is forwardRef? 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. Common us…
â® Previous Next ⯠What is Sass? Sass is a CSS pre-processor. Sass files are executed on the server and sends CSS to the browser. Sass adds extra features to CSS like variables, nesting, mixins, a…