To start using the React library, we need to first install it. I am going to show you two ways of doing this: the simplest one and the one using the npm install command.
The simplest way is to add the <script> tag to our ~/snapterest/build/index.html file:
- For the development version of React, add the following command:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-beta3/react.js"></script>
- For the production version version of React, add the following command:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-beta3/react.min.js"></script>
There is a difference between the two that we'll learn about in the later chapters of this book. For our project, we'll be using the development version of React.
At the time of writing, the latest version of React library is 0.14.0-beta3. Over time, React gets updated, so make sure you use the latest version that is available to you, unless it introduces breaking changes that are incompatible with the code samples provided in this book. Visit https://github.com/fedosejev/react-essentials to learn about any compatibility issues between the code samples and the latest version of React.
In Chapter 1, Installing Powerful Tools for Your Project, I introduced you to Browserify that allows us to import all the dependency modules for our application using the require() function. We'll be using require() to import the React library as well, which means that, instead of adding a <script> tag to our index.html, we'll be using the npm install command to install React:
- Navigate to the
~/snapterest/directory and run this command:npm install --save [email protected] [email protected] - Then, open the
~/snapterest/source/app.jsfile in your text editor and import the React and ReactDOM libraries to theReactandReactDOMvariables, respectively:var React = require('react'), var ReactDOM = require('react-dom'),
The react package contains methods that are concerned with the key idea behind React, that is, describing what you want to render in a declarative way. On the other hand, the react-dom package offers methods that are responsible for rendering to the DOM. You can read more about why developers at Facebook think it's a good idea to separate the React library into two packages at https://facebook.github.io/react/blog/2015/07/03/react-v0.14-beta-1.html#two-packages.
Now we're ready to start using the React library in our project. Next, let's create our first React Element!