KodeBLOG

Kode Blog - Inspiring And Empowering Developers.

Home About Us Courses Categories Blog Contact Us

ReactJS Debug

Introduction

This tutorial is the fifth part of a series to get up and running with ReactJS, here we will learn how to do some basic React debugging using developer tools, React is a library developed by Facebook to simplify the creation of complex user interfaces.

Topics to be covered

We will cover the following topics in this tutorial

  • Tutorial pre-requisites
  • What is Debugging?
  • React Debugging Tools
  • React Debug Example
  • Adjacent JSX error
  • Update state during transition error

Tutorial pre-requisites

For you to complete this tutorial successfully, you will need to at least know / have the following.

  • Web server Ė you can still run React code without a web server but then you will not be able to use extensions such as react-detector as they require the http protocol.
  • You should be familiar with HTML, CSS and JavaScript basics.
  • You should be familiar with the basics of ReactJS. If you are not familiar with the basics, read the previous tutorials.
  • You should have text editor or Integrated Development (IDE) that supports HTML, CSS and JavaScript
  • An update to date browser that has JavaScript enabled. Google chrome is highly recommended since we will be using Google Chrome extensions to debug the code. You can also use other browsers such as Firefox and download the appropriate React Developer Add-ons.
  • You have a command line tool or terminal and you know the basics

What is debugging?

Itís not always that your code will produce the expected results. Sometime the code doesnít work at all. Debugging is the processing of finding what went wrong and fixing it. ReactJS use JavaScript so some of the tools and knowledge that you use to debug JavaScript can be used too when working with React.

React Debugging Tools

We are using Google Chrome to test our code in these tutorial series and we installed React Developer Tools in the previous tutorial. We will use Google chrome and react developer tools to find and fix bugs in our code.

React Debug Example

We will continue using the web project that we created in the previous tutorial.

Create a new file debug.html in reactjs-example directory

Open debug.html in your favorite editor and paste in the code below

<!DOCTYPE html>
<html>  
<head>
    <meta charset="utf-8">
    <title>React Basic Kode</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h1>React Example Basic Kode Blog</h1>
        <div/>
        <div id="react-target">
            <p>
                React should start working in a few milli seconds
            </p>
            <p>
                If you can see this, React is not working right.
            </p>
        </div>

        <script src="https://fb.me/react-0.14.6.js"></script>
        <script src="https://fb.me/react-dom-0.14.6.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
        <script type="text/babel">
            var GreetBook = React.createClass({ render(){ return(

            <Hello message="Hello from one" />
            <Hello message="Hey from me" />
            <Hello message="Howdy from there" />
            <Hello message="Greetings Human" /> ) } }); var Hello = React.createClass({ getInitialState(){ return {color: 'red'} }, handleClick(){ this.setState({color:'blue'}); }, render() { return (
            <div>
                <h1 style={{color: this.state.color}} onClick={this.handleClick}>{this.props.message}</h1>
            </div>
            ) } }); 

            ReactDOM.render(<GreetBook/>, document.getElementById('react-target'));
        </script>
</body>
</html>

Run it in the browser and you should see a message like this

React Debug

React is not working right!!! You must be wondering why, well the answer isn't very hard to find since React comes with very good descriptive messages. Open the developer tools and check the console.

React Developer Tools Debug

There is a syntax error on line 8,

var GreetBook = React.createClass({
    render(){
        return(
            <Hello message="Hello from one"/>
            <Hello message="Hey from me"/>
            <Hello message="Howdy from there"/>
            <Hello message="Greetings Human"/>

        )
    }
});

we have adjacent JSX element, that means we are trying to render siblings, more than one element in the render function is returned, React's render function can only return one element, this means we need to wrap our Hello components with another element like a div tag

var GreetBook = React.createClass({
    render(){
        return(
            <div>
            <Hello message="Hello from one"/>
            <Hello message="Hey from me"/>
            <Hello message="Howdy from there"/>
            <Hello message="Greetings Human"/>
            </div>
        )
    }
});

Now the problem is fixed as we have one div element wrapping everything else and it should render properly.

