You can now run npm start (or yarn start) to start your app locally and open it in a browser. Here you'll see a React default page, this is all created from a React component called "App".

If you take a look at the file src/App.js you will see the component and how the render() method returns the page HTML as JSX. We need to replace to the code returned here to show some Drupal nodes, so how about replacing it with (or just adding) <NodeContainer />. This will call a new component, so at the top of app.js we will also need to import that, so with the other import code add import NodeContainer from './NodeContainer';.

Now to create the NodeContainer component. First we need to add the Axios library which we'll use to query the Drupal REST API, run npm install axios --save. Then create the file src/NodeContainer.js, and in there add the following code:

At the top of the file React and Axios are both imported, the class for NodeContainer is then created. The constructor method is where we add the state node, componentDidMount() is called to get the nodes from the View /api/nodes, which then gets rendered as an unordered list.

To create the /api/nodes view install the core Rest module. This will allow you to create a "REST Export" view. Here the path can be set to /api/nodes, and you can select nid, and title.

As long as you left npm start running, you should be able to go back to your browser, and view a nice list of Drupal nodes being rendered in React.

Based out of the Wales office, Tim joined Appnovation in late 2014 after nearly 4 years working with our Drupal partner, Acquia. He has been living in Wales for over 10 years with his wife and two sons. Tim's experience with Drupal comes from over 8 years of working with the platform developing and consulting on some of the biggest Drupal sites in the world.
Tweet timmillwood

1. Applied Innovation
2. The act of applying innovation; introduction of new things or methods.

Related Words
Confident, Agile, Innovative, Professional, Passionate

Appnovation is a global Digital Solutions and Managed Services provider delivering superior strategy, application development and enterprise integration on leading open technologies. Appnovation’s in-house experts build high-performing, secure digital experiences, while providing a full range of creative capabilities, coupled with 24/7 support and maintenance.