The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

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

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

3:14
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.
Watch this lesson now
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.

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