⚠️ This lesson is retired and might contain outdated information.

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

Joe Maddalone
InstructorJoe Maddalone
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 2 years ago

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.

[00:00] 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.

[00:27] 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. 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.

[00:56] 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. 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.

[01:22] 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.

[01:41] One interesting thing about create-react-app is, when we do have an error, we'll see that error right here in the browser. 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.

[02:03] 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. 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.

[02:28] 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 React DOM, 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.

[02:48] 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.

srhise
srhise
~ 8 years ago

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

Joe Maddalone
Joe Maddaloneinstructor
~ 8 years ago

https://github.com/joemaddalone/ReactSublimeSnippets

Charles
Charles
~ 8 years ago

I agree. https://github.com/sergeche/emmet-sublime was used at 3:04.

Barry
Barry
~ 8 years ago

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?

Joel Hooks
Joel Hooks
~ 8 years ago

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.

Joe Maddalone
Joe Maddaloneinstructor
~ 8 years ago

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.

Mithun
Mithun
~ 8 years ago

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

Joe Maddalone
Joe Maddaloneinstructor
~ 8 years ago

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.

Victor
Victor
~ 8 years ago

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/

Steve
Steve
~ 8 years ago

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.

Barry
Barry
~ 8 years ago

That was indeed the case. Thx!

Arek Śliwa
Arek Śliwa
~ 8 years ago

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?

Joe Maddalone
Joe Maddaloneinstructor
~ 8 years ago

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

Arek Śliwa
Arek Śliwa
~ 8 years ago

You got me! thanks.

Joe Maddalone
Joe Maddaloneinstructor
~ 8 years ago

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

Everett
Everett
~ 8 years ago

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?

Michael
Michael
~ 8 years ago

When I run my 'npm start' everything appears to build correctly, but the return does not yield <div>Hello</div>. 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.

Joe Maddalone
Joe Maddaloneinstructor
~ 8 years ago

Compare your code to: https://gist.github.com/joemaddalone/1417d7f8524e0fd3bb5f

Michael
Michael
~ 8 years ago

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

Jimmy Daniel
Jimmy Daniel
~ 8 years ago

"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
Jimmy Daniel
~ 8 years ago

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 :(

Irvin Waldman
Irvin Waldman
~ 8 years ago

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

Derek Hannah
Derek Hannah
~ 8 years ago

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 <div> Hello div </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.

Joel Hooks
Joel Hooks
~ 8 years ago

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!

Compare Technology
Compare Technology
~ 8 years ago

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

jon madison
jon madison
~ 8 years ago

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

Rajiv
Rajiv
~ 8 years ago

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

Lawrence
Lawrence
~ 8 years ago

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

Guru Inamdar
Guru Inamdar
~ 8 years ago

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
James Scaggs
~ 8 years ago

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
James Scaggs
~ 8 years ago

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

Joe Maddalone
Joe Maddaloneinstructor
~ 8 years ago

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.

James Scaggs
James Scaggs
~ 8 years ago

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.

James Scaggs
James Scaggs
~ 8 years ago

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

Mark
Mark
~ 8 years ago

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

Apurva Jain
Apurva Jain
~ 8 years ago

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

  presets: ['es2015', 'react']
}```

With:
```loaders: ['babel?presets[]=es2015,presets[]=react']```
coolvision1
coolvision1
~ 8 years ago

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

Pablo Boerr
Pablo Boerr
~ 8 years ago

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

Nate Venn
Nate Venn
~ 8 years ago

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

Jason Simon Thomas
Jason Simon Thomas
~ 8 years ago

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

bradwoods.io
bradwoods.io
~ 8 years ago

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

Kris
Kris
~ 7 years ago

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

Michaeljdu2010
Michaeljdu2010
~ 7 years ago

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

Rocky
Rocky
~ 7 years ago

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
Dhafir Moussa
~ 7 years ago

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
Dhafir Moussa
~ 7 years ago

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.

Krzysztof
Krzysztof
~ 7 years ago

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

Vamshi
Vamshi
~ 7 years ago
 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! code ELIFECYCLE
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?

Nabil Makhout
Nabil Makhout
~ 7 years ago

Is this course still up to date?

Chester Heng
Chester Heng
~ 6 years ago

npm i create-react-app -g

npx create-react-app react-app

Naveen Kumar
Naveen Kumar
~ 5 years ago

Is this course still valid?... I can see the comments dated 3 years before...Please advise...

Markdown supported.
Become a member to join the discussionEnroll Today