Building React Apps Locally

About This Exercise

We’re going to build the Pokémon app that we built previously in CodeSandbox, this time from the command line. We’re also going to connect it to a GitHub repo.

The Code-Along

Step 1: Get Ready

Make sure you have up-to-date node, npm, and npx (Installing or upgrading node will take care of the other two).

$ node --version
18.9.1
$ npm --version
8.19.1
$ npx --version
8.19.1

Go to the folder where you store your projects, then use create-react-app to make a brand-new folder containing an initialized git repository and tons of starter code:

$ mkdir projects
$ cd projects
$ npx create-react-app pokefinder

Go into that new folder and test that the starter app works:

$ cd pokefinder
$ npm start

npm start opens a browser tab for you and shows the starter app. See the spinning React logo? Now look in the terminal window: you don’t have a prompt, because there is a watcher running.

Note the message in the running app that says “Edit src/App.js and save to reload.” Let’s do that! Bring up your favorite text editor, load in your pokefinder folder, locate App.js, and change the message. Save the file, then note the change in the browser! The watcher did that. (If the watcher ever stops, start it up again with npm start)

There’s a ton of stuff we don’t need in the starter code, so let’s get it out of our way:

• In the public/manifest.json, edit the short_name and name properties to your liking.
• In the src folder, remove the SVG file.
• In src/App.js, remove the logo import line, and replace the main div content (currently it holds a header element) with a message like “Pokémon Finder”.
• In the src/App.test.js file, replace the text "learn react" with the message you chose above (this keeps the test up-to-date with the change you made above).
• Update README.md to your taste. Get rid of all the explanatory text in there about how to use Create React App. Failure to clean this up won’t affect the correctness of your app, but people looking at your GitHub Portfolio will wonder why you could not be bothered by keeping your repository organized and might not be willing to give you an internship or job.

Save everything and look at the browser window. Hopefully you don’t see any errors, and you just see the text you replaced the spinning logo with. If your browser window is showing errors, refresh the page. If that doesn’t work, check your code for typos and other problems.

Step 2: Start using Git and GitHub

Commit those changes to your local repo. Yes, your local repo! create-react-app already initialized a git repo in your project folder, so:

$ git add .
$ git commit -m 'Customize create-react-app files'

At this point, it’s educational to enter:

$ git log

You should see two commits, right?

Connect the project to GitHub. At GitHub, click on the New Repository. Enter ONLY a name (pokefinder) and a description (A small web app for displaying Pokémon information from an API). DO NOT DO ANYTHING WITH THE OTHER OPTIONS. REPEAT: DO NOT TOUCH ANY OF THE OTHER OPTIONS. Just hit the Create Repository button after entering the name and description. This will create your repo and leave you at an instructions page. See the part where it says “…or push an existing repository from the command line”? Copy those three lines and paste them into your terminal (you should be in your project directory still):

$ git remote add origin git@github.com:YOURGITHUBNAMEHERE/pokefinder.git
$ git branch -M main
$ git push -u origin main

Refresh your repository page at GitHub and note your two commits.

Step 3: Add the code from the earlier code along

Grab the content from the Code Sandbox project file styles.css and merge them into your local project’s App.css file.

Next, grab the following files from the Code Sandbox version we saw earlier and create the corresponding files on your local box:

• src/Entry.js
• src/Info.js
• src/Title.js
• src/App.js

Near the top of App.js, replace import "./styles.css" with import "./App.css".

Your live preview should have your app running now. If there are errors, check the browser console. Also make sure you did not stop the eariler npm start command; if you did, just run it again.

Keep working until everything looks like it’s running well.

Add, commit, and push!

Step 4: Enhancements

Next, go crazy with your CSS, and any other app enhancements you need to make.

Add, commit, and push!

Step 5: Understanding Tests

Oh did we forget about those tests? If you did not do so already, go into src/App.test.js and fix up that sole starter test to actually look for the title we put into our app, and not the old “Learn React” test:

test('renders the page heading', () => {
  const { getByText } = render();
  const linkElement = getByText(/Pokémon Finder/i);
  expect(linkElement).toBeInTheDocument();
});

In a separate terminal window, go to the project folder and enter:

$ npm test

Select a from the menu to run all tests. Also, look at the options: there’s a way to get a test watcher. There’s so much more to testing that it needs to be covered elsewhere.

What’s Next

So far we have introduced what React looks like, seen components, state, and props, learned how to use create-react-app, and integrated with Git and GitHub. We didn’t go too deep though.

Seeing things multiple times is great for your learning. So it’s time for you now to take advantage of these two amazing tutorials:

• Learning React.js by Eve Porcello.
• The Net Ninja’s Full Modern React Tutorial

Next, go through this very cool article. It’s modern. In fact, it’s recommended.

Now, check out the React home page and follow the links it suggests. You can read the official docs: start by visiting the Home Page for React. Read this page and take a look at the four (live!) code snippets. Click on the Get Started and the Tutorial for some more insights and and a look at the applications it can be used in. The Getting Started link drops you into the React Documentation section, which is quite good! When you are up and running with basic React, you should definitely go through their Main Concepts section, which does a nice job of giving you a crucial understanding of what makes React React, and how to use it well.

WOAH those components int the official tutorial look wrong!

The tutorials by Eve Procello and The Net Ninja are quite modern, but the official React documentation uses classes to make components, which are not covered here.

You will probably never use the old-fashioned class components in new code, but they still exist in the wild, and it is beneficial for you to be familiar with the old class style as you may encounter them in your studies (or work on old code projects that you may join).

Summary