Using React

So now we've got the ReactJS and Bootstrap style sheet from where we've initialized our app. Now let's start to write our first Hello World app using ReactDOM.render().

The first argument of the ReactDOM.render method is the component we want to render and the second is the DOM node to which it should mount (append) to. Observe the following code:

ReactDOM.render( ReactElement element, DOMElement container,
[function callback] )

In order to translate it to vanilla JavaScript, we use wraps in our React code, <script type"text/babel">, tag that actually performs the transformation in the browser.

Let's start out by putting one div tag in our body tag:

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

Now, add the script tag with React code:

<script type="text/babel"> 
    ReactDOM.render( 
        <h1>Hello, world!</h1>, 
        document.getElementById('hello') 
    ); 
</script>

The XML syntax of JavaScript is called JSX. We will explore this in further chapters.

Let's open the HTML page in your browser. If you see Hello, world! in your browser then we are on a good track. Observe the following screenshot:

Using React

In the preceding screenshot, you can see it shows Hello, world! in your browser. That's great. We have successfully completed our setup and built our first Hello World app. Here is the complete code that we have written so far:

<!doctype html> 
<html class="no-js" lang=""> 
    <head> 
        <meta charset="utf-8"> 
    <title>ReactJS Chapter 1</title>           
<link rel="stylesheet" href="css/bootstrap.min.css"> 
        
<script type="text/javascript" src="js/react.min.js"></script> 
<script type="text/javascript" src="js/react-dom.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-
    core/5.8.23/browser.min.js"></script> 
    </head> 
    <body> 
        <!--[if lt IE 8]> 
            <p class="browserupgrade">You are using an
            <strong>outdated</strong> browser.  
            Please <a href="http://browsehappy.com/">upgrade your
            browser</a> to improve your experience.</p> 
    <![endif]--> 
    <!-- Add your site or application content here --> 
    <div id="hello"></div> 
        <script type="text/babel"> 
            ReactDOM.render( 
                <h1>Hello, world!</h1>, 
                document.getElementById('hello') 
            ); 
        </script> 
     
    </body> 
</html>
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset