There are several ways of getting set up with React. As the React team maintains an NPM package, we will use NPM as we have done throughout this book. From the terminal, let's pull down React through NPM. We will use 0.14.6 version of React:

    npm install [email protected]

With that, we have downloaded React to src/node_modules/react. Here, you will see react.js, react-dom.js, and react-dom-server.js, along with their minified versions. Here, react.js is the core React library, react-dom.js takes responsibility for the actual rendering of the React components in the DOM, and react-dom-server.js allows for server-side rendering of React components.

Create a copy of src/index.html to src/index-react.html, and add the minified versions of React and ReactDOM to the footer of the page:

    <script src="node_modules/react/react.min.js"></script>
    <script src="node_modules/react/react-dom.min.js"></script>

We also need to include Babel, a JavaScript compiler that caters to JSX. Babel is available on NPM. However, Babel maintains a version of its library for browsers on a CDN. Include the following in the footer of our page:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/
    5.8.23/browser.min.js"></script>

The browser.min.js file will transform any JSX code in HTML, within script tags with a type attribute with the text/babel value. Let's test it out to ensure that we have everything set up correctly. Above our footer, add a div with an id of test:

    <div id="test"></div>

Next, let's write the simplest of React components. At the bottom of index-react.html, after the footer element, include the following:

    <script type="text/babel">
        ReactDOM.render(
            <div className='container-fluid myphoto-section bg-myphoto-
            dark'>Test</div>,
            document.getElementById('test')
        );
    </script>

Let's walk through what is happening here. First, as we said earlier, our script tag needs a type attribute with the text/babel value so that Babel knows to compile it into JavaScript before execution. Within the script tags, we have our first real interaction with React: ReactDOM and its render function. The render function takes two arguments here: the first is raw HTML, and the second is an element selector. What is happening here is pretty self-explanatory; we want React to find the test element and replace it with the HTML we passed as the first parameter. You may note that in our HTML, we have a className attribute. We use className instead of class, as class is a reserved word in JavaScript.

The className attribute is converted to class when the component is rendered in the DOM. Open index-react.html and check whether we now have a Test section in our page:

We are now all set up to integrate React into MyPhoto. Let's do something more substantial. We will convert the carousel in the Gallery component into a React component. Before we get to that, remove the test component, both the div and the JSX we added.