Local Development

Throughout this course so far, you've been building your React skills in the embedded code playgrounds within this course platform. This widget is great for smaller self-contained exercises, but it's not quite up to the task here.

Instead, we'll download and run the project on our local development machine.

In this lesson, we'll be using Node.js via the command line to install dependencies and run a local development server.

Not sure how to use these tools? The Tools of the Trade bonus module covers everything you need to know. Here are the most critical lessons:

1. The Terminal, and related sub-lessons
2. Code Editor
3. Node.js and NPM, and related sub-lessons

If you're relatively new to modern front-end development, I suggest going through the entire bonus module!

If you have any questions, feel free to ask on Discord.

The project source code exists on Github, at the following URL: https://github.com/joy-of-react/project-wordle.

If you're familiar with Git, you can fork this project and clone it onto your own computer.

If you're not familiar with Git, you can download a .zip file containing everything you need:

I recommend creating a /joy-of-react directory to house this and future Joy of React projects, but you can clone/copy the project wherever works best for you!

As we've learned so far in the course, modern React applications require some pretty sophisticated tooling. We need to do things like:

• Compile our JSX into plain JavaScript.
• Bundle all of our individual .js files together, so the browser doesn't have to download dozens/hundreds of files.
• Compress and minify our JS so that the bundles are smaller.

These days, fortunately, we don't have to configure any of this manually. There are many wonderful tools that will manage all of this for us, giving us a friendly way to benefit from these features.

In this project, we'll use Parcel. It's a modern, super-fast, batteries-included build tool that hides all of this complexity for us.

To run a local development server, we first need to install third-party dependencies (eg. React, Parcel). This can be done by cd-ing into the root project folder and running the following command:

$ npm install

Once the dependencies have been downloaded, you can run a dev server with the following command:

$ npm run dev

This will start a local development server. The terminal output should look something like this:

We can see from this output that a local development server is running at http://localhost:1234. In most terminal applications, you should be able to click this URL to visit it in-browser. If clicking it doesn't work, you can copy/paste.

You should see the following:

If you're seeing this, you're all set!

For the projects in this course, the README.md is your home base. It includes instructions for each exercise, and includes helpful GIFs that show the expected result.

If you use VS Code as your editor, I strongly suggest using its built-in markdown renderer:

In addition to the helpful formatting, this view allows you to see the images, which is critical.

The command we want is Markdown: Open Preview. To enter this command, open the Command Palette by pressing Ctrl + Shift + P.