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
22.4.1
$ npm --version
10.8.1

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

$ mkdir projects
$ cd projects
$ npm create vite@latest
? Project name: › pokefinder
? Select a framework: React
? Select a variant: › JavaScript

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

$ cd pokefinder
$ npm install
$ npm run dev

npm run dev opens a browser tab for you and shows the starter app. It will be running at localhost:5173 (we’ll explain what that means in class). See the spinning React logo and a bunch of other text? Nice, it’s working. Now look in the terminal window: you don’t have a command line prompt, because there is a watcher running. The Vite watcher not only does Hot Module Reloading (HMR) but also lets you enter a few commands of its own.

Note the message in the running app that says “Edit src/App.jsx and save to test HMR.” Let’s do that! Bring up your favorite text editor, load in your pokefinder folder, locate App.jsx, 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 run dev)

Vite’s starter code is the famous “Counter App”—the Hello World of React. Click the “Count is” button and watch it change. You can browse the code that Vite made—a lot of it should look familiar since you did the Code Sandbox Counter tutorial earlier in the class. Our code-along will not be a counter app, so let’s remove all the stuff we don’t need, and edit some “meta” files to better describe our project:

• In index.html, change the contents of the <title> element to something descriptive, such as “Pokémon Finder”
• In the src/assets folder, remove the React SVG file.
• In the src/App.css file, you can delete all the rules except the one for #root.
• In src/App.jsx, replace the entire contents of this file with:

    import "./App.css";
  
    export default function App() {
      return (
        <>
          <h1>Pokémon Finder</h1>
        </>
      );
    }
    

• 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! Vite already initialized a git repo in your project folder, so:

$ git init
$ git add .
$ git commit -m 'Project stub'
$ git push

At this point, it’s educational to enter:

$ git log

You should your first commit.

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 run dev 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

What’s Next

So far we have introduced what React looks like, seen components, state, and props, learned how to use Vite to help us get a local project started, 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:

• React.js Essential Training by Eve Porcello.

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

Summary