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 833 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



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

Avatar
egghead.io

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

Avatar
srhise

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

Avatar
Barry

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?

Avatar
Joel

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
Avatar
Joseph

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
Avatar
Mithun

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

Avatar
Joseph

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
Avatar
Victor

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
Avatar
Steve

Joe,

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
Avatar
Barry

That was indeed the case. Thx!

In reply to Joseph
Avatar
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?

Avatar
Joseph

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

In reply to Arek Śliwa
Avatar
Arek Śliwa

You got me! thanks.

In reply to Joseph
Avatar
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
Avatar
Everett

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?

Avatar
Michael

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.

Avatar
Michael

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

Avatar
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.

Avatar
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
Avatar
Irvin

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

Avatar
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.

Avatar
Joel

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
Avatar
Matthew

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
Avatar
jon madison

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

In reply to Steve
Avatar
Rajiv

Hi,
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...

Avatar
Lawrence

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

In reply to Rajiv
Avatar
Guru

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"
}

Avatar
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?

Avatar
James Scaggs

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

In reply to Michael
Avatar
Joseph

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
Avatar
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
Avatar
James Scaggs

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

In reply to James Scaggs
Avatar
Mark

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

Avatar
Apurva Jain

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

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

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

Avatar
coolvision1

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

In reply to Barry
Avatar
Pablo Boerr

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

Avatar
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
Avatar
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....

Avatar
Brad

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
Avatar
Kris

~~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

Avatar
Michaeljdu2010

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']
}
}
]
}
}

Avatar
Rocky

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?

Avatar
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.

Avatar
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
Avatar

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

In reply to egghead.io
Avatar
Krzysztof

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

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 to npm i, then create-react-app. We'll throw in a tag -g there to install that 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.

terminal

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

index.html

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

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 constant 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.

App.js

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.

index.js

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

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

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.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?