React Express

It's time to install React!
React comes in two parts, React and ReactDOM. React includes the core component APIs and rendering logic. ReactDOM contains the necessary APIs to render to the browser DOM.
Let's install both
npm install --save react react-dom
Assuming a webpack + babel build setup like in the previous pages, we'll first want to modify our index.html to include a DOM node for us to render our React app into:
<!-- index.html --> <div id="app"></div> <script src="./bundle.js"></script>
Note: order matters! It's often best to load your bundle.js at the end of the html body, so that your DOM content (in this case, the div) has rendered prior to executing the bundle, since we need to access the DOM during rendering.
We can then change our index.js to look like this:
// index.js import React, { Component } from 'react' import ReactDOM from 'react-dom' const styles = { app: { paddingTop: 40, textAlign: 'center', }, } class App extends Component { render() { return ( <div style={}> Welcome to React! </div> ) } } const root = document.querySelector('#app') ReactDOM.render(<App />, root)
Running the development server
Now we can run npm run dev to run the script we set up in the package.json. This will start the development server. If we navigate to localhost:8080 in a browser, we should see our index.html file, which will run our index.js bundled into bundle.js, displaying Welcome to React! on the screen.
Hello World
For reference, our directory should look like this:
Hello World
The finished tutorial is available at dabbott/react-webpack-babel-tutorial.
That's it!
You now know how to set up a React app from scratch using Webpack and Babel. This should be a good enough starting point to build any kind of app in React. You can add more webpack and babel plugins incrementally as you start working with React.