the grass ain’t always greener on the other side / it’s green where you water it
The key is to build, build, build. Only then are those articles safe to read (and even then in very small doses.)
Choose Quickly, then Wisely
But how do you choose your tools? If you’re a seasoned developer, sustained reflection might be helpful. But if you’re just building up your courage to jump, here’s my advice: jump. Quickly weigh the options and then make your best guess. Pick something and wrestle with it until you know enough to decide if it’s what you want or if you need to jump ship.
I chose React. I liked what I saw and it made sense to me, so I chose it. Maybe you wouldn’t, maybe you didn’t. If so, feel free to read someone else’s blog, and best of luck.
For the rest of us, enough prologue. Let’s code.
- Install NVM (Node Version Manager) via the command line:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.3/install.sh | bash
(You may need to restart your terminal after this step.)
- Install Node:
nvm install node
- Check your Node version:
You should see
v8.4.0or higher. Success!
Included with Node is a command-line interface called NPM (Node Package Manager). This is like
brew for Macs, or
apt for Linux: it handles installing, removing, and updating bundles of code called packages. You’ll use it frequently in React.
Using Create React App
In order to get us up and running, I’m going to be using a tool called Create React App which sets us up with the best practices for a new React app. In a future post I’ll show what’s going on under the hood by ejecting from Create React App and looking at its packages, but for now let’s move forward:
- Install Create React App via NPM:
npm install -g create-react-app
-gflag in this command stands for
--global, which means that Create React App can be run anywhere, not just in a particular directory. You may also see
i, like so:
npm i -g create-react-app.
- Create a new project (I’m calling this one
You should immediately see the following response with a progress bar below it:
Creating a new React app in /Users/You/my-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts...
- Once it finishes, you should see a success message.
cdinto your project directory and start the app:
cd my-app npm start
- Soon after entering
npm start, you should see a message notifying you that your app is running locally:
You can now view my-app in the browser. Local: http://localhost:3000/
If you wish to kill the server at any point, just hit
ctrl + Cin the terminal. You can just
npm startit back up!
- Open Chrome and go to
http://localhost:3000/(or whichever URL it provides you). If you see a “Welcome to React” page, congrats! You did it. Your very first React app.
Before we move on, let’s leave our mark. The React Welcome page says:
“To get started, edit src/App.js and save to reload.”
Let’s do just that. Open
my-app in your text editor, and locate
Make a change, like updating the messsage to
<h2>Hello World!</h2>, and hit save. Notice that the page gets hot reloaded, no refresh necessary.
Using React Dev Tools
One last piece of this puzzle, you’ll want to install Chrome’s React Developer tools. They’ll let you inspect your app’s structure, props, and state, which the typical Dev Tools can’t do.
- Go to the Chrome Store and find React Developer Tools. Click “Add to Chrome”.
- Once it installs, you’ll see a grayed-out icon in the upper right corner of the browser.
- Go back to your new app, and you’ll see that grayed-out icon become colorized once it detects a React App on the page.
- Open Chrome’s Dev Tools (⌘ + ⌥ + I). There should be a new tab named “React”. Now you can easily inspect your app.
Stay tuned as we investigate components, the building blocks of a React app.