Web Development

ReactJS is taking the web development world by storm. Users have been growing ever since it was released. There is even a framework for building native apps using React. Take note that we will be using JSX.

Here’s a simple Hello World tutorial using React.

Create your Markup

You have to render on something other that the body or you’ll get this nasty console message.

Warning: render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app.

<div id="hello"></div>

Create your Component

The component would have a name of HelloWorld assigned from React.CreateClass. Inside, will be an object which has a render method.

<script type='text/babel'>
  var HelloWorld = React.createClass({
    render: function() {
      return <h1>Hello World</h1>;
    }
  });
</script>

Render

We will then pass the component, HelloWorld to React.Render. It will be rendered inside our element that we created above.

 <script type='text/babel'>
  var HelloWorld = React.createClass({
    render: function() {
      return <h1>Hello World</h1>;
    }
  });
  ReactDOM.render(<HelloWorld />, document.getElementById('hello'));
</script>

Here is the full script

The Hello World code in action can be viewed here.

 <script type='text/babel'>
  var HelloWorld = React.createClass({
    render: function() {
      return <h1>Hello World</h1>;
    }
  });
  ReactDOM.render(<HelloWorld />, document.getElementById('hello'));
</script>