Creating a container React component
Let's start by editing our application's main JavaScript file. Replace the contents of the ~/snapterest/source/app.js
file with the following code snippet:
var React = require('react'); var ReactDOM = require('react-dom'); var Application = require('./components/Application.react'); ReactDOM.render(<Application />, document.getElementById('react-application'));
There are only four lines of code in this file, and as you can guess, they provide document.getElementById('react-application')
as a deployment target for the <Application />
component and render <Application />
to the DOM. The whole user interface for our web application will be encapsulated in one React component, Application
.
Next, navigate to ~/snapterest/source/components/
and create the Application.react.js
file inside this directory. All of our React components will have their filenames ending with react.js
. This...