Setting Up and Running Your First ReactJS Project – Students Guide

In recent times, ReactJS has seen a high rise in usage due to its’ power and efficiency. Not only that, but ReactJS is also pretty easy to learn. Which has earned it massive fame, especially among the beginner developers.

The first step is the hardest to take. Beginners might find it overwhelming as they are not quite familiar with the process. And also, there are quite a few dependencies that you have to set up before being able to work on a project.

In this article, I will take you through all of the steps that are needed to start working on your very first ReactJS project. So sit tight.

What is ReactJS and What Do You Need to Start Your First Project?

ReactJS is a framework. A software framework is a platform for developing software applications. ReactJS is one such framework with Java libraries, which is completely free. It is also open-source. ReactJS is used for the front-end of an application. Meaning that it is mainly used to create the outlook of the project. Or the user interface. It is maintained by Meta (formerly known as Facebook).

What are the hardware requirements for ReactJS?

Before you can install and run ReactJS on your PC, you must make sure it meets all the requirements to run it and its’ dependencies. The requirements are as such.

1. Windows XP, Windows 7 (32/64 bit) or higher.
2. At least 4GB of RAM.
3. 10GB of free space on your hard drive.

What dependencies are needed for ReactJS?

ReactJS requires other software and programs for its’ proper execution, known as dependencies. Let’s take a quick look at those prerequisites.

1. Node.js
2. Any decent editor of your choice (Visual Studio, Atom, Sublime)

You might wonder why these are needed in the first place.

Node.js: We’ll need Node.js on our PC to execute ReactJS. Node.js is a server that will aid in the execution of React code. It uses the Chrome V8 JavaScript engine and non-blocking input and output. The Node.js code is freely available.

Code Editors: Code editors are used for writing the code of the program to execute. They also often come with interpreters to interpret the code.

How to install ReactJS?

The steps are simple. I will go through them now.

1. Download and install Node.js – Download Link
2. Next, install create-react-app using this command – npm install create-react-app
3. Create a folder on desktop with name “Projects“.
4. Open terminal or command prompt and navigate to this folder.
5. Now install the react environment using this command – npx create-react-app my-first-app
6. This command will create a demo project.
7. Now use npm start in terminal or command prompt to start your React app.
8. When you’re ready to deploy your web app to production, running npm run build will create a build of your app in the “build” folder.

These are the steps that you need to follow in order to install ReactJS on your PC.

Directory Structure

The directory structure of the project will look like this –

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

Code Example

In your project directory, you will find a file, with name App.js. This is the starting point of your application. Since you are beginner, we will write the whole code in this file only. In large production projects, we divide the code into multiple files or even into multiple different projects. But you don’t need to think about that right now.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);

      This is the best article for students to setup ReactJS ♥♥

Click here to Tweet this

Where to Go from Here?

There are several well-constructed guides and tutorials available on ReactJS for beginners. These create a basic understanding of programming for beginners. Or you could follow any book of your choice on ReactJS for students. Assistance is always needed in every task, even assistance with research papers is quite common. After you have learned the basics of the framework, you may take on harder and more challenging projects for yourself. To further enhance your skills.

Conclusion

Throughout this article, I have discussed all of the necessary steps one must go through to set up and run your first ReactJS project. You are only limited by the sheer scope of your imagination.

So venture forth. As popular ReactJS is right now, a properly skilled developer might get a pretty handsome salary in the current market. I hope this article will help you take your first step as a ReactJS developer.

Live Demo