Set Up Recoil in a new React App

Create Shared State with Recoil in a React App

Read a Value from Recoil with useRecoilValue

Compute a Value in Recoil Using a Selector

Write a Custom Recoil Hook to Reset a Value in the Recoil State

Use Async Functions in a Recoil Selector

Getting Started with Recoil in React

We'll create a new React game with:

```
npx create-react-app paper-game
cd paper-game
```

and then install Recoil with:

```
npm install recoil
```

and start the server:

```
npm start
```

Then, to wrap the entire app in the recoil root, we'll import `RecoilRoot` from `recoil` and wrap the app:

```
    <RecoilRoot>
      <Game />
    </RecoilRoot>
```

And the app is now up and running - ready to use Recoil



Chris Achard: [0:00] We'll start by creating a new create-react-app with npx create-react-app. We're going to make a game. Let's call that paper-game. We can cd into paper-game and we can install Recoil with npm install recoil. We can get it running with npm start. Now, we have our create-react-app running.

[0:33] Let's clean this up a bit. We just have a very basic app here. We're going to get rid of all of our components. In app.css, we'll get rid of everything except for the text-align: center and we'll add a bit of margin. Back in app.js, we're going to say this is our Paper Game and we have the basics of a game here.

[0:58] To use Recoil in this app, it's a lot like Context or like Redux. We need to wrap everything inside the app in something called the RecoilRoot. We're going to import RecoilRoot from 'recoil'. Then we can wrap everything in our RecoilRoot. If we save and reload, we get our Paper Game text still and we're connected to Recoil, ready to use it.

Course

Getting Started with Recoil in React

Set Up Recoil in a new React App

Share this video with your friends