reactjs https://www.millwoodonline.co.uk/taxonomy/term/27 en Getting started with React and Drupal https://www.millwoodonline.co.uk/blog/getting-started-with-react-and-drupal <span property="schema:name">Getting started with React and Drupal</span> <div property="schema:text" class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><p>Over the weekend I decided it was long overdue that I learnt React, or at least understood what all the fuss was about, so with npm in hand I installed yarn and started my quest.</p> <p>We're going to use <a href="https://github.com/facebook/create-react-app">Create React App</a> to setup our base React install. First install then run the command to create a react app called "drupal-react":<br /><code>npm install -g create-react-app<br /> create-react-app drupal-react<br /> cd drupal-react</code></p> <p>You can now run <code>npm start</code> (or <code>yarn start</code>) 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 <code>render()</code> method returns the page HTML as <a href="https://reactjs.org/docs/introducing-jsx.html">JSX</a>. We need to replace to the code returned here to show some Drupal nodes, so how about replacing it with (or just adding) <code>&lt;NodeContainer /&gt;</code>. 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 <code>import NodeContainer from './NodeContainer';</code>.</p> <p>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 <code>npm install axios --save</code>. Then create the file src/NodeContainer.js, and in there add the following code:<br /><code>import React, { Component } from 'react'<br /> import axios from 'axios'<br /><br /> class NodeContainer extends Component {<br />   constructor(props) {<br />     super(props)<br />     this.state = {<br />       nodes: []<br />     }<br />   }<br /><br />   componentDidMount() {<br />     axios.get('http://example.com/api/nodes')<br />     .then(response =&gt; {<br />       this.setState({nodes: response.data})<br />     })<br />     .catch(error =&gt; console.log(error))<br />   }<br /><br />   render() {<br />     return (<br />       &lt;ul&gt;<br />        {this.state.nodes.map((node) =&gt; {<br />           return(<br />            &lt;li={node.nid}&gt;{node.title}&lt;/li&gt;<br />           )<br />         })}<br />       &lt;/ul&gt;<br />     )<br />   }<br /><br /> }<br /><br /> export default NodeContainer</code></p> <p>At the top of the file React and Axios are both imported, the class for <code>NodeContainer</code> is then created. The constructor method is where we add the state <code>node</code>, <code>componentDidMount()</code> is called to get the nodes from the View /api/nodes, which then gets rendered as an unordered list.</p> <p>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.</p> <p>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.</p> <p>Next, routing, to make these node titles clickable! <span>😱</span></p> </div> <span rel="schema:author"><span lang="" about="/user/1" typeof="schema:Person" property="schema:name" datatype="">timmillwood</span></span> <span property="schema:dateCreated" content="2018-04-23T06:20:09+00:00">Mon, 23/04/2018 - 07:20</span> <div class="field field--name-field-tags field--type-entity-reference field--label-above"> <div class="field--label">Tags</div> <div class="field--items"> <div class="field--item"><a href="/taxonomy/term/1" property="schema:about" hreflang="en">drupal planet</a></div> <div class="field--item"><a href="/taxonomy/term/2" property="schema:about" hreflang="en">drupal-planet</a></div> <div class="field--item"><a href="/taxonomy/term/3" property="schema:about" hreflang="en">drupal</a></div> <div class="field--item"><a href="/taxonomy/term/4" property="schema:about" hreflang="en">drupal8</a></div> <div class="field--item"><a href="/taxonomy/term/5" property="schema:about" hreflang="en">drupal 8</a></div> <div class="field--item"><a href="/taxonomy/term/9" property="schema:about" hreflang="en">drupal development</a></div> <div class="field--item"><a href="/taxonomy/term/26" property="schema:about" hreflang="en">react</a></div> <div class="field--item"><a href="/taxonomy/term/27" property="schema:about" hreflang="en">reactjs</a></div> <div class="field--item"><a href="/taxonomy/term/28" property="schema:about" hreflang="en">javascript</a></div> </div> </div> <ul class="links inline list-inline"><li class="comment-add"><a href="/blog/getting-started-with-react-and-drupal#comment-form" title="Share your thoughts and opinions." hreflang="en">Add new comment</a></li></ul><section> <h2>Comment</h2> <article data-comment-user-id="0" id="comment-1796" class="js-comment"> <mark class="hidden" data-comment-timestamp="1524559875"></mark> <footer> <article typeof="schema:Person" about="/user/0"> </article> <p>Submitted by <span lang="" typeof="schema:Person" property="schema:name" datatype="">ygerasimov (not verified)</span> on Tue, 24/04/2018 - 02:05</p> <a href="/comment/1796#comment-1796" hreflang="en">Permalink</a> </footer> <div> <h3><a href="/comment/1796#comment-1796" class="permalink" rel="bookmark" hreflang="en">Hey Tim, Thank you for…</a></h3> <div class="field field--name-comment-body field--type-text-long field--label-hidden field--item"><p>Hey Tim,</p> <p>Thank you for putting this together.</p> <p>Any recommendations about material to learn plain React? Preferably with PHP as backend. Like laracasts for vuejs.</p> <p>Yuriy</p> </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=1796&amp;1=default&amp;2=en&amp;3=" token="n0eg9BNprgPtH0wNsfaCJI1Ztl6BlVCXD2Y9whi9MNM"></drupal-render-placeholder> </div> </article> <div class="indented"> <article data-comment-user-id="1" id="comment-1797" class="js-comment"> <mark class="hidden" data-comment-timestamp="1524560027"></mark> <footer> <article typeof="schema:Person" about="/user/1"> </article> <p>Submitted by <span lang="" about="/user/1" typeof="schema:Person" property="schema:name" datatype="">timmillwood</span> on Tue, 24/04/2018 - 09:53</p> <p class="visually-hidden">In reply to <a href="/comment/1796#comment-1796" class="permalink" rel="bookmark" hreflang="en">Hey Tim, Thank you for…</a> by <span lang="" typeof="schema:Person" property="schema:name" datatype="">ygerasimov (not verified)</span></p> <a href="/comment/1797#comment-1797" hreflang="en">Permalink</a> </footer> <div> <h3><a href="/comment/1797#comment-1797" class="permalink" rel="bookmark" hreflang="en">I started with React docs …</a></h3> <div class="field field--name-comment-body field--type-text-long field--label-hidden field--item"><p>I started with React docs (<a href="https://reactjs.org/docs/hello-world.html">https://reactjs.org/docs/hello-world.html</a>), also looked Sitepoint (<a href="https://www.sitepoint.com/learn/react/">https://www.sitepoint.com/learn/react/</a>) and Lullabot (<a href="https://www.lullabot.com/articles/how-to-learn-react">https://www.lullabot.com/articles/how-to-learn-react</a>).</p> </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=1797&amp;1=default&amp;2=en&amp;3=" token="MEsgq6RKWiW72wASJ9-iH4dYoxsD5XRJ-5U_re3lfvU"></drupal-render-placeholder> </div> </article> </div> <article data-comment-user-id="0" id="comment-1798" class="js-comment"> <mark class="hidden" data-comment-timestamp="1524755103"></mark> <footer> <article typeof="schema:Person" about="/user/0"> </article> <p>Submitted by <span lang="" typeof="schema:Person" property="schema:name" datatype="">dawehner (not verified)</span> on Tue, 24/04/2018 - 22:30</p> <a href="/comment/1798#comment-1798" hreflang="en">Permalink</a> </footer> <div> <h3><a href="/comment/1798#comment-1798" class="permalink" rel="bookmark" hreflang="en">+1 for the official react…</a></h3> <div class="field field--name-comment-body field--type-text-long field--label-hidden field--item"><p>+1 for the official react docs. They got improved a lot over time.</p> <p>For more advanced tutorials I can recommend <a href="https://egghead.io/">https://egghead.io/</a> which is not fully free, but it is well done.</p> </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=1798&amp;1=default&amp;2=en&amp;3=" token="GA13uRswUHckkvN1kCaZQ8tYvUurkeBLPHxL9FSo2LE"></drupal-render-placeholder> </div> </article> <h2>Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=44&amp;2=field_comment&amp;3=basic" token="6tdRzb_KucnJVgx1NkLq4i24_3-C-Lr841wCtq8uAhY"></drupal-render-placeholder> </section> Mon, 23 Apr 2018 06:20:09 +0000 timmillwood 44 at https://www.millwoodonline.co.uk