Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 960 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

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

7:57 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

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
Avatar
Hong Chuan

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 | Hello World
| ^
7 | );
8 | }
9 | });

Avatar
Jordan

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?

Avatar
Tyler

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.

In reply to Jordan
Avatar
Tyler

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

In reply to Hong Chuan
Avatar
Pyong-Hwa

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 | Hello World
| ^
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"
}
}

Avatar
Pyong-Hwa

Oh, I fixed by downgrading the version of babel-loader from 6 to 5.

Avatar
Sergii

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

Avatar
Tyler

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

In reply to Sergii
Avatar
Preethi

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 |
| ^
7 | Hello World
8 |
9 | )

Here's my github repo:
https://github.com/iam-peekay/react-notetaker

Avatar
Preethi

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

In reply to Preethi
Avatar
Tyler

Thanks for posting the solution! The JS world moves so quick.

In reply to Preethi
Avatar
egghead.io

The lesson video has been updated!

Avatar
Preethi

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 :)

Avatar
Tyler

I should have mentioned that. Sorry!

In reply to Preethi
Avatar
Pavel Topinka

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

Avatar
Pavel Topinka

Fixed,

I have to add into index.html this line with charset specified.

In reply to Pavel Topinka
Avatar
Anson

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!

Avatar
Tyler

Have you compared your code to that in the Repo? Also, make sure you npm installed everything correctly, including babel.

In reply to Anson
Avatar
Anson

Turns out it was an npm issue. I didn't have one of the babel presets installed properly. It's all fixed now. Thanks!

In reply to Tyler
Avatar
Luis

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/

In reply to Paul
Avatar
Tyler

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.

In reply to Luis
Avatar
scott

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?

Avatar
Tyler

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

In reply to scott
Avatar
Ashwin

Great video! Could you share your editor settings with us?

Avatar
Ashwin

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

Avatar
jon madison

where's the mythical "open in browser" selection on Sublime Text?

Avatar
jon madison

Found out from a friend. SideBarEnhancements package.

In reply to jon madison
Avatar
Tyler

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.

Avatar
Dane

I had to change test: from /.jsx$/ to /.jsx?$/

what is this part doing? thanks

Avatar
Tyler

It's telling webpack which files to run through your loaders.

In reply to Dane
Avatar
dhruvghulati

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?

Avatar
Jennie

Is that correct that bundle.js file was crazy generated "19654" lines when I key in "webpack -w"?
(just for one div !!?)

Avatar
Tyler

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)

In reply to dhruvghulati
Avatar
Iuliia Kotlenko

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?

Avatar
Tyler

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.

In reply to Iuliia Kotlenko
Avatar
Joshua

Thanks for this amazing theme Tyler!

In reply to Tyler
Avatar
Jeremy Zilar

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,

Avatar
Tyler

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.

In reply to Jeremy Zilar
Avatar
justin

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. (/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?

Avatar
Tyler

Most likely on your end. Have you taken a look at this issue? https://github.com/nodejs/node/issues/2814

In reply to justin
Avatar
justin

You're right. I upgraded node from 4.2.3 to 5.1.1 and the problem is gone.

In reply to Tyler
Avatar
Amidamaru

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.

Avatar
Danny

Sublime. Brogrammer Theme with Oceanic Next Color Scheme.

Best theme and colours EVER

In reply to Tyler
Avatar
Jun

This post so useful! I was stuck at the component folder and running 'webpack -w' over and over...

In reply to Preethi
Avatar
Itai

Hi Taylor,
Which terminal program are you using? It looks nice.

Avatar
Itai

Thanks!
Really enjoy the series, by the way.

In reply to Tyler
Avatar
Brian Ray

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.

In reply to Tyler
Avatar
Sergei

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)

In reply to Brian Ray
Avatar
Sergei

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

Avatar
daphsta

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

In reply to Sergei
Avatar
Philip John Basile

sudo xcodebuild -license

fixed my numerous node-gyp errors and permission errors on a mac

In reply to Yariv
Avatar
Jonathan Ankiewicz
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?

Avatar
Arvin

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.

Avatar
Arvin

-bash: webpack: command not found

Please help.

Avatar
Scozzi

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?

Avatar
Scozzi

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?

Avatar
Jen

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!

Avatar
Taher

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

Avatar
Metal

Mines working(see the "Hello World" on chrome) only if I change webpack.config.js

loader: 'babel' to 'babel-loader'

Avatar
Siva

Thanks for the post. I was facing the same issue. finally got this working.

In reply to Jen
Avatar
BHARATHPABBA

Thanks a lot, I resolved my issue by changing babel to babel-loader.

In reply to Metal

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.

Terminal

$ 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.

Terminal

$ npm install --save react

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.

[node_modules terminal](../images/react-building-a-react-js-app-up-and-running-with-react-and-webpack-node-modules.png)

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.

Terminal

$ npm install --save react-dom

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.

Terminal

$ npm install --save babel-core babel-loader babel-preset-es2015 babel-preset-react

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.

facebook.github.io/react

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(<HelloMessage name="John" />, mountNode);

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.

[node_modules terminal](../images/react-building-a-react-js-app-up-and-running-with-react-and-webpack-node-modules-2.png)

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.

Terminal

$ mkdir public
$ cd public/
$ ls
$ touch index.html

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.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React Github Notetaker</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

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.

Terminal

$ touch webpack.config.js
$ npm install webpack -g

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.

webpack.config.js

module.exports = {

};

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.

webpack.config.js

module.exports = {
  entry: "./app/components/Main.js",

};

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.

webpack.config.js

module.exports = {
  entry: "./app/components/Main.js",
  output: {
    filename: "public/bundle.js"
  },
  module: {
    loaders: [

    ]
  }
};

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 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.

webpack.config.js

module.exports = {
  entry: "./app/components/Main.js",
  output: {
    filename: "public/bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  }
}

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.

Terminal

$ mkdir app
$ cd app/
$ mkdir components
$ cd components/
$ touch 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.

webpack.config.js

module.exports = {
  entry: "./app/components/Main.js",
  output: {
    filename: "public/bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  }
}

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.

components/Main.js

var React = require('react');

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.

Main.js

var React = require('react');

  var Main = React.createClass({
    render: function(){
      return(
        <div>
          Hello World
        </div>
      )
    }
  });

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 ReactDOM. What's cool about React is you're able to do things like server-side rendering. So what ReactDOM does, it says, "Hey React, we are going to render this component on the client with React DOM and not on the server."

Main.js

var React = require('react');
  var ReactDOM = require('react-dom');

  var Main = React.createClass({
    render: function(){
      return(
        <div>
          Hello World
        </div>
      )
    }
  });

Now what we need to do is we're going to say ReactDOM.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 app, so all we're going to do is say document.getElementByID and then select app, and then what that will do is it will go ahead and grab this element and render the main component to it.

Main.js

var React = require('react');
  var ReactDOM = require('react-dom');

  var Main = React.createClass({
    render: function(){
      return(
        <div>
          Hello World
        </div>
      )
    }
  });

  ReactDOM.render(<Main />, document.getElementByID('app'))

Now head over to your terminal and go ahead and run webpack, webpack -w, so it looks like everything's good.

Terminal

$ webpack -w

Now let's go ahead and open up this index.html file on the browser and what we should see is Hello World.



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