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

Hi Tyler,

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

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.

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.