Set Up Recoil in a new React App
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.