Now replace the code in your editor with this:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>React Basic Kode</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h1>React Example Basic Kode Blog</h1>
        <div/>
        <div id="react-target">
            <p>
                React should start working in a few milli seconds
            </p>
            <p>
                If you can see this, React is not working right.
            </p>
        </div>

        <script src="https://fb.me/react-0.14.6.js"></script>
        <script src="https://fb.me/react-dom-0.14.6.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
        <script type="text/babel">

            var GreetBook = React.createClass({ render(){ return(
            <div>
                <Hello message="Hello from one" />
                <Hello message="Hey from me" />
                <Hello message="Howdy from there" />
                <Hello message="Greetings Human" />
            </div>
            ) } }); var Hello = React.createClass({ getInitialState(){ return {color: 'red'} }, handleClick(){ this.setState({color:'blue'}); }, render() { if (this.props.message == "Howdy from there") { this.setState({color: 'green'}); } return (
            <div>
                <h1 style={{color: this.state.color}} onClick={this.handleClick}>{this.props.message}</h1>
            </div>
            ) } }); ReactDOM.render(
            <GreetBook/>, document.getElementById('react-target'));
        </script>
</body>
</html>

Run it in the browser and you should see a message like this

React Developer Tools Debug

Open up the developer tools to check the error message in the console

React Developer Tools Debug

The error message clearly states that we cannot update the state in a state transition such as within render, it means we can't use setState function inside our render function.

if (this.props.message == "Howdy from there") {
    this.setState({color: 'green'});
}

We need to remove the setState function and replace it with a callback like this

if (this.props.message == "Howdy from there") {
    this.handleGreen();
}

Now we need to create this function.

handleGreen(){
    this.setState({color: 'green'});
},

our code will now look like this :

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>React Basic Kode</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h1>React Example Basic Kode Blog</h1>
        <div/>
        <div id="react-target">
            <p>
                React should start working in a few milli seconds
            </p>
            <p>
                If you can see this, React is not working right.
            </p>
        </div>

        <script src="https://fb.me/react-0.14.6.js"></script>
        <script src="https://fb.me/react-dom-0.14.6.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
        <script type="text/babel">

            var GreetBook = React.createClass({ render(){ return(
            <div>
                <Hello message="Hello from one" />
                <Hello message="Hey from me" />
                <Hello message="Howdy from there" />
                <Hello message="Greetings Human" />
            </div>
            ) } }); var Hello = React.createClass({ getInitialState(){ return {color: 'red'} }, handleClick(){ this.setState({color:'blue'}); }, handleGreen(){ this.setState({color: 'green'}); }, render() { if (this.props.message == "Howdy from there") { this.handleGreen(); } return (
            <div>
                <h1 style={{color: this.state.color}} onClick={this.handleClick}>{this.props.message}</h1>
            </div>
            ) } }); ReactDOM.render(
            <GreetBook/>, document.getElementById('react-target'));
        </script>
</body>
</html>

Try and run it in the browser, you should see that the third Hello element will be green as it is the only one that matches our conditional

React Developer Tools Debug

You can check the state in the React tab of the third element, color: "green".

There are other error that you might face while developing with React, However the guys at Facebook have done a great job to keep the messages very descriptive, there should be much confusion if you could check the console and the React tab

Summary

Developer tools that can be added as extensions or add-ons to web browsers come in handy when debugging React applications. The most important thing to do when debugging is paying attention to the descriptive error messages displayed in the console.

Whatís next?

Now that we have covered the basics of ReactJS, the next tutorials will create a real world sample applications. We will create a simple movies app that will have search and create, read, update and delete (CRUD) functionality. We will use Ajax to communicate with the backend.

If you found this tutorial useful, support us by using the social media buttons to like and share the tutorial. If you didnít find it useful, please use the comments section below to let us know how we can do better next time.

Each week, a new ReactJS tutorial is added to our collection. Subscribe to our newsletter, like our Facebook fan page or follow us on Twitter to get free updates when the collection is updated.

Tutorial History

Tutorial version 1: Date Published 2016-02-02