Environment Setup for React Hooks
In this lesson, we’ll make sure we have a sufficient environment in order to start using the experimental Hooks API that comes with React. Currently you need a prerelease version of React since it hasn’t yet been introduced into an official release.
Instructor: [00:00] We'll first start by bootstrapping an app with Create React App. Here, I'll use npm init and ask to use the React App initializer which maps to Create React App. We'll make a React Hooks Project and change to that directory when it's done, then Create React App does scaffolding, all the modules are installed, and bam, we have a project.
[00:20] Now, let's kick up our editor and open the app JS file, which is the top-level component that's rendered. Before we make any changes, let's kick up the Dev server from code's integrated terminal with npm start. We can see our app on the right.
[00:35] Let's come in here and tweak the link to include the version with React.version. On the right, it auto-updates to show version 16.6.3. However, Hooks is currently in a preview release. Let's cancel our Dev server and check out what versions are available for React with npm info React.
[00:56] At the bottom, you'll notice that there's a next dis tag that maps to the preview release. It is that release that contains the Hooks' proposal. We can install that with npm install React at next. We also need the React Dom to go along with it. We will take on React Bash Dom at next as well.
[01:13] If we wanted to be clever, we could leverage Bash Brace Expansion and npm install React {,-Dom} at next which will expand to the same thing. We could double check every one and two with npm ls React, and sure enough, we have a pre-release of React 16.7.
[01:36] At this point, we should be able to kick up our Dev server again with npm start, and the app on the right auto updates to show a pre-release version of React.
[01:46] At this point, we are set up to start using Hooks.
Thanks for watching the lesson. I'm not actually opening up a browse in VS Code. I'm using a feature of macOS that allows you to put two apps full-screen next to each-other in split-view https://support.apple.com/en-us/HT204948
I keep getting TypeError: Object(...) is not a function errors on "02-add-state-to-a-react-function-component-with-the-useState-hook" from the github.
the only change is that now react@next is 16.7.0(which is also the latest)
also in "16.7.0-alpha.2"
found it! need to configure it to "16.7.0-alpha.0 - next" vrsion
Yes, at the time I recorded the lesson the next version owas 16.7.0-alpha.0, which is what is listed in the github omega branch. But, you should be able to follow the same instructions shown in the video by installing the following...
npm install react@next react-dom@next
React did launch an official 16.7.0 recently that does not have hooks baked-in (like they thought they would). This sort of messed up the whole next release schedule, but they now addressed it. You can now install the next version (like above) and it should still have the hooks code inside of it.
there's a little typo on the first command
current
npm init react-app react-hooks && cd $
correct
npm init react-app react-hooks && cd $_
As a WebStorm user, I'm curious how do you open a browser preview inside VS Code?