React Recoil Tutorial #1: Setting Up Recoil in a New React Project (Shopping Cart Example)

Screenshot from the tutorial

React Recoil Tutorial #1: Setting Up Recoil in a New React Project (Shopping Cart Example)

In this tutorial, we will learn how to set up Recoil in a new React project, using a shopping cart as our example. Recoil is a state management library that makes managing global state in your React applications easier and more efficient. By the end of this tutorial, you will have a functioning shopping cart that demonstrates the core concepts of Recoil.

Prerequisites

Before we dive into the tutorial, ensure that you have the following prerequisites:

• Basic knowledge of React
• Node.js and npm installed on your machine
• A code editor (like Visual Studio Code)

Now, let's get started!

Step 1: Setting Up a New React Project

First, we'll create a new React application using Create React App. Open your terminal and run the following command:

npx create-react-app recoil-shopping-cart

Once the setup is complete, navigate into the project directory:

cd recoil-shopping-cart

Step 2: Installing Recoil

Next, we need to install the Recoil library. You can do this by running the following command:

npm install recoil

Step 3: Setting Up Recoil in Your Project

Before we can use Recoil in our application, we need to set up the RecoilRoot component, which will provide the Recoil state to our application.

Open src/index.js and wrap your App component with RecoilRoot:

import React from 'react';
import ReactDOM from 'react-dom';
import { RecoilRoot } from 'recoil';
import App from './App';

ReactDOM.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>,
  document.getElementById('root')
);

Step 4: Creating the State for Our Shopping Cart

Now, let's create the state for our shopping cart using Recoil's atom. Create a new file called cartState.js in the src directory and add the following code:

import { atom } from 'recoil';

export const cartState = atom({
  key: 'cartState', // unique ID (with respect to other atoms/selectors)
  default: [], // default value (initial state)
});

In this file, we define a new atom called cartState which will hold our shopping cart items.

Step 5: Creating a Cart Component

Next, we need a component to manage our shopping cart. Create a new file called Cart.js in the src directory:

import React from 'react';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { cartState } from './cartState';

const Cart = () => {
  const items = useRecoilValue(cartState);
  const setItems = useSetRecoilState(cartState);

  const removeItem = (id) => {
    setItems((prevItems) => prevItems.filter(item => item.id !== id));
  };

  return (
    <div>
      <h2>Shopping Cart</h2>
      {items.length === 0 && <p>Your cart is empty.</p>}
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.name} - ${item.price}
            <button onClick={() => removeItem(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Cart;

In this component, we use useRecoilValue to read the current cart items and useSetRecoilState to update the cart state. We also provide a way to remove items from the cart.

Step 6: Integrating the Cart Component

Now, we need to integrate our Cart component into the main application. Open the App.js file and add the following code:

import React from 'react';
import Cart from './Cart';

const App = () => {
  return (
    <div>
      <h1>My Shopping Cart</h1>
      <Cart />
    </div>
  );
};

export default App;

Step 7: Testing the Application

You can now run your application to see if everything is working correctly. In your terminal, run:

npm start

This will start the development server, and you can view your shopping cart at http://localhost:3000.

Conclusion

Congratulations! You have successfully set up Recoil in a new React project and created a simple shopping cart example. You learned how to:

• Install Recoil and set up RecoilRoot
• Create an atom for managing cart state
• Build a Cart component to display and manage shopping cart items

Recoil offers powerful features like selectors and asynchronous state management, which you can explore in future tutorials. Keep experimenting and enhancing your shopping cart application!

Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios