How to Get Started

Setting Up an App in React

It’s that time again to decide which framework you want to build your application in. You’ve done you’re research. Read all of the blogs about Angular, Backbone, Ember, along with many others. You’ve come to the decision to use React. Maybe its because it’s one of the most popular frameworks out right now or maybe you just wanted to verge into component based interfaces. Whatever the rational, hopefully it coincides with how React will be the best tool for the job. This should always be your number one concern when making decisions about your project.

React uses it’s render method to directly create elements on the DOM. This frees up the ability to create isolated components. Components can be arranged rather freely as well as reused which gives React the added benefit of simplified design. Although, the free form design still requires a basic skeleton to make sure all of the components can be view on the DOM.

The first step in setting up your React application is to require React in you package.json. You can also go the route of a CDN and include it as a script tag in your html page. Once you have react installed, this is done by adding an ID tag to a div in your HTML. Most commonly this tag is named “app” and it would look like this:

<div id='app'></div>

This is establishing a point of contact for your react components, and at this point you can move over to separate JS files to do the majority of your coding. React is best used with lots of modularity and separation of concerns, as you can see at the onset.

Now that we have moved over to our JS files will want to make sure you do one of two options, depending on which edition of Javascript you are writing in. If you are using ES5 you will require React at the top of the page. This will look like this:

var React = require('react')

or for ES6:

import React from 'react'

its important to note that if you choose to write your components in ES6 you’ll need to include a compiler, most commonly Babel.

Once you’ve imported React into you application you can use all of the React functions. But you will be left with a missing link. You have a point of contact on your html and you have access to the React methods and interface but how do you connect the two? More recent versions of React have separated out the React DOM functionality so that you can simply require that aspect of the framework and not have it integrated into all your code. In order to connect the two you will import ‘react-dom’ and place it at the bottom of your page. This only need to occur once and should be placed on your index.js (main file) or your app.js if you are building on a single JS file. So far your file should look like this:

import React from 'react'
import ReactDOM from 'react-dom'

You are getting really close to having a functioning React application. Its important to remember that this is simply a basic overview so that you can have an understanding of how each step in the process leads to how an application will interact with the DOM. Once you have the basis for how this works you’ll be able to expand your application’s Components from a stronger point of reference. Speaking of Components we are missing the key part of React which allows us to modularize our code.

Each Component can take on a life of its own. One rule of thumb to keep in mind is if a single component is doing two key operations then you most likely should separate that component into two. Separation of concerns is at the crux of React and helps engineers easily navigate and make adjustments to code bases. Each component has one requirement. It must have a render method. There are two main types of Components, stateful and stateless components. For more information on the difference between stateful and stateless components please see my blog post here. For now we will move forward with a stateless component to show how our render method works. To gain access to the Component’s you must also import it from React. The below example shows a fully functional stateless component.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class MyFirstComponent extends Component {

render () {
<div>Hello People</div>
ReactDOM.render(<MyFirstComponent />, document.getElementId('app'));

In the above code snippet there might be a few unfamiliar points. One is the apparent html in the render method. This is called JSX and is how each component can render their own section of the DOM. I have more information about JSX and react here(link to come). The other might be the passage of our newly created component directly in the ReactDOM render statement. What is virtually happening here (no pun intended) is we are identifying where in our HTML file we want to render MyFirstComponent. Its also import to mention that all components must be capitalized. This is because at a basic level they represent classes, and like all class in Javascript they are capitalized.

From here we can go on to add many layers to our React application. As many of you may have guessed the I have a blog post that covers the intermediate level of file structure and and component design of larger applications. I hope this post helps you get started on your way building a full and responsive application in React.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.