Console.log: Your First React App (Part 1)

Anyone who has ever tried coding may have heard of React. React is an UI (user interface) framework that makes building and organizing a component rich application easier. There are other such frameworks like: Angular, Vue, or Ember.

Anyone can write a React app, it’s a matter of learning the conventions, knowing how to unblock problems, and deploying it to a website so you can show your friends and family what you’ve built 🙂

I’m going to write this guide for someone who may have never done any coding. If anything seems unclear or confusing, please leave a comment below! As is common for first projects in the development world, we’re going to build a to-do app. An app that you can add things to do, remove them, edit them, and view them.

We typically refer to an app that does these things as a CRUD app.

C – You create a new piece of information, in this case a new list item
R – You can read the information you’ve created
U – You can update the to-do item to be finished or unfinished
D – You can delete items from the list

When there is tracking of data in a persistent way (across sessions of a browser), you would probably need a back-end server to make calls to a database where this information is stored and updated. But that’s a topic for a future blog 🙂

For now, let’s track that information in the app and it will clear when we refresh the browser.

These are the steps we will work on to get the to-do app ready, subscribe to follow along! Don’t worry if it looks daunting, I’m dividing it into sub-steps so each step is thoroughly explained and illustrated.

Part 1: May 4th
Step 1: Set up your development environment
Step 2: Run create-react-app
Part 2: May 11th
Step 3: Let’s build the home for our to-do app
Step 4: Let’s build a re-usable component
Part 3: May 18th
Step 5: Is it responsive???
Part 4: May 25th
Step 6: Is it accessible???
Part 5 June 1st
Step 7: Pretty, please
Part 6 June 8th
Step 8: Deploy
Step 9: Reflection

Let’s begin! Step 1: Setting up your development environment

To anyone who is new to coding many of these steps are going to sound daunting, specially the first one. But not to worry, just follow along.

Let’s open up the terminal

Screen Shot 2020-05-02 at 12.28.45 PM
This tutorial is written for Mac users, small deviations may exist with Win machines
Screen Shot 2020-05-02 at 12.34.37 PM
Running the command “pwd” (typing pwd and hitting enter) prints the working directory, or where I currently am.

I like to work in my Desktop especially for possible throwaway projects. In your terminal to get to your Desktop folder/directory, you can use the ‘cd’ command.

cd [path]

‘cd’ stands for change directory and ‘[path]’ may be replaced for either a full path to a specific place in your system or you can use relative paths like ‘..’ to go up one level.

So when you open your terminal you can run:

cd /Users/[your user name]/Desktop

Anytime I use [brackets] it’s to indicate that a unique value that you choose goes there. For me it’s melisa because that’s my user account on my machine. If you’re not sure what yours is, you can type /Users/ and then hit the TAB key twice to show autocomplete options.

Awesome, that’s your intro to terminal commands! You now know how to see where you are with pwd, change directories with cd, and use the TAB key to get autocompletion suggestions. You can also use the ls command to “list files”, this will show you what you have in that folder.

According to the React docs, we have two requirements: Node >= 8.10 and npm  > = 5.6.

Now let’s get us some Node. Node is JavaScript that can run outside of a browser. You can build a server with Node, essentially a full-stack application with a single language. I know that npm comes bundled with Node, so I only need to install Node.

We can download the file from the Node website: here. And if it’s confusing at all, there’s a handy guide from Nodesource.

After installing, we can check the Node version and npm version we have by running these terminal commands:

node -v
npm -v

Screen Shot 2020-05-02 at 2.35.39 PM
Since we have Node 11.13.0 and npm 6.3.0 which are greater than the required versions, then we are good to go.

Step 2: Create React App

Fun fact, React was developed by Facebook as an open source framework, so it powers a lot of the features in their flagship web applications. What we’re going to use next is the create-react-app command.

Let’s walk through each step:

npx create-react-app [my-app]

Here we are using the npx command made available by the npm package we just installed. create-react-app is the command that builds a new sample project of react and my-app is the name you are giving your project. I’m going to name mine todo-project.

It’s going to download and install anything that the project requires.
Screen Shot 2020-05-02 at 3.08.16 PM

Finally! We’ve come so far. Now we can go into the new project we’ve created. Remember the terminal command? That’s right:

cd todo-project

Screen Shot 2020-05-02 at 3.14.06 PM

And we can run:

npm start

This command will run a local node server to a local port in my machine. In this case: http://localhost:3000/ It only exists on my machine. For someone else to go to that domain it would show them an error unless they are also running a project locally to that specific port.

Screen Shot 2020-05-02 at 3.18.07 PM

And that’s it! You have your very own React app running on your machine! Congratulations!

Screen Shot 2020-05-02 at 3.18.48 PM
NOTE: The tradeoff between the ease of setting up a create-react-app application and doing it piece by piece, is size. The app size is way bigger than it might need to be as it bundles many libraries you MIGHT need just in case. This is a great way to practice as a beginner. Keep this in mind for future consideration 🙂

Thank you for following along and see you next week for part 2!

Frequently Asked Questions:
What do I do if I already had an older Node installed before?
Hey! Cool. That means you are not a total newbie. I recommend installing a Node version manager like: nvm (the one I use) or n. This is particularly useful if you need to switch Node versions depending on what project you’re working on. Then you can look at the nvm or n --help flag to see what commands are available to you to switch or upgrade Node.

Okay…. so I have the same thing as you at the end. What now?
Amazing! That means you set up your environment to now build out a React application. What this does is install all the tools and libraries you need to then build out your project. If you’re curious, you can read the yarn.lock file and it will list the dependencies you have installed that your app depends on to work. It might look really long and that’s because create-react-app installs a lot more libraries than you might actually need. It’s good to get acquainted, that way as you learn more and want to build your projects from scratch, you can just include the pieces you need in your own apps. Stay tuned for part 2 on May 11th, here we go into adding to the UI 🙂