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 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
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 webpack
npm run eject in order to modify
. 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.