ReactJs is one of the famous front-end open-source libraries of JavaScript developed by Facebook. It aims to allow developers to quickly create fast user interfaces for websites and applications. In this blog, we will create a simple and basic ReactJs application. To create this application, one must have enough knowledge of HTML, and CSS, mainly JavaScript. Nevertheless, developing your first application is not much of a complicated task.
Prerequisites
It is time to check some tools and packages installed on your computer. Node.js and npm are the essential prerequisites for this application, including react tools like create-react-app.
- node
- npm
- create-react-app
Check out some of the basics of Node.js in this following blog post:
NodeJs Tutorial
You can check the version of the packages by entering following commands,
npm -v node -v
In this tutorial, I am using node package manager version 8.1 and node version, 16.3
Installing create-react-app
Always try to install the latest version of the create react app globally. You can even use yarn for installing react packages. The purpose of this create react app is to provide all the dependencies which is used to create the react js application. this is a tool provided by the react.js developers, use the following command in your cmd terminal to install the tool.
npm install -g create-react-app
After the successful installation of the create react app, now it is time to create your first React.js application.
Creating your first ReactJs application
To create your first ReactJs application, you have to choose your desired location for the application. Open Visual Studio or cmd termal, navigate to your location and type the following command,
npx create-react-app reactapp
You can name the application as per your wish!
Run your ReactJs application
After you successfully created your application, open your project (application) directory and check out the files created.
The file structure consists of node_modules, public and a src (source) file. A package and package-lock folder will also be created. Inside the src file, you can find all the Javascript file related to your project. Besides that, in the public file, you can find the HTML file related to the project.
Now it is time to run your application with the follwing command. cd into your application and start your application,
cd reactapp npm start
Voila!! Your first application compiles successfully, and now you can view your application on your localhost.
By default, the application opens at localhost:3000, but it is possible to modify these port numbers in the port settings later.
