ReactJS Hello World
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
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.
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="//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="//fb.me/react-0.14.6.js"></script> <script src="//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>
<link rel="stylesheet" href="//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="//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="//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.
You will get the following results.
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.
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.