Getting started with React

2015-10-18 19:27

For a while now I’ve had my eyes on Facebooks own javascript library React and thought that I should share with you how to get started with a simple application.

What is React?

React is a javascript library developed and used by Facebook. If you visit the React website you will see that there is a lot of talk a lot about “Just the UI”. React is the V i MVC, so how you go about and develop the rest of your application is up to you. React is just the UI.

So let’s get started with our simple project.

React is well known for using a technique called JSX to simplify the rendering of components within javascript. The code looks a lot like XLM and can’t be run directly in the browser without compilation. So to handle the compilation from JSX to pure javascript I use gulp and a library called babel. If you don’t have any experience with gulp or similar build configurations i recommend you to read up on some of the topics at gulpjs.com

So this is my gulpfile.js setup


var gulp = require('gulp');
var babel = require('gulp-babel');

gulp.task('default', function () {
    return gulp.src('source/**/*.js')
        .pipe(babel())
        .pipe(gulp.dest('dist'));
});


As you can see this is a really simple setup and I only choose to use gulp and gulp-babel, feel free to add on to this code, for example a watcher would be nice. But for this small project this will work just fine.

The code

But enought about that, let’s get to it. First of, let’s add the React library, put the following lines in the head of your html file:

<script src="https://fb.me/react-0.14.0.min.js"></script>
<script src="https://fb.me/react-dom-0.14.0.min.js"></script>

Now we have loaded both React and ReactDOM and you should be able to access both via the console in your browser if you refresh your webpage.

Let’s Render some content

To quickly get something rendered on the screen we can add this little piece of code

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

As you probably can read from the code above, we simply render a h1 element with the text “Hello, world!” within the element example.

So now that we have the React engine running, let do something a little bit more advanced.

var Application = React.createClass({
    render: function() {
        return (
            <div className="application-box">
                Hello, world! I am a Application.
            </div>
        );
    }
});

This will create our first React class, by using React.createClass method. Now we can add the application class to the stage by running

ReactDOM.render(
    <Application />,
    document.getElementById('content')
);

So this is the basics to get going with React, we have created a React class with a render method that we added to the html dom. But let’s see if we can do something a little bit more advanced by adding a click action and increment a number in our view.

var Application = React.createClass({
    clicks: 0,
    clickHandle : function(){
        clicks++;
        this.forceUpdate();
    },
    render: function() {
        return (
            <div className="application-box" onClick={this.handleClick}>
                Hello, world! I am a Application and have {this.clicks} clicks
            </div>
        );
    }
});

Now let check what we have done, first of all we added a new variable to out class called, clicks. This variable is then used within our text by wrapping it within curly bracket {this.clicks}.
And then we also added a new method to out class called clickHandle, and it does just that, handle out click event by binding onClick on our application-box div to the method this.handleClick. Within the method it pretty straight forward, increment the click variable and call the forceUpdate method which is a method from the React class.

Now it’s up to you to explore the many possibilities in React. If you need more guidance please have a look at the official tutorials and please leave a comment and maybe a link to your own React project/lab.


Recent blog posts


The Travel (Working title)

So as I wrote in the previous blog post, I’m working on a game. The working title for the game is now set to “The Travel” and why that is I’ll keep as a secret for now....

Read more


Defold - A game engine

Most of you probably never heard of a game engine called Defold. It’s a 2d game engine developed by King, which is made so that you...

Read more