Lets Get Started
Social
KIJO - Twitter KIJO - Facebook KIJO - Instagram

Getting Started with React JavaScript Library

Connor Moore

Developer

Author Image: Connor Moore
Crono - App Development
Share This:
Share on Facebook Share on Google Share on Linkedin

If you’re a follower of the web development community, you’ve probably heard people talking about React. React is not a full framework, instead it is just a library for rendering views – think of it as the V in MVC.

One of the features of React is that it encourages the compartmentalisation of your code – breaking it down into smaller, reusable pieces called components. In this tutorial we are going to get into writing some React code, but first there are a few setup processes that need to be covered.

Setup

First, before using React, we must include the React and React DOM scripts in our code. These are available to download on the React website, as well as on cdnjs.

In addition to this for this tutorial we are going to need to include something called the JSX Transformer. The JSX Transformer transforms JSX code in JavaScript. So, what is JSX? JSX is a “JavaScript syntax extension that looks similar to XML.” It essentially allows you to write HTML in your JavaScript, and whilst this may sound odd, when you see it in action, you will understand why its good to use it. Also please note that the JSX Transformer is very big, and if you are using React in an actual production site, you should transform your JSX server side using something like Babel or Webpack.

Finally, the last thing we want to do is create our JavaScript file where we will write our React code. However, since this file is going to include JSX, we need to give it the text/jsx type . You should now have four script tags in your code, and that is all we need to setup React. Now its setup, lets write some React code.

<script src='https://fb.me/react-0.14.2.js'></script>
<script src='https://fb.me/react-dom-0.14.2.js'></script>
<script src='https://fb.me/JSXTransformer-0.13.3.js'></script>
<script type='text/jsx' src='script.js'></script>

Writing Our First Components

In this post we are going to cover three basic React concepts – creating classes, creating elements, and rendering our elements. In this example we are going to use React to create a list for a navigation menu. In our index.html file, we will setup our header as follows

<header>
<nav class='nav'>
</nav>
</header>

Now, as a navigation menu this is pretty useless – it won’t actually show anything. This is where React comes in. Lets create our menu in our script.js file.

var Menu = React.createClass({
render: function() {
return (
<ul className='nav__menu'>
<li className='nav__link'>
<a href='/' className='nav__link__text'>Home</a>
</li>
<li className='nav__link'>
<a href='/about' className='nav__link__text'>About</a>
</li>
<li className='nav__link'>
<a href='/contact' className='nav__link__text'>Contact</a>
</li>
</ul>
);
}
});

There are several things to cover here. First lets look at the process of creating a React class. We use React.createClass to create a class – simple enough! Then, within createClass we have a render function – in here we return the code we want React to render. Now this where it gets weird, as inside this render function we have HTML! This is JSX, and whilst it may seem weird at first, it is much easier and intuitive than writing out the equivalent code in pure JavaScript. Also, notice that the JSX elements use className to give the elements classes, just using class like you would in HTML will throw an error.

Now, this menu is all very well and good, but it doesn’t really take advantage of the features of React, so what we are going to do is break it down into to separate components – the ul itself, and each individual li.

Breaking Components Down

We are now going to create a new React Class – MenuItem, which will contain the code for the list items. Another feature of React is the ability to pass information into Classes – known as props, which means we don’t have to repeat ourself in our render functions.

var MenuItem = React.createClass({
render: function() {
return (
<li className='nav__link'>
<a href={this.props.link} className='nav__link__text'>{this.props.title}</a>
</li>
);
}
});

Notice the curly brackets which are used to access the information from props. So, where does this props come from. Props are passed in when we use a React Class to create a React Element. For example, if we wanted to create our home link, we would do as follows.

var options = {
title: 'Home',
link: '/'
}

var element = React.createElement(MenuItem, options);

Here we create an object called options, with the information for our React Class, and then pass it in using React.createElemennt. In React.createElement, we first say which React Class we want to use to create our element – in this case MenuItem, and then pass in the options. Now, when our MenuItem Class is created it will replace {this.props.title} with ‘Home’, and {this.props.link} with ‘/’. But now our problem is how do we create multiple instances of the MenuItem Class – after all our original menu had three links. First, lets update our options object to contain all the information we need.

var options = {
listItems: [
{
title: 'Home',
link: '/'
},
{
title: 'About',
link: '/about'
},
{
title: 'Contact',
link: '/contact'
}
]
}

Here, we just create an array called listItems inside our options object, which in turn contains the objects with our link information. Now, we need to somehow get this to our MenuItems. We will do this by creating a Menu Class, and by using JavaScript’s array.map function.

var Menu = React.createClass({
render: function() {
var list = this.props.listItems.map(function(listItemProps) {
return <MenuItem {...listItemProps} />
});

return <ul className="header__nav">
{list}
</ul>
}
});

Here, we create a Menu Class, and in our render function first create a variable list, for which we return an instance of the MenuItem Class for each object in the listItems array inside our options. The {…listItemProps} is where we actually pass each object into our MenuItem. But how does our Menu Class access this? We need to update our Element.

var element = React.createElement(Menu, options);

Now, instead of creating an individual MenuItem with one options object passed in, we are creating the Menu Class with the new array filled options passed in. When the Menu Class is created, it creates an instance of the MenuItem class for each object in the options.listItems array. These instances are inside the variable list, which is then put inside our ul.

The final step is to render our Menu Class into the page – this is where React DOM comes in.

ReactDOM.render(element, document.querySelector('.nav'));

The render function takes two arguments – the thing to render and where to render it. Our full code should now look like this (with a couple of comments):

/* MenuItem Class - each instance of a menu item */
var MenuItem = React.createClass({
render: function() {
return (
<li className='nav__link'>
<a href={this.props.link} className='nav__link__text'>{this.props.title}</a>
</li>
);
}
});

/* Menu Class - the entire menu ul */
var Menu = React.createClass({
render: function() {
var list = this.props.listItems.map(function(listItemProps) {
return <MenuItem {...listItemProps} />
});

return <ul className="nav__menu">
{list}
</ul>
}
});

/* Menu Item Options - the data for each menu item */
var options = {
listItems: [
{
title: 'Home',
link: '/'
},
{
title: 'About',
link: '/about'
},
{
title: 'Contact',
link: '/contact'
}
]
}

/* Create an element from our Menu class */
var elem = React.createElement(Menu, menuItemOptions);

/* Render the element into the page */
ReactDOM.render(elem, document.querySelector('.nav'));

Hooray, we now have a working menu prototype! This post has covered the basics of using React, and from here you should be able to go and start using the library in your projects – although there is much more to learn and we will be exploring this in future articles.

Share This:
Share on Facebook Share on Google Share on Linkedin