Environment Setup for React Hooks

Elijah Manor
InstructorElijah Manor

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 5 years ago

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.

Daniel Miclos
Daniel Miclos
~ 5 years ago

As a WebStorm user, I'm curious how do you open a browser preview inside VS Code?

Elijah Manor
Elijah Manorinstructor
~ 5 years ago

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

~ 5 years ago

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)

~ 5 years ago

also in "16.7.0-alpha.2"

~ 5 years ago

found it! need to configure it to "16.7.0-alpha.0 - next" vrsion

Elijah Manor
Elijah Manorinstructor
~ 5 years ago

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.

Roberto Alencar
Roberto Alencar
~ 5 years ago

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 $_