Installing ReactJS and Bootstrap

Once we have finished creating the folder structure, we need to install both our frameworks, ReactJS and Bootstrap. It's as simple as including JavaScript and CSS files in your page. We can do this via a Content Delivery Network (CDN), such as Google or Microsoft, but we are going to fetch the files manually in our application so we don't have to be dependent on the Internet and can work offline.

Installing React

First, we have to go to this URL https://facebook.github.io/react/ and hit the Download React v15.1.0 button:

Installing React

This will give you a ZIP file of the latest version of ReactJS that includes ReactJS library files and some sample code for ReactJS.

For now, we will only need two files in our application: react.min.js and react-dom.min.js from the build directory of the extracted folder.

Here are a few steps we need to follow:

  1. Copy react.min.js and react-dom.min.js to your project directory, the chapter1/js folder, and open up your index.html file in your editor.
  2. Now you just need to add the following script in your page's head tag section:
            <script type="text/js" src="js/react.min.js"></script>
        <script type="text/js" src="js/react-dom.min.js"></script>
  3. Now we need to include the compiler in our project to build the code because right now we are using tools such as npm. We will download the file from the following CDN path, https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js, or you can give the CDN path directly.
  4. The head tag section will look like this:

            <script type="text/js" src="js/react.min.js"></script>
        <script type="text/js" src="js/react-dom.min.js"></script> 
        <script type="text/js" src="js/browser.min.js"></script>

Here is what the final structure of your js folder will look like:

Installing React
..................Content has been hidden....................

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