Building a React.js App: Up and Running with React and Webpack
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.
In this video we're going to build our very first React component. But before we do that, we need to do a few other things. The very first thing I'm going to do is run npm init. What this is going to do, and I'm just pressing enter here to get through all the commands, is it's going to allow us to use npm to require modules that we need, specifically modules like React. So what I'm doing here is I'm installing a specific version of React, this is the latest version as of today, but that might change.
So this is just future-proofing this series a little bit. When this is done, what you'll notice is that we have this node modules folder, and inside that node modules folder we now have React. We can see if we take a look inside of that, so React is right here. So now any time we want to use React, we can just require it and we'll have that available to us.
One more thing we need to install is this thing called the React DOM. The same thing, I'm going to install a specific version number, and we'll talk a little bit more about what exactly is React DOM later in this lesson. Now we're going to install a bunch of dependencies related to Babel. Babel is a JavaScript compiler that's going to let us write JSX, which we'll talk about in a second, but it's also going to let us write ES2015 or ES6 as I'll refer to it.
Basically what we're doing here with Babel is we will write some code, Babel will compile that for us into something that the browser can read. So let's look at exactly how Babel is going to help us. Here we have some normal React code, we have some JavaScript stuff, and then it looks like what we have here is HTML.
This is actually called JSX, and what JSX does is it allows us to write HTML-ish looking code inside of our JavaScript, and now that's going to sound a little weird, and it might throw up some red flags in your head, but it's actually really convenient, and you'll probably learn to love it as you get more used to React. Now you'll notice inside of our node modules folder we have all this Babel stuff, and we also have our React code.
The next thing I'm going to do is make a folder called public, and then inside that folder, I'm going to make a new index.html file. If we head over to our code, this index.html file is going to be basically the root view of our application. So you'll notice here I'm just pasting in this, we have bootstrap, and we have a div with an ID of app, and then we have the only script that we're going to include is this bundle.js file.
Eventually what's going to happen is we want to take all of our code and all of our components, we want to put them through a process that's going to transpile our JSX into normal JavaScript, and then we want to spit all of that out in one file called bundle.js inside of our public folder. To do that, what we're going to do is we're going to use this very nice tool called webpack.
So I'm going to create a webpack.config.js file, and if you haven't used webpack before, what you'll need to do is head over to your terminal and run npm install webpack-g, and what that's going to do is it's going to save webpack as a global module on your computer, but since I've already done that, we don't really need to do that. Heading back to our webpack.config file, we are going to export an object that has all of our webpack configuration stuff. This is going to make a lot of sense as we start going through it.
The very first thing we want to do is we need to tell webpack where our root component is. Because if you think about React, and we'll talk a lot more about this, but React is basically composed of different components and there's always one root component that's going to render all of its children components. So we're pointing webpack to that root component so that it knows where to start processing all of our JSX.
The next thing we're going to need to do is we want to tell webpack where after it's done transpiling everything, and combining it all into one file, where to puke out that new file. So what we're going to say is once you're done compiling this, or transpiling this component and all of the children components, we want you to take that new code and throw it into bundle.js in the public folder. Then the last thing we're going to do is we need to tell it what to actually do with the main JS code and all of its children components.
What we're going to do, is we're going to use a loader, and this loader, it's the Babel loader which we downloaded earlier. Now we need to tell Babel exactly what transformation we'd like it to do to our code. If you remember earlier we downloaded a bunch of npm packages related to Babel. What we're going to do now is go ahead and create a presets of property on this query object. Presets is all the transformations that Babel is going to do to our code.
So one preset we installed earlier was the React preset, then the other one which we're not going to use initially but we're going to use later on in this lesson is called ES2015, basically that's going to allow us to write ES6 code. Now what we need to do, is let's go ahead and create our very first component. Let's make a new folder called app which is where all of our application code will live, and then let's make a new folder called components which all of our components will live in, and now let's go ahead and make a new file called main.js.
Now up to this point what's going to happen is when we create this main.js component, you'll notice here that's just this entry. Webpack is going to say, "Hey, I have this main.js component, I'm going to take this component, I'm going to run it through these transformations, and then I'm going to spit it out in this public/bundle.js file." The very first thing is we're going to require React and we're able to do this because earlier we npm installed React, so now if we require React we have that.
Then I'm going to create a new variable called main, and I'm going to set it equal to react.createClass. What react.createClass does is it creates a React component for us, so there's a few properties you can pass in. The one that we're going to talk about in this video is called render. What render does is it specifies what the UI looks like for this specific element. So we're going to have something very basic that just says, "Hello World."
So when this component gets rendered to the view, and eventually we'll do something like this to render it. When this gets rendered to the view it's going to show "Hello World." Now we need to render this main component to the view. If you remember earlier we npm installed this thing called React DOM. What's cool about React is you're able to do things like server-side rendering. So what React DOM does, it says, "Hey React, we are going to render this component on the client with React DOM and not on the server."
Now what we need to do is we're going to say react-dom.render, we need to then give it our main component, our main parent component that we're rendering, and we need to tell it where to render to. If you'll remember earlier we create this guy, this div with an id of apps, so all we're going to do is say document.getElementByID and then select apps, and then what that will do is it will go ahead and grab this element and render the main component to it.
Now head over to your terminal and go ahead and run webpack, webpack-w, so it looks like everything's good. Now let's go ahead and open up this index.html file on the browser and what we should see is "Hello World."
Sublime. Brogrammer Theme with Oceanic Next Color Scheme.
Hi and thanks for the series. How would I start the app through a server rather than open the file in the browser?
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
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?
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.
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.
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
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.
Hi Tyler, I am getting this error message:
TypeError: Object babel has no method 'split'
Any ideas? Thanks
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
Hi Yariv,
Unfortunately I've always developed on Mac so I'm not of much help with this.
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
Thanks Tyler. Great course!
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
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.
Hey Rob, is your code on Github? If/When it is, send me the link and I'll take a look.
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
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
Experience the following. Need an extra module to solve it.
npm install babel-preset-react
➜ github-notetaker webpack -w Hash: efea76b1048c3a97b963 Version: webpack 1.12.2 Time: 619ms + 1 hidden modules
ERROR in ./app/components/Main.js Module build failed: SyntaxError: /Users/hongchuan/Documents/Development/react/github-notetaker/app/components/Main.js: Unexpected token (6:10) 4 | render: function() { 5 | return (
6 | <div>Hello World</div> | ^ 7 | ); 8 | } 9 | });
I'm getting really stuck setting up the development environment, is there any training on things like Gulp Webpack and all of those random things on Windows?
DevEnv stuff is the worst. Your best bet is probably googling around for some Windows related tutorials. You're alone in thinking that the Webpack docs could be a little more friendly.
Yup. This is a byproduct of the video running an older version. If you get stuck again, you can refer to the Github repo. It's up to date with the latest of everything. https://github.com/tylermcginnis/github-notetaker-egghead
I got stuck, too. When I try "webpack -w", error is shown. My Error is as below.
Time: 305ms + 1 hidden modules
ERROR in ./app/components/Main.js Module build failed: SyntaxError: /home/edmond/eggheadio/buildingreactapp/app/components/Main.js: Unexpected token (6:12) 4 | render: function () { 5 | return (
6 | <div> Hello World </div> | ^ 7 | ) 8 | } 9 | });
How can I solve this?
My package.json file is as below.
{ "name": "buildingreactapp", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "babel-core": "^6.2.1", "babel-loader": "^6.2.0", "babel-preset-react": "^6.1.18", "react": "^0.14.3", "webpack": "^1.12.8" } }
Oh, I fixed by downgrading the version of babel-loader from 6 to 5.
When i run webpack -w i get error "Output filename not configured". Copied config from https://github.com/tylermcginnis/github-notetaker-egghead/blob/02-first-component-webpack/webpack.config.js
Hi Sergii,
Did you verify the rest of your code is correct? With that error it can be something very minor like this issue - http://anujnair.com/blog/12-output-filename-not-configured-error-from-webpack
I get the same issue as a few others when I run 'webpack -w' in the root directory.
ERROR in ./app/components/Main.js Module build failed: SyntaxError: /Users/peekay/Desktop/Coding/egg-head-react/app/components/Main.js: Unexpected token (6:6) 4 | render: function(){ 5 | return (
6 | <div> | ^ 7 | Hello World 8 | </div> 9 | )
Here's my github repo: https://github.com/iam-peekay/react-notetaker
Ah, wait. I switched to version 5.1.3 and it seems to have fixed the issue. Looks like other people have been running into the same issue: https://github.com/babel/babel-loader/issues/68
Thanks for posting the solution! The JS world moves so quick.
The lesson video has been updated!
Just a side note: Run 'webpack -w' from your root directory. I was being an idiot and running from the components folder and sat there for 30 minutes wondering why it doesn't work :)
I should have mentioned that. Sorry!
Hi,
I have problem to see the result. Everything works fine but when I open html file there is nothing. When I open debug tool I can see only in console
bundle.js:1 Uncaught SyntaxError: Unexpected token ILLEGAL in-page-script.js:1 Uncaught SyntaxError: Unexpected token ILLEGAL
I can't see problem.
Can you help me please?
Pavel
Fixed,
I have to add into index.html this line with charset specified.
<script src="bundle.js" charset="utf-8"></script>
Tried running "webpack -w" in the root "github-notetaker-egghead" directory and am getting a "ERROR in Entry module not found: Error: Cannot resolve module 'babel' " error. Any help? Thanks!
Have you compared your code to that in the Repo? Also, make sure you npm installed everything correctly, including babel.
Turns out it was an npm issue. I didn't have one of the babel presets installed properly. It's all fixed now. Thanks!
get webpack-dev-server with npm install --save-dev webpack-dev-server
in package.json add this: "scripts": { "start": "webpack-dev-server" }
in your webpack.config.js add this: devServer: { inline: true, port: 3333 }, in the command line type npm start
In the browser go to http://localhost:3333/
I like to strip out everything that isn't 100% necessary when teaching since unneeded tools often confuse beginners. But yes, webpack-dev-server is great.
So, I thought I'd just grab the source from github and follow along. Unfortunately, the source on github seems to have little to do with the lessons. Some things are similar, but almost all the files seem to be different. What's up? Is there a better way to follow this?
The master branch is the code for video 17. Each video is separated into branches, so that branches for this video is https://github.com/tylermcginnis/github-notetaker-egghead/tree/02-first-component-webpack
Great video! Could you share your editor settings with us?
Changing the test: /\.jsx$/ to make the x optional (i.e. test: /\.jsx?$/) will fix a lot of the webpack -w issues without having to downgrade your babel loader to version 5
Woo. https://twitter.com/tylermcginnis33/status/610920794189889536
where's the mythical "open in browser" selection on Sublime Text?
Found out from a friend. SideBarEnhancements package.
Make sure your webpack config file matches that in the github repo and make sure that you've npm installed the correct packages as well.
I had to change test: from /.jsx$/ to /.jsx?$/
what is this part doing? thanks
It's telling webpack which files to run through your loaders.
Hey Tyler :)
I'm going through this now as I want to build something in React.js this weekend. I found that you didn't say npm install with the --save command (so these modules go into the package.json). When I did npm install --save-dev babel-core I see my package.json as { "name": "notetaker-react", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.4.5" }, "dependencies": { "react": "^0.14.6", "react-dom": "^0.14.6" } }
which is different to the package.json on github. Should I manually alter the package.json? Note I also installed the latest versions of react, react-dom and babel, not versioned. Finally, I ran webpack -w and at the end of my terminal output I get Output filename not configured... what should webpack be doing anyways? Generating a bundle.js file into the public folder so I can view the HTML of index.html?
Is that correct that bundle.js file was crazy generated "19654" lines when I key in "webpack -w"? (just for one div !!?)
Yo. The --save-dev and --save only matter if someone else is going to clone your code from somewhere like Github. Basically your package.json is a list of dependencies that your project needs. So it allows you to, instead of pushing up all of those dependencies (in node_modules) to github, you just declare what your project needs (in package.json) then when someone goes to use your project they simply npm install and it will download all of those packages. But, since you're most likely not sharing this project with anyone, not using --save-dev or --save will still download the dependencies it just won't save them to package.json. As far as webpack -w not working, check to make sure your code is the same as the one in the repo (located here and on the other branches)
Thank you for the great video, I just start to learn React and this lessons really amazing!
I watched all videos and did all the same, but I realized, when I try to find a new user, the part with bio just refresh (repos and notes the same, just after reloading the whole page these parts also refresh. Did I miss something?
Hi! Thanks for the kind words. As far as you're error, make sure you're calling e.preventDefault() in any function where you're routing. For example,
handleSubmit(e){
e.preventDefault();
const username = this.usernameRef.value;
this.usernameRef.value = '';
this.props.history.pushState(null, "/profile/" + username)
}
I believe I forgot that in the video.
Thanks for this amazing theme Tyler!
Can you provide some clarity around which node modules to install, and how to install the right bable version?
I am getting errors when I run 'webpack -w', and everything I am reading seems to point to the wrong versions of bable being installed.
Many thanks,
Hi Jeremy. Everything you need should be in the package.json file found HERE. Make sure you install a local version of babel or it will default to a globally installed one which might be out of date.
I got
Error: Cannot find module 'npmlog' at Function.Module._resolveFilename (module.js:337:15) at Function.Module._load (module.js:287:25) at Module.require (module.js:366:17) at require (module.js:385:17) at /usr/local/bin/npm:19:11 at Object.<anonymous> (/usr/local/bin/npm:76:3) at Module._compile (module.js:435:26) at Object.Module._extensions..js (module.js:442:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:311:12)
when running npm init. Is this something wrong on my end?
Most likely on your end. Have you taken a look at this issue? https://github.com/nodejs/node/issues/2814
You're right. I upgraded node from 4.2.3 to 5.1.1 and the problem is gone.
Hi Tyler, I passed through your guidelines in this video. But I have a small question. How can you know which is an appropriate version of those dependency packages? I mean babel version... and the other packages are touched upon in your lesson. Why it should go with this babel version but not another version....? Thank u.
Sublime. Brogrammer Theme with Oceanic Next Color Scheme.
Best theme and colours EVER
This post so useful! I was stuck at the component folder and running 'webpack -w' over and over...
Hi Taylor, Which terminal program are you using? It looks nice.
iTerm 2 😃
Thanks! Really enjoy the series, by the way.
post error
Tyler,
Thanks for the tutorial. Were you able to find Rob's error? Webpack -w is throwing the same Output filename not configured error. My code is on github @https://github.com/b-rays/roofersxchange. Cheers, Brian.
Brian,
Not sure if this will fix all issues, but for starters your github repo seems to be missing the app/components/main.js file, and your webpack.config.js file is pointing into a directory different from the one shown in the video (you are using app/app/main,js over app/components/main.js)
Tyler,
Great introduction, but when I open index.html at the end of the exercise I'm not getting any kind of hello world. I've got no errors on webpack or chrome devtools. Any idea what could be wrong? link below https://github.com/sgarcia-dev/react-examples
Hi Sergei, I've been having the same problem as above and it seems like React is not loaded hence not connecting to the React devtools in Chrome. I'll be keen to see if you have found a solution to this problem
sudo xcodebuild -license
fixed my numerous node-gyp errors and permission errors on a mac
ERROR in Loader /Users/jankiewicz/Desktop/FRONTEND/Data Display/marketing display data/node_modules/babel-core/index.js?{"presets":["es2015","react"]} didn't return a function
I am having trouble finding a resolve for this, any recommendations?
I simply can't get anything going here. Cloned your repo, then "npm install webpack -w" in the root, then webpack -w and nothing but errors.. I'm really frustrated here.
-bash: webpack: command not found
Please help.
Trying to install the babel packages to begin this course, and I'm getting some serious errors coming back from trying to install xo with npm. How can you effectively deal with constant dependency issues?
Trying to install the babel packages to begin this course, and I'm getting some serious errors coming back from trying to install xo with npm. How can you effectively deal with constant dependency issues?
ReactDOM.render(<Main />, document.getElementByID('app'))'
should be:
ReactDOM.render(<Main />, document.getElementById('app'))
(lowercase 'd' in ID)
...just thought I would mention it - I kept getting:
bundle.js:64 Uncaught TypeError: document.getElementByID is not a function(…)
Thanks so much - this is great!
Hi Tyler, First off, Great series! incredibly helpful! i built an entire app from scratch from what you put on there and it's great! I'm having some trouble getting it to run on a server though. I'm using the express server with passportjs for authentication, but i don't know how to integrate the router that i wrote based off of your tutorial with the express server... i was wondering if you could provide some insight/direction there. I know it was suggested to use a different server to someone else who posted earlier but i'm kind of stuck with express because i have all of my authentication running off of it.
Thank you
Mines working(see the "Hello World" on chrome) only if I change webpack.config.js
loader: 'babel' to 'babel-loader'
Thanks for the post. I was facing the same issue. finally got this working.
Thanks a lot, I resolved my issue by changing babel to babel-loader.
Hi Tyler,
Is that sublime text you're using? What's the color scheme? It looks nice :)