Facebook released a script to create react apps with no configuration and I decided to give it a try.  Inspired by Melania Trump’s speech, I decided to build a generator for future speeches she may deliver to test drive it.

Getting Started

Getting started was straightforward. npm install -g create-react-app installed the script and create-react-app melania-ipsum ran it. In under two minutes, I had all the scaffolding I needed for a single page react app. Getting the app running in local development required entering npm start  and visiting http://localhost:3000.

Out of the box, eslint, babel, and webpack all are working together.  The eslint rules are not super strict by default and mostly aim to prevent errors.

Building Melania Ipsum

Once I was ready to start developing, create-react-app got out of the way and allowed me to focus on the single page app I was building.  For mine, I had to find copies of Michelle Obama’s convention speeches (and not get too distracted reading through them), write a script to turn the transcripts into a javascript file, and focus on

Building my components, I was reminded that in JSX case matters and “to render a React Component, just create a local variable that starts with an upper-case letter”.

Another gotcha that I ran into is finding a good way to make sure Melania didn’t repeat any clauses.  I couldn’t use a property since I needed to change state inside the component and I couldn’t use a state since I needed the render method to trigger a refresh. I ended up using a plain old variable, though I’m sure there is a better way to accomplish this.

Deploying to github pages

This is where I finally ran into an issue with create-react-app.  The webpack build process assumes that you will be deploying to the root of a domain.  I had to run npm run eject in order to modify webpack. This was the only issue I found. EDIT: Turns out that this was unnecessary and I could have set ‘homepage’ in my package.json.

git subtree came in really handy for deploying to gh-pages. You can see the final product and create your own Melania Trump speech.

Overall, I would highly recommend create-react-app for simple single page react apps. I’m someone that really likes build tools and tends to spend a lot of time thinking about what the ideal build process should look like, so it was hard to give up some of that control, but the fact that I could go from idea to building a react app in a matter of minutes is a convenience that can’t be overrated. I look forward to using it again.