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

Building a React.js App: Up and Running with React and Webpack

Building a React.js App: Up and Running with React and Webpack

7:57
In this video, we’ll talk about JSX and learn the necessity of Webpack and specifically babel-loader for JSX to JavaScript transformation. We’ll also set up our basic architecture and build our very first React component.
Watch this lesson now
Avatar
egghead.io

In this video, we’ll talk about JSX and learn the necessity of Webpack and specifically babel-loader for JSX to JavaScript transformation. We’ll also set up our basic architecture and build our very first React component.

Avatar
Gene

Hi Tyler,

Is that sublime text you're using? What's the color scheme? It looks nice :)

Avatar
Tyler

Sublime. Brogrammer Theme with Oceanic Next Color Scheme.

In reply to Gene
Avatar
Paul

Hi and thanks for the series.
How would I start the app through a server rather than open the file in the browser?

Avatar
Matias

There are a ton of node modules that'll do, but one simple option that's really easy to get up and running is Httpster.
npm install -g httpster
then simply run "httpster" from terminal in your JSX output directory

In reply to Paul
Avatar
Daniel

running webpack -w resulted in 'webpack: command not found',

to make the command work, I needed to run 'npm install webpack -g'. You said it was not necessary. I believe it is. Why did you say it was not?

Avatar
Tyler

At 2:48 I specifically say that you'll need to run 'npm install webpack -g'. So not sure where you heard me say it's not necessary.

In reply to Daniel
Avatar
VNGRS

Thanks Tyler for this amazing series. How can I use Chrome React DevTools? It was working fine when I did a project without Babel and Webpack. I wonder do we somehow need to expose to the browser that we are actually using Reactjs.

Avatar
Tyler

The original React Dev Tools is kind of finicky (as you can see by the reviews). The biggest thing is making sure you add React to the window object.

window.React = require('react'). That usually does the trick. The good news is they just released a new version that I hear is much better. It can be found here. http://facebook.github.io/react/blog/2015/08/03/new-react-devtools-beta.html

In reply to VNGRS
Avatar
Andrew

You said it was not necessary in your case because you had already installed it on your machine. I think that's where Daniel misunderstood.

In reply to Tyler
Avatar
Matthew

Hi Tyler, I am getting this error message:

TypeError: Object babel has no method 'split'

Any ideas? Thanks

Avatar
Yariv

How would you setup the github examples on windows?
I tried simply to git clone + npm install. got lots of install errors due to webpack-dev-server on windows. it looks like there is a dependency to node-gyp via webpack-dev-server--> socket.io --> Engine.io --> ws --> node-gyp. I know from other npm packages that use node-gyp it is a serious pain for anyone developing on windows. I was wondering if you have any insight regarding this issue.
Appreciate it.
Ajar

Avatar
Tyler

Hi Yariv,

Unfortunately I've always developed on Mac so I'm not of much help with this.

In reply to Yariv
Avatar
Yariv

I had a look at the result bundle.js that babel outputs.
This simplest hello world example result in a js file with 20,000 lines, and its weight is over 600kb. how would you go about minify/uglify getting it ready for production deployment and how much do you think it should weigh? Thanks. Ajar

Avatar
Yariv

Thanks Tyler. Great course!

In reply to Tyler
Avatar
Yariv

Thank you Tyler for answering.
Another pressing question regarding this simple example setup:
I had a look at the result bundle.js that babel outputs.
This simplest hello world example result in a js file with 20,000 lines, and its weight is over 600kb. how would you go about minify/uglify getting it ready for production deployment and how much do you think it should weigh? Thanks. Ajar

In reply to Tyler
Avatar
Rob

I am going to post my error with yours because there is a second page of comments that the site won't let me go to so I can add. When I run webpack -w I get an error that tells me that my 'Output filename not configured'. I have the same webpack.config.js as the screencast and taken the same steps. Can't find Google answers to this issue and can't move on with series with the error.

Avatar
Tyler

Hey Rob, is your code on Github? If/When it is, send me the link and I'll take a look.

In reply to Rob
Avatar
Santhosh

Dear Tyler,

I followed the tutorial, but when i run "webpack -w", I am getting an error in the console which reads,

"ERROR in Entry module not found: Error: Cannot resolve module 'babel' in D:\ReactLessons\10 Github Profiles"

Can you help me with the solution.

Thanks,
Santhosh Vijay

Avatar
Santhosh

Dear Rob,

I too faced the same issue and finally found I running the "webpack -w" from Public folder and not from the root folder.

Kindly check if you are running the "webpack -w" from the root folder where you have placed your webpack.config file.

Hope this helps!

Thanks,
Santhosh Vijay
www.santhoshthepro.in

In reply to Rob
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?