Use create-react-app to Setup a Simple React App
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.
https://github.com/joemaddalone/ReactSublimeSnippets
I agree. https://github.com/sergeche/emmet-sublime was used at 3:04.
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.
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.
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.
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/
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.
That was indeed the case. Thx!
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")
You got me! thanks.
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
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 <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.
Compare your code to: https://gist.github.com/joemaddalone/1417d7f8524e0fd3bb5f
yeah thanks for the help but the code matches and it still doesn't work.
"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.
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 :(
Thank you for this video. It's exactly what I needed.
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.
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!
Same problem with Everett. Checkout code from github and run, but it isn't auto update view when you change text in App.js
yes, beware of the word "obvious" (which i've already heard and it's lesson 1)
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...
I too was having the same issue. I had a word spelled wrong in the webpack.config.js file.
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" }
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?
Did you ever figure this out? I'm having the same issue
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.
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.
I deleted node_modules and reinstalled all the dependencies and it resolved my issue.
For syntax highlighting in Webstorm... Preferences>Language&Frameworks>Javascript>Javascript language version: JSX Harmony
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']```
You need to add the babel preset dependencies. At the video they omitted to add --save when they installed them
Getting this message in the console Super expression must either be null or a function, not undefined. Anyone else run into this?
Check to make sure you have React.Component. Its likely you have React.component (lowercase c verses uppercase C). Make sure its uppercase.
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
~~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?
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.
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.
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! 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?
Is this course still up to date?
npm i create-react-app -g
npx create-react-app react-app
Is this course still valid?... I can see the comments dated 3 years before...Please advise...
This is very helpful. I suggest adding links to the sublime packages you are using to help with autocompletion.