In this guide I will walk through setting up a project on OS X. After it is set up, we will create a Hello World in React. From there I’ll talk about next steps for learning more.
What is React?
It achieves high performance by managing the page with a virtual DOM. What you write describes the structure of the page. When the state changes, React diffs the old with the new and makes the smallest changes needed to get to the new page. Avoiding unnecessary DOM updates is one of the keys to high performing applications.
Another benefit of React is that it is much simpler than other popular libraries. This is because React is only the view layer. You can use it without bringing in an entire framework. In fact, many pair React with full-fledged frameworks like Angular, Ember, and Backbone.
Getting Everything Installed
If you are developing on a Mac, using Homebrew makes installing and managing your tools easy. I am going to assume you have it installed, but if you don’t, consider following the instructions in the link above. To get started, I suggest getting Node Version Manager.
$ brew install nvm
With that installed, go ahead and install the current stable version of Node.js.
$ nvm install stable
We will be using Webpack, a popular choice for React projects. Below I’ll detail why we use it. For the moment, let’s install it and its dev server with the following command.
$ npm install -g webpack webpack-dev-server
Now let’s create our project!
$ mkdir hello-world
$ cd hello-world
And initialize a new project here:
$ npm init
Enter the data needed to start the project, and then add the React dependency with this:
$ npm install react --save
We now need to configure Webpack. In the project’s root folder, create a file named webpack.config.js and set it to the following:
This will configure Webpack to build our client files starting with app/main.js. Webpack will crawl all dependencies we require and compile it into one file. This file is app/bundle.js, which we will include in our HTML.
There! That is all we need to get the project set up, and we are ready to begin writing some code for it. Not as easy to set up as say a Rails project, but not too bad either.
Why We Use Webpack
In our code we are using the CommonJS style, originally popularized by Node.js.
Implementing Hello World
Within our project, let’s create the app/ folder. It will be where we write our code.
$ mkdir app
Now add a file at app/index.html. Let’s put the following code in it:
Here you see the bundle.js file mentioned above. We also have an element with an id of react-mount which we will use as the root of the app. Anything within this div is managed by React. Because of that, do not modify any of the descendant elements outside of your components!
The final file we will add is app/main.js which will have our HelloWorld React component.
Here we are using the CommonJS module loading style provided by Webpack to pull in React. We define a new component with React.createClass named HelloWorld. It has a render function and in it we create a new div with no attributes and with the text “Hello World” within it. It will look like this (React adds an attribute to help maintain references to nodes, but it is safe for our purpose to ignore it):
The first argument to React.createElement can be a string for any HTML element (div, span, header, footer, etc.). The second argument is an object of attributes for this element. For example, we would do the following if we wanted to create a link to where I work, Smashing Boxes.
The third argument and all arguments after it are children of the element we are creating. These can be other elements made with React.createElement or strings. Check out what it might look like if we converted some markup from a Bootstrap example to using React elements.
render is the first component lifecycle method we’ve come across. Every component must have one, and it’s fairly common for that to be the only lifecycle method a component needs. React calls it to create the virtual DOM element, and later adds the result to the page.
On the last line of the file is where we render this component to the element with id react-mount. Notice we use React.createElement again. This time instead of using a string, we use the class we defined above.
We’ve completed Hello World in React! Very simple, and nothing else is required. Just start up the server using
$ webpack-dev-server --content-base app/
and open http://localhost:8080/ in your favorite browser.
After doing this, you now know how to bootstrap a React project and create simple components. You can find the full code here: https://github.com/zachary-kuhn/hello-world.
Up next in this series we will talk about more parts of the component lifecycle and how to create more complex components as we build out a small app. These advanced components will take user input and maintain state.
We will also upgrade the project to using ES2015. Many people start new projects using it, so we will adopt it as well. There will be other upgrades we make to the build system that help keep our workflow nice and smooth, too.
Thank you for reading, hope you’ve benefited from this and I look forward to delivering these next parts soon.