DEV Community

Cover image for React Cheat Sheet - Learn the basics of React πŸ”₯
Posandu
Posandu

Posted on • Originally published at tronic247.com

React Cheat Sheet - Learn the basics of React πŸ”₯

React is a JavaScript library for building interactive user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. So, in this article, you can find a React cheat sheet that will help you to learn React quickly.

Prerequisites

  • Basic knowledge of HTML, CSS, and JavaScript.
  • Basic knowledge of ES6 features.
  • Basic knowledge of Node.js and npm.

Initializing a React Project

You can use this npm command to create a new React project with Vite:

npm create vite
Enter fullscreen mode Exit fullscreen mode

Just select the React template and you are ready to go.

image

Now, go to the project directory and run the following command to start the development server:

npm i && npm run dev
Enter fullscreen mode Exit fullscreen mode

Now you should be able to see the React app running on http://localhost:5173. If you open the app in the browser, you will see the following screen:

image

for more information about Vite, you can check out this guide.

React Components

React components are like lego blocks. You use them to build your UI. React components are reusable and can be used to build complex UIs. You can create a React component using the following syntax:

function App() {
    return <h1>Hello World</h1>;
}
Enter fullscreen mode Exit fullscreen mode

You can also use ES6 classes to create React components:

Not recommended because functional components are easier to read and test.

class App extends React.Component {
    render() {
        return <h1>Hello World</h1>;
    }
}
Enter fullscreen mode Exit fullscreen mode

You can also use arrow functions to create React components:

const App = () => {
    return <h1>Hello World</h1>;
};
Enter fullscreen mode Exit fullscreen mode

So basically a React component is a JavaScript function that returns a React element. They can be used like this:

<App />
Enter fullscreen mode Exit fullscreen mode

And also components must start with a capital letter or else React will treat them as DOM tags.

Also, you can embed inline JavaScript expressions in JSX using curly braces:

const name = "John";
const App = () => {
    return <h1>Hello {name}, you have {Math.floor(Math.random() * 10)} unread messages.</h1>;
};
Enter fullscreen mode Exit fullscreen mode

React props

Imagine if you have a component that renders a profile card. You can either hardcode the data or you can pass it as props. Props are like function arguments in React. You can pass data to a component using props. You can access the props in a component using the props object. For example, if you have a component called ProfileCard and you want to pass the name of the user as a prop, you can do it like this:

<ProfileCard name="John Doe" />
Enter fullscreen mode Exit fullscreen mode

And then you can access the name prop in the ProfileCard component like this:

function ProfileCard(props) {
    return <h1>{props.name}</h1>;
}
Enter fullscreen mode Exit fullscreen mode

If you like destructuring, you can do it like this:

function ProfileCard({ name }) {
    return <h1>{name}</h1>;
}
Enter fullscreen mode Exit fullscreen mode

But, what if you want to pass other props? (For example, the class attribute, aria-label, etc.) You can do it like this using the spread operator:

function ProfileCard({ name, ...rest }) {
    return <h1 {...rest}>{name}</h1>;
}
Enter fullscreen mode Exit fullscreen mode

And then you can pass the other props like this:

<ProfileCard name="John Doe" style={{ color: "red" }} />
Enter fullscreen mode Exit fullscreen mode

image

If you want to use default prop values, you can do it like this:

function ProfileCard({ name = "John Doe" }) {
    return <h1>{name}</h1>;
}
Enter fullscreen mode Exit fullscreen mode

Now if you don't pass the name prop, it will use the default value.

React events

If you want to add an event listener to a React element, you can do it like this:

function App() {
    return <button onClick={() => alert("Hello World")}>Click me</button>;
}
Enter fullscreen mode Exit fullscreen mode

The thing the above code does is that it passes an anonymous function to the onClick prop. You can also pass a named function:

function handleClick() {
    alert("Hello World");
}

function App() {
    return <button onClick={handleClick}>Click me</button>;
}
Enter fullscreen mode Exit fullscreen mode

React state

The state is a major part of React. It is used to store data that changes over time. You can use the useState hook to create a state variable. For example, if you want to create a counter, you can do it like this:

import { useState } from "react";

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={() => setCount(count + 1)}>Increment</button>
            <button onClick={() => setCount(count - 1)}>Decrement</button>
        </div>
    );
}
Enter fullscreen mode Exit fullscreen mode

Now, if you click the increment button, the count will increase by 1 and if you click the decrement button, the count will decrease by 1.

React useEffect

By default, React runs the effects after every render. But, if you want to run the effects only when a certain value changes, you can pass an array as a second argument to the useEffect hook. For example, if you want to run the effect only when the count changes, you can do it like this:

import { useState, useEffect } from "react";

function Counter() {
    // ...

    useEffect(() => {
        document.title = `You clicked ${count} times`;
    }, [count]);

    // ...
}
Enter fullscreen mode Exit fullscreen mode

Now every time the count changes, the document title will change.

Also, this can be very useful for running an effect only once when the component mounts. For example, if you want to fetch data from an API when the component mounts, you can do it like this:

import { useState, useEffect } from "react";

function App() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/todos/1")
            .then((response) => response.json())
            .then((json) => setData(json));
    }, []);

    // ...
}
Enter fullscreen mode Exit fullscreen mode

React hooks

Hooks are basically functions that let you interact with React features. You can use hooks to create state variables, fetch data, etc. You already used hooks such as useState and useEffect. You can also create your own hooks.

Normally, hooks must be inside a React function component and they must start with the word use.

React loops

If you have an array of data like this:

[
    {
        "id": 1,
        "title": "Hello World"
    },
    {
        "id": 2,
        "title": "Hello World 2"
    }
]
Enter fullscreen mode Exit fullscreen mode

You can combine it with the map method (JavaScript array method) to render a list of React elements. For example, if you want to render a list of todos, you can do it like this:

import { useState } from "react";

function App() {
    const [todos, setTodos] = useState([
        {
            "id": 1,
            "title": "Hello World"
        },
        {
            "id": 2,
            "title": "Hello World 2"
        }
    ]);

    return (
        <ul>
            {todos.map((todo) => (
                <li key={todo.id}>{todo.title}</li>
            ))}
        </ul>
    );
}
Enter fullscreen mode Exit fullscreen mode

Will render:
image

Also, use the key prop when rendering a list of React elements inside a loop to prevent React from rendering the same element twice.

React conditional rendering

If you want to render a React element only if a certain condition is true, you can do it like this:

function App() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    return (
        <div>
            {isLoggedIn && <h1>Hello World</h1>}
        </div>
    );
}
Enter fullscreen mode Exit fullscreen mode

This is just using the logical AND operator. If the isLoggedIn variable is true, it will render the <h1>Hello World</h1> element. If it is false, it will render nothing.

You can also use this to display a message if the isLoggedIn variable is false:

{isLoggedIn ? (
    <h1>Hello World</h1>
) : (
    <h1>You are not logged in</h1>
)}
Enter fullscreen mode Exit fullscreen mode

Or you can conditionally return from a function:

function App() {
    if (isLoggedIn) {
        return <h1>Hello World</h1>;
    } else {
        return <h1>You are not logged in</h1>;
    }
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

Now you know the basics of React. You can use these to create your own React apps. If you want to learn more, you can check out the React documentation. Good luck!

Top comments (0)