Kicking Up a React Application

This lesson will be focused on getting our React App up and running with a beginner friendly Create React App framework. We will use Vercel for creating the project, triggering builds, deploying and hosting our application.

Vercel

There are many build and deploy tools out there. Vercel is especially easy to use, and can get you up and running in minutes. Lots of JS projects will have separate build and deploy tools, which can be useful in more sophisticated projects, but for the purpose of this class we will try to keep things as simple as possible.

Vercel offers a variety of JavaScript frameworks for whatever project you may be spinning up as a developer. In any future projects you tackle, I would urge you to read about what options are out there before settling on a framework. Choosing the right framework should make your lives as simple as possible as developers.

For the sake of this class, we will keep things simple with a Create React App framework. In my experience, this is the simplest framework for getting started with React. It is developed by the Facebook team, which is a strong sign you can trust it.

Create React App

I encourage you to read more about Create React App. At a high level, it is a ready to go React Application. It comes with super simple scripts for running it locally, npm run start, as well as building a package that can be deployed to production, npm run build. As you progress more in your development, you may want to re-configure some of these development processes, which can be a large bottleneck with Create React App. However, for beginner React developers, this framework can get you writing some React in no time.

Now that I’ve given a bit of background on the tools and frameworks we will be using, let’s get you guys up and running.

Project Creation and Deployment

1. Create a GitHub account

GitHub will be where our source code lives. In software development, developers will write code locally by running it on their own computer. When they want to “save” their work, they will commit to their remote Git repo. Git is the industry standard for source code version control. It is how multiple developers can work on the same project simultaneously. We will take a closer look in future lessons to what Git is capable of, but generally speaking Git is how you "save" your code to the cloud.

Navigate here https://github.com/ and create a GitHub account.

2. Create a Vercel account

Now that we have a GitHub account, we can easily create a Vercel account that will be connected to our GitHub.

Navigate here https://vercel.com/login and create a Vercel account that points to the GitHub account you just created. Approve any authorization that it prompts you for.

3. Create your project

As I said earlier, Vercel is your all in one shop for creating, building, and deploying your web application.

1. Navigate to your dashboard and select “New Project”.
2. Select the template (framework) you want to use. In our case, the “Create React App” one.
3. Select your personal Vercel account.
4. Select your GitHub account, instructing Vercel to create a repo there.
5. Check the box to make your repo private (we will make it public when it is ready). Name your project <your-name>-modern-web-dev and hit continue.
6. Make sure the project name is correct and hit “Deploy”. We will not be messing with any deploy settings just yet, although feel free to take a look at the options.

Give your project 5–10 minutes to deploy and you should be good to go. Visit your site by using the Vercel dashboard or navigating to <your-name>-modern-web-dev.vercel.app. We will update this url in the future if you decide to buy your own domain.

Local Development

Cool, so now you should have a React Application hosted by Vercel, with your source code in GitHub. Now let’s get it running on our own computers so we can start developing.

1. Clone the Git Repo

1. Open up Terminal and navigate to your ModernWebDev2021 folder that we made in the previous lesson.
2. Go to GitHub in your browser and navigate to your repo named <your-name>-modern-web-dev.
3. Select the green option labeled “Code” and copy the HTTPS url that pops up.
4. Go back to your terminal and type git clone <https://github.com/><your-github-username>/<your-name>-modern-web-dev.git (paste that url we just copied). That is the "clone" link for the repo.
5. You will be prompted to enter your GitHub username and password in terminal. Type those in and hit enter. The repo will be cloned, as you can see if you type ls.

2. Run the Local React Application

Now we will attempt to run the application locally using Node, which you should have installed from the previous lesson.

1. Navigate to the project folder <your-name>-modern-web-dev. (Use ls to check the you are in the right folder).
2. Run npm install. Wait for the project dependencies to be downloaded.
3. Run npm run dev.
4. Visit http://localhost:3000/ to see your local React Application running.

Now you should be all set to start writing some code and customizing your React Application. Almost time for the fun stuff.