KodeBLOG

Kode Blog - Inspiring And Empowering Developers.

Home About Us Courses Categories Blog Contact Us

ReactJS Hello World

Introduction

This tutorial is the second part of a series to get up and running with ReactJS, here we will learn how to render some content to a browser, 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
  • ReactJS Example
  • Basic ReactJS Syntax
  • Hello World Application

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 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.

ReactJS Example

In this section, we will create a new web project that will serve our React powered application. Assuming you are using XAMPP, create a directory reactjs-example in htdocs directory.

Create a new file index.html in the web project directory reactjs-example

Open up your favorite editor

Create a new file index.html

Add 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>
            ReactDOM.render(React.createElement('div', null, 'Hello from Kode'), document.getElementById('react-target'));
        </script>
</body>
</html>

HERE,

  • <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"Ö> adds a link to Bootstrap CSS, just to get some out of the box styling.
  • <script src="https://fb.me/react-0.14.6.js"></script> this is the main React library that contains all the logical magic. The file is loaded from the online server. Alternatively, you can download the file and load it from the local server.
  • <script src="https://fb.me/react-dom-0.14.6.js"></script> this is the part of React that deals with the DOM as an interface, especially for rendering. In other words we need this to use React with the browser, as React can run on other platforms where you don't deal with the DOM, like embedded applications on smart TVs or on phones.
  • <script>ReactDOM.render(React.createElement('div', null, 'Hello from Kode'), document.getElementById('react-target'));</script> this is a React application in the most simplest form. We call the ReactDOM.render function, we tell it to create an element of type 'div', we pass it no properties. We then pass children 'Hello from Kode' to the div. After that we tell the function where to put this newly created element. We called an element by its id react-target from our document and react will replace its contents with our app, which is the div tag.

If you need more clarifications regarding the above code, use the comments section below to ask.

Load the URL to the project i.e. http://192.168.1.12:8080

You will get the following results.

ReactJS Example

Note: the output from ReactJS was created using pure JavaScript code and not HTML.

Summary

As you can see from the above React JS example, you donít have to be a JavaScript ninja to get started with React. It greatly simplifies the process. At a minimum, you will need to include the main library file, DOM file and some custom code for the interface.

Whatís next?

In this tutorial example, we created only one element. However, imagine if we wanted to create more elements, we would have to use createElement every time and pass it the tag name, properties and children. That is a very tedious task and very time consuming for development, the guys at Facebook came up with a great solution, it's called JSX.

In the next tutorial, we will introduce to JSX syntax. JSX is a JavaScript syntax extension that looks similar to XML.

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.