Let’s recap what we’ve done so far.
Let’s work on the React app that will turn our JSON into a beautiful blog post. I like to start with a completely hardcoded UI and work back incrementally from there until it connects with the JSON. We’ll start by deleting the Hello React app and replacing it with the real thing.
We’ll delete hello_react.jsx and fix up the application pack to show our blog post. Webpacker gets its knickers in a twist when you delete a pack but stopping and starting webpack-dev-server will usually fix it.
I like to have a top-level Application component that act as a container for everything else. I also like to group my components by domain rather than the more usual functional buckets.
Let’s create the Application component and initialize it. I’ll explain what it is doing afterwards.
A few things to note if you are new to React.
The simplest React component is just a function that returns some JSX. That thing that looks a bit like a <div> tag with an id attribute… that will actually get compiled into code that creates a div component and sets the id property. React components are all about properties.
The usual trick for bootstrapping a React app is to look for an element in the DOM and then render your React component inside it.
# index.html.erb <div id='react' />
The last thing is to point the application pack file at our index.jsx.
If you refresh your browser page now and it should look a bit like this:
So that’s our top level Application component done. In the next episode we’ll tidy it up a little and add some tests.