This is the second part of the series where we teach people with no programming background what coding is and how to code.
This part will focus on setting up a coding environment where the user is able to write actual software. The same environment can be used to build different kinds of software but we will focus more on the frontend apps that can be opened in a browser and we will use the ReactJS framework.
Let’s get started.
Install Visual Studio Code
In the first part, we mentioned Integrated Development Environment; a tool which is used to write, run and debug code.
Aa the end of 2022 approaches, Visual Studio Code is the most popular IDE by a mile.
Download Visual Studio Code depending on your operating system (Windows, Mac OS or Linux) and install it on your computer.
Open the Visual Studio Code (also called VS Code).
- It runs the React application server
- It contains npm which is a package manager used by React.
So download and install NodeJS for your operating system. Depending on your operating system, it might have interactive prompts and is pretty straight forward to install.
Once installed, you need to check the installation by running commands on a terminal on your computer. Before I tell you the next command to run, I will give a brief intro to what a terminal is and how do we run commands in it.
What is a terminal and what is it its use?
A terminal is an interactive prompt, a black background interface where you can type commands that interact with your computer. It does not have a drag and drop feature and you cannot use a mouse. It is mostly used by developers to run commands. If you don’t know what a terminal is, I highly recommend that you go through this article.
Different operating systems have different operating systems.
On Windows, you have Windows Command Prompt. To open it:
cmdin the start menu and choose the resulting app
Win + Rto open the run box and then enter
Note: In newer window versions, there is a new terminal called Windows Terminal which is much more powerful that the
On Mac OS, you have bash. To open it, press
space bar and then enter
terminal in the search bar that appears.
Checking NodeJS installation
Now that you have installed node and opened up a terminal, enter the following command into the terminal:
This will give you a version number like
v16.10.0 and this means that NodeJS is now installed on your computer.
This should also show a version and that would mean that the node package manager has now been installed as well.
Create a new ReactJS project
First, in order to understand what ReactJS is and how it works, I would urge you to go through this article first and then come back here.
Using the terminal, you can navigate to any folder that is on your computer, the difference is that you won’t be able to see the folders in a visual manner, but can navigate through them in the terminal and run commands.
For Windows users, I highly recommend to go through this article on how to change directory.
For Mac OS users, I recommend this article.
cd command in your terminal to change the directory to your desired directory:
For Mac OS, the
cd command will be a little different.
Then run the following command to create a new ReactJS project:
npx create-react-app my-app cd my-app
This will create a new ReactJS app and will take you inside the directory. Once you are in, run the following command to start the react server and open the application in the web browser:
Now your application is running. In order to open the code in Visual Studio Code, run the following command:
Visual Studio Code is going to open up and you will see your react project that was created as a result of running the
create-react-app command above.
We are not finished!
There is a lot more to learn yet, regarding Visual Studio Code and ReactJS.
I highly recommend you to go through this VS Code article which shows how to use different features of Visual Studio Code, especially from the perspective of ReactJS.
I would also highly recommend to view atleast the first 5 headings in the Main Concepts (from
Hello World to
State and Lifecycle) section of the React documentation.
Now play around in the terminal and in Visual Studio Code. In the next part, we will see how to change the layout of a UI using ReactJS.