Sass is a CSS pre-processor.
Sass files are executed on the server and sends CSS to the browser.
If you use the create-react-app in your project, you can easily install and use Sass in your React projects.
Install Sass by running this command in your terminal:
npm i sass
Now you are ready to include Sass files in your project!
There are many ways to style React with CSS, this tutorial will take a closer look at three common ways:
Using memo will cause React to skip rendering a component if its props have not changed.
This can improve performance.
This section uses React Hooks. See the React Hooks section for more information on Hooks.
Create React App doesn’t include page routing.
React Router is the most popular solution.
To add React Router in your application, run this in the terminal from the root directory of the application:
npm i -D react-router-dom
Note: This tutorial uses React Router v6.
If you are upgrading from v5, you will need to use the @latest flag:
npm i -D react-router-dom@latest
Just like in HTML, React uses forms to allow users to interact with the web page.
You add a form with React like any other element:
Add a form that allows users to enter their name:
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);
This will work as normal, the form will submit and the page will refresh.
But this is generally not what we want to happen in React.
We want to prevent this default behavior and let React control the form. Continue reading React Forms
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 section.
Let’s render all of the cars from our garage:
function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = ['Ford', 'BMW', 'Audi'];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car brand={car} />)}
</ul>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
When you run this code in your create-react-app, it will work but you will receive a warning that there is no “key” provided for the list items. Continue reading React Lists
In React, you can conditionally render components.
There are several ways to do this.
if StatementWe can use the if JavaScript operator to decide which component to render. Continue reading React Conditional Rendering
Just like HTML DOM events, React can perform actions based on user events.
React has the same events as HTML: click, change, mouseover etc.
React events are written in camelCase syntax:
onClick instead of onclick.
React event handlers are written inside curly braces:
onClick={shoot} instead of onclick="shoot()". Continue reading React Events
Props are arguments passed into React components.
Props are passed to components via HTML attributes.
props stands for properties.
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”.
With the addition of Hooks, Function components are now almost equivalent to Class components. The differences are so minor that you will probably never need to use a Class component in React.
Even though Function components are preferred, there are no current plans on removing Class components from React.
This section will give you an overview of how to use Class components in React.
Feel free to skip this section, and use Function Components instead.