Prerequisites
Before we get started on the super awesome react course, you need to make sure you have 2 main things, listed below:
- Node.js (Node.js (nodejs.org))
- Any Code Editor (We’ll be using VS code for this tutorial
Creating our React app
There are 2 main ways to create a new react app:
- Using create-react-app
- Using Vite
Using create-react-app
- With npm installed, type into a vscode terminal
Npx create-react-app hello-world - Hello-world is the name of the folder to which react will be installed.
- cd into your newly created folder
- Once in, open it up in VS Code and run
npm start - That will open up a local host session at port 3000
- You will be greeted with something like this, on your browser
Using Vite
- With npm installed, type the following into a vscode terminal:
Npm create vite@latest
- Now you’ll be prompted to fill in some information in the terminal:
- Project Name: Name it whatever you’d like
- Package Name (kind of like a sub folder inside the project, where all your code will go): Name it whatever you’d like as well!
- Now here’s our real config:
- Make sure to select React with your arrow keys, and hit enter once you are done
- Here select Javascript, since that will be the focus of this course, once again using the arrow keys and hit enter at Javascript.
- The main difference between Javascript and Typescript in this case is the file type that will be used for components.
- Here’s my setup now in vscode.
- cd into your package name and type
npm install - And after the installation of dependencies completes (notice how your folder will begin to populate), type in (`npm run dev`)
- Navigate to the url specified in your terminal
This url page should lead you to something similar to this:
Note:
Here, we’ve shown you only 2 options, however there are tons of other methods of creating a react app. There are certain benefits to one over the other, and it varies depending on your project, so it’s up to you to determine which one will benefit you the most for your project. However, for this tutorial, the installation method will not affect your progression in this course, since we’re mainly focusing on syntax and benefits of React as a whole!. We will also cover another more beneficial course, focusing on Next.js, which is a continuation of React used to push professional grade applications in the real world. For now, just learn the syntax, and the different things you can achieve with this library!.
For these 2 specifically, the Vite method installs with a smaller number of dependencies installed, and is easier / faster in terms of install. It also has multiple install options, and supports many other interesting features that we will get to, for this course, I will be using the Vite method, however it is completely alright to use the create-react-app method as well!.
Copyright © 2021 Code 4 Tomorrow. All rights reserved.
The code in this course is licensed under the MIT License.
If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.