Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1023 of the free egghead.io lessons, plus get React content delivered directly to your inbox!

Existing egghead members will not see this. Sign in.

Use create-react-app to Setup a Simple React App

3:14 React lesson by

React requires some initial setup before we can get going with the app. In this lesson, we will use create-react-app to do this initial setup for us.

Get the Code Now
click to level up

egghead.io comment guidelines


In this lesson we'll setup a simple build process for converting our ES6 React components into ES5 using Babel and Webpack


This is very helpful. I suggest adding links to the sublime packages you are using to help with autocompletion.


I have the same setup. But when i run the "npm start" command on my linux machine. It does not generate the index.js file. It also does not use the 3333 port maybe that is a hint? It uses: http://localhost:8080/webpack-dev-server/

Any ideas?


I have the same setup. But when i run the "npm start" command on my linux machine. It does not generate the index.js file. It also does not use the 3333 port maybe that is a hint? It uses: http://localhost:8080/webpack-dev-server/

Any ideas?

Please follow the link provided in the code tab and compare it to your code. Each lesson's individual code is available.

In reply to Barry

Getting http://localhost:8080/webpack-dev-server/ is a tell-tale sign that webpack-dev-server is not picking up on webpack.config.js. Check your file name first.

In reply to Barry

What is babel used for here? Is it always required when working with React?


Babel supports the conversion from ES6 to ES5 and JSX to JS. While it is not specifically required by React it is required by this series which illustrates React development using ES6 and JSX.

In reply to Mithun

Should the global install for babel be babel-cli (as of 6.x.x)?

As in: npm install babel-cli webpack webpack-dev-server -g

See https://babeljs.io/docs/usage/cli/

In reply to Joseph


While I really appreciate the lesson, there needs to be a discussion regarding "import", and that somehow your Sublime Text installation is 'schooled' to recognize this token whereas at lest mine has not. I have tried a number of other IDEs and attempted to feed it what I 'think' may solve the problem with no luck. If you could accept some feedback, I recommend if you are going to show how to set-up an development environment, you should install the IDE from scratch, install what snippets you are going to be relying as well as all the other elements that you have done such a great job explaining.

The sad fact is this stuff is not obvious, at least not to the folks who are interested in this series.

In reply to Joseph

That was indeed the case. Thx!

In reply to Joseph
Arek Śliwa

I was following the tutorial and everything seems fine. But when I start server I receive this error: Uncaught TypeError: Super expression must either be null or a function, not undefined. Any suggestions?


Most likely you have React.component where you should have React.Component (uppercase "C")

In reply to Arek Śliwa
Arek Śliwa

You got me! thanks.

In reply to Joseph

In terms of a "discussion regarding 'import'" it is simply outside the scope of this series. I'd highly suggest reviewing some of the many ES6 lessons we have on egghead.io. Specific to import: https://egghead.io/lessons/ecmascript-6-es6-modules-es2015-import-and-export

In reply to Steve

I'm having trouble with the auto-updating... my webpack.config.js is being read (the console echoes out the expected output and my app is visible at the localhost URL at the defined port), but editing the App.js never causes the browser to update. Even refreshing the page does not show my changes. I have to quit the webpack-dev-server and restart it before my changes appear. This really slows down development. Any ideas?


When I run my 'npm start' everything appears to build correctly, but the return does not yield Hello. All I see is the empty id="app" div from my index.html. I am thinking maybe the issue is in main.js but I am unsure how to troubleshoot this when I am getting no errors.


yeah thanks for the help but the code matches and it still doesn't work.

Jimmy Daniel

"Uncaught SyntaxError: Unexpected token import main.js1"

I'm getting this error, I guess Babel is not transpiling my code? I installed it, as specified in the video. Please advise.

Jimmy Daniel

And BTW, I even downloaded the exact same code from Github to make sure I'm not missing something (e.g. presets, typos, etc). Still no luck :(

In reply to Jimmy Daniel

Thank you for this video. It's exactly what I needed.

Derek Hannah

i'd like to suggest that you teach this by not using the es2015 "class" syntax like so:

// App.js
export default React.createClass({
render: function() { return Hello div }

"class" syntax and classes are harmful to all of us, especially newbies, and shouldn't have been added to es2015, simply because you should "Prefer composition over classical inheritance" - Gang of Four, Design Patterns, 1995

here is some great information as to why we shouldn't be using this new 'class' syntax, and should be using javascript in a functional style as opposed to an OOP style. https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3#.d7mejd7bv

I'd love to hear your thoughts.


Using classes and types isn't representative of an OOP style. It certainly can, but creates no fundamental difference in the use case.

This is evidenced later in the course when higher-order components are used to enhance functionality (versus base classes).

Eric is interesting and intelligent. If you probe a little deeper, the concern is that classes will somehow cause deep inheritance graphs in our programs. Deep inheritance graphs can be complicated and confusing.

We aren't using deep inheritance graphs in this course, and generally wouldn't recommend them in general!

In reply to Derek Hannah

Same problem with Everett.
Checkout code from github and run, but it isn't auto update view when you change text in App.js

In reply to Joseph
jon madison

yes, beware of the word "obvious" (which i've already heard and it's lesson 1)

In reply to Steve

I followed the same steps as per the tutorial but the my index.js is not compiling. Even though the "npm start" works perfectly, but when I run the localhost:3333 on browser it dosen't work with error of index.js not present. Any suggestions...


I too was having the same issue. I had a word spelled wrong in the webpack.config.js file.

In reply to Rajiv

I realize that if I have this in my index.html <script src="index.js" /> it doesn't work (I don't see anything on browser) but If I change this back to

<script src="index.js" > </script> it works fine.

my package.json looks like this
"dependencies": {
"babel-core": "^6.5.2",
"babel-loader": "^6.2.3",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"

James Scaggs

I only get a blank white screen when I run npm start. I get 1 error: The node API for babel has been moved to babel-core.
@ multi main

I've copied all of the exact files from the github setup lesson and this is still what im getting.

Any help?

James Scaggs

Did you ever figure this out? I'm having the same issue

In reply to Michael

Run npm uninstall babel -g
The babel package has been deprecated and is no longer needed. The functionality we needed from the babel package has been moved to babel-core.

In reply to James Scaggs
James Scaggs

Thanks Joseph, I've removed babel but it still says The node API for babel has been moved to babel-core.

I must need to edit other files but I'm unable to figure it out.

In reply to Joseph
James Scaggs

I deleted node_modules and reinstalled all the dependencies and it resolved my issue.

In reply to James Scaggs

For syntax highlighting in Webstorm... Preferences>Language&Frameworks>Javascript>Javascript language version: JSX Harmony

Apurva Jain

If you get this error : Error: Cannot define 'query' and multiple loaders in loaders list

Solution is:
query: {
presets: ['es2015', 'react']

loaders: ['babel?presets[]=es2015,presets[]=react']


You need to add the babel preset dependencies. At the video they omitted to add --save when they installed them

In reply to Barry
Pablo Boerr

Getting this message in the console Super expression must either be null or a function, not undefined. Anyone else run into this?

Nate Venn

Check to make sure you have React.Component. Its likely you have React.component (lowercase c verses uppercase C). Make sure its uppercase.

In reply to Pablo Boerr
Jason Simon Thomas

everything is running , webpack bundle is now VALID. Execpt for the fact tat I get this error in my console:
Uncaught TypeError: Super index.js28811
expression must either be null or a function, not defined...

I'm comparing the code and everything is Identical to the github code it seems. What could be the problem here?

Please Help....


Did you find a solution? I'm getting the same problem. Already checked the my webpack.config.js is spelt correctly

In reply to Joel

~~Followed all the steps, 3 times now. Once the app loads the browser console outputs the following error: ~~

~~index.js:7702 Uncaught ReferenceError: ReactDom is not defined~~

** Make sure ReactDOM is spelled correctly


When i follow this and run npm start, I always get this error:

ERROR in ./main.js
Module build failed: ReferenceError: [BABEL] /Users/mdu/Sites/react-fundamentals/main.js: Unknown option: base.preset.

The file main.js is there. My webpack.config.js looks exactly like in the video. Why is it saying unknown preset?

module.exports = {
entry: './main.js',
output: {
path: './',
filename: 'index.js'
devServer: {
inline: true,
port: 3333
module: {
loaders: [
test: /.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
preset: ['es2017', 'react']


Is this a race? My god, I'm very impressed with how quickly you can go through everything...I could do the same with an Angular app. But I'm here because I don't know React so why is this being absolutely blazed through?

Dhafir Moussa

What are the prerequisites to taking this course? I have few years experience with JS, AngularJS and JQuery in Windows environment so this first lesson went over my head. For example, what is babel and why do I need it? Do I need to familiarize myself with other technologies first, and what are they? It's important set these assumptions up front. Thanks for your great work.

Dhafir Moussa

I feel the same, the lesson kept me feeling dismayed. I think it is designed for intermediate levels who had a fair amount of experience.

In reply to Rocky

Great course, I had no problems, I typed everything by hand.

In reply to egghead.io

It will be good to write which version of node you are using, it took me some time to find correct version of node.

npm run build

> jsxtranspiler@0.1.0 build C:\Users\vgudipati\Desktop\jsxTranspiler
> react-scripts build

Creating an optimized production build...
Failed to compile.

Module build failed: Error: Unexpected "space" found.
    at new error (C:\Users\vgudipati\Desktop\jsxTranspiler\node_modules\postcss-selector-parser\dist\processor.js:29:23)
    at Parser.error (C:\Users\vgudipati\Desktop\jsxTranspiler\node_modules\postcss-selector-parser\dist\parser.js:234:15)
    at Parser.pseudo (C:\Users\vgudipati\Desktop\jsxTranspiler\node_modules\postcss-selector-parser\dist\parser.js:362:18)
    at Parser.parse (C:\Users\vgudipati\Desktop\jsxTranspiler\node_modules\postcss-selector-parser\dist\parser.js:551:22)
    at Parser.loop (C:\Users\vgudipati\Desktop\jsxTranspiler\node_modules\postcss-selector-parser\dist\parser.js:519:18)
    at new Parser (C:\Users\vgudipati\Desktop\jsxTranspiler\node_modules\postcss-selector-parser\dist\parser.js:104:21)
    at Processor.process (C:\Users\vgudipati\Desktop\jsxTranspiler\node_modules\postcss-selector-parser\dist\processor.js:26:21)
    at getParsed (C:\Users\vgudipati\Desktop\jsxTranspiler\node_modules\postcss-minify-selectors\dist\index.js:32:59)
    at optimise (C:\Users\vgudipati\Desktop\jsxTranspiler\node_modules\postcss-minify-selectors\dist\index.js:139:21)
    at C:\Users\vgudipati\Desktop\jsxTranspiler\node_modules\postcss\lib\container.js:241:28
    at C:\Users\vgudipati\Desktop\jsxTranspiler\node_modules\postcss\lib\container.js:148:26
    at Root.each (C:\Users\vgudipati\Desktop\jsxTranspiler\node_modules\postcss\lib\container.js:114:22)
    at Root.walk (C:\Users\vgudipati\Desktop\jsxTranspiler\node_modules\postcss\lib\container.js:147:21)
    at Root.walkRules (C:\Users\vgudipati\Desktop\jsxTranspiler\node_modules\postcss\lib\container.js:239:25)
    at C:\Users\vgudipati\Desktop\jsxTranspiler\node_modules\postcss-minify-selectors\dist\index.js:165:20
    at LazyResult.run (C:\Users\vgudipati\Desktop\jsxTranspiler\node_modules\postcss\lib\lazy-result.js:274:20)

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v6.10.1
npm ERR! npm  v3.10.10
npm ERR! jsxtranspiler@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the jsxtranspiler@0.1.0 build script 'react-scripts build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the jsxtranspiler package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     react-scripts build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs jsxtranspiler
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls jsxtranspiler
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\vgudipati\Desktop\jsxTranspiler\npm-debug.log

Can you please help me resolve this?

In order to set up an environment for working with React, we can use the create-react-app package available to us over npm. The installation for that is npm i create-react-app -g to install globally. I've already got that installed. I'm going to go ahead and use the tool that is provided to us, which is create-react-app.


$ npm i create-react-app -g

Then we pass in a directory that we'd want to use for our application. In my case, that's simply going to be react-app.

$ create-react-app react-app

This is going to take a couple of minutes to install. It'll install a series of scripts and a scaffolded application for us. Once that's in place, we'll go ahead and cd into our directory. We'll go ahead and load that up into our text editor.

$ cd react-app

We'll go ahead and run our first script, which is npm start, which will launch the scaffolded out application. We can see that in the browser.

$ npm start

For the purposes of our lesson, we're going to go ahead and kill off a handful of files. We're going to kill everything except for index.js and App.js in the source directory and delete those guys.

Then, in our index.html, we're going to go ahead and recreate this guy. We're going to start to see some errors here, but that's OK. index.html, I'm going to call this guy React App. Then I'm going to create a target <div> here with an id of root. This is going to be the target for our components in the DOM.


<html lang="en">
  <meta charset="UTF-8">
  <title>React App</title>
  <div id="root"></div>

One interesting thing about create-react-app is, when we do have an error, we'll see that error right here in the browser.

Error in Brower

We'll also see that here in the terminal. In App.js, let's go ahead and kill this guy right now. The error we're seeing is because we deleted the App.css. I'm going to go ahead and kill this off right now.

We're going to import React from 'react'. Then we're going to create a quick const variable here called App. This is going to be our first component. It's going to output an <h1> that says Hello. Then we're going to export that by default.


import React from 'react';

const App = () => <h1>Hello</h1>

export default App

Now we're going to jump over here to our index.js. The only real problem that we have right now is that this is importing index.css.

Just to talk a moment about what's happening here, we're importing React, which is the library that allows us to build React components. We're also importing ReactDOM, which is the library that allows us to place our components and work with them in the context of the DOM. Then we're importing the component that we just worked on, the App component.


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

  <App />,

We're using ReactDOM.render to render that component in its JSX format to the target that we created, that <div> with an id of root. If I go ahead and save this, we should be back up and running. We've got Hello there. We've also got live reload enabled. If I change this to Hi, we'll get a reload right there. We can see our component now renders out Hi. We are good to start learning React.

Joel's Head
Why are we asking?