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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!