React Development — Day 1
Setting up the project
I have a recently volunteered to modernise my cycling club’s web site and I have chosen to build it using the React library. I am going to share what I have learned along the way to help get you up to speed with this library.
I will be using Visual Studio Code as my editor throughout this process so let’s get started.
Download Visual Studio Code (VS Code) from https://code.visualstudio.com/
Check if you have Node JS installed?
Launch VS Code and open a Terminal window by selecting Terminal in the menu and select New Terminal
In the Terminal window, type node -v and press enter. In the example below, we can see that node js version 18.16.0 is installed. Please ensure version 16 or higher is installed. If not or you do not have node js installed, you may download it from https://nodejs.org/en . Download the LTS version (stable version).
Create React app using Vite
There are a number of ways to initially create a React app. The option we are going with is using Vite. I chose Vite because it is faster and it’s bundle size is smaller.
This is a good time to decide where you want to put the folder for this app. In my case, I have a React folder wthin the Projects folder on my C drive where I store my projects. I am going to navigate to this folder, or better still, I am going to drag this folder into the VS Code Explorer so it starts there. Drag your starting folder into VS Code and trust the author’s (you).
In the Terminal window, type npm create vite@4.1.0 and press Enter. You can type npm create vite@latest to create the latest version but lets all develop under the same version by specifying the version of 4.1.0
You will be ask to name this project, type react-demo
Next, chose React using the arrows on the keyboard.
Next choose Typescript as our programming language.
Now that the project has been created, we need to follow the instructions to open to this project, install the third party dependencies and run the project. Type in exactly what is on the screen.
First type, cd react-demo (or the name of the project) to go into this folder.
Next, install the third party dependencies by typing npm install and press Enter. This will take a little time to install the dependencies.
Next, type npm run dev and press Enter to run the project. You will see the following in the Terminal. Hover over the blue text and it will instruct you to hold down the CTRL key and left click on the blue text that will open your app in a browser.
Boom! You have a running app working. Take it all in!
That’s covers how to setup a React app using Vite in Visual Studio Code. In the next article, we are going to create our first React component.
If you found this article helpful, please give me a Clap, as this brightens my day knowing I may have helped someone in their journey in making stuff! Also if you want to be notified for future releases in this series, “Follow” me. You may also send me a message if you need any further help.
