In this introductory tutorial of ReactJS, we’ll explain to you what is ReactJS and what it makes it best suits for developing front-end web applications. Besides, we’ll also discuss what is the prerequisite knowledge required to learn ReactJS and how you can install and configure the ReactJS environment set up in your local system.
So we begin our tutorial by discussing what is React and What makes it credit-worthy?
What is React?
React is an open-source front-end JavaScript library put forth by Facebook in an attempt to boost the viewers’ retention time on their web and mobile application. Since then, React is the most widely used JavaScript library used by the front-end developers and mobile app designers to create dynamic, fast, and highly interactive applications.
React-driven applications stand out other applications due to the implementation of virtual DOM in React that makes React-driven applications extremely fast.
Therefore, demand for a front-end developer with React specialization skyrocketed in the last few years because every tech company or a retail business always emphasizes on the best user experience because that’s the only way for them to enhance their outreach. Thus, we can say learning React could only allow you to remain relevant in the tech world but would also pave the way for a high-paid job.
React Flexibility
What makes React compelling to developers and tech giants is its flexibility. While creating a web app using React, you are free to use as little or as much React you want. To keep that in perspective, you can incorporate react in your existing application to introduce advanced functionality in it. On the flip side, you can build an entire UI of your application leveraging React code.
React Renders UI to the Document Object Model (DOM)
React-driven application heavily relies on the third-party dependencies and external libraries. Leveraging these third-party dependencies, React implement some advanced concepts such as react routing and state management. We’ll discuss these concepts in the later part of our tutorials.
React has Garnered Industry Acclaim
Due to the high simplicity and ultra-flexibility, many developers and industry experts envisage a very promising future of ReactJS. That being said, many tech giants and large-scale corporations like Facebook, Netflix, Airbnb, and Dropbox are harnessing the potential of React.
Prerequisite Knowledge
So far we’ve introduced you with the primary concepts of React, now we’ll be discussing prerequisite technologies to learn ReactJS:
- HTML5
- CSS3
- Javascript
- EcmaScript 2015 (predominantly promises, request, arrow functions, and classes)
- Fundamental knowledge of NodeJS and NPM.
Setting up the Development Environment for ReactJS
In order to create an enabling environment for ReactJS, we first need to install NodeJS which is the run-time environment for executing JavaScript code. By-default, NodeJS comes with Node Packet Manager (NPM). NPM is used for sharing the package for ReactJS.
NodeJS can be easily installed from the official website of it:
On the completion of NodeJS installation, you can view the current version of NodeJS installed in your local system. In order to get this job done, open the command prompt, and write the following command in it.
C:\Users\[user-name]>node -v v10.15.3
Install Create-React-App Tool
The next step is the installation of the create-react-app tool which is a very handy tool for developing react-driven apps. This tool helps in the development of React applications in your local system.
You can install this tool either at the temporary folder level or at the system level. For the sake of simplicity in our development cycle, we install it globally using the following command:
npm install –g create-react-app demo-app
Creating a New Project
Once the create-react-app tool is successfully installed in our system, we can conveniently create our first react-driven application. For instance, I want to create my first react-driven application in D:\\demo-app, I need to navigate to this drive first. Then I’ll create a folder in my D drive wherein my react application resides. Now I can create my first react project using the following command:
create-react-app first-project
It is imperative to know never to use capital case letters in these commands.
Running React Application
Let’s just navigate to the react project that we’ve just created and run it locally on our system with an aid of the following command:
Cd first-project npm start
Now we’ve created our own react project and we’ve successfully executed it.
As a professional developer, we need some code editor wherein we can write and compile our code. Herein the significance of code editor comes into play. The code editor is also known as IDE (Integrated Development Environment).
Luckily, we have numerous code editors like Visual Studio Code, Atom, Sublime text editor, React IDE, and Webstorm. We will prefer Visual studio code in our example as it contains numerous add-ons that aid in the development of React applications.
Microsoft laid down the foundation of free code editor Visual Studio that is used by the developers for building state-of-an-art web applications. The most fascinating feature of VS code editor that thrilled developers is that it has integrated Git control and a terminal. Besides, its auto-completion feature is extremely useful for developers.
Now we’ll move ahead and teach you how to download and install VS code editor.
Install Visual Studio Code
We can download and install Visual Studio Code from the following link:
https://code.visualstudio.com/download
After the successful installation of VS code editor, open the project that we’ve just created with an aid of the following command:
D:\[folder-name]>code .
When you insert this command in your command prompt, your visual studio IDE will automatically open along with your newly-created react project. In your React project, you’ll find 3 different folder structure:
- src Folder
- Node_modules
- Public
Now you’ve learned the complete procedure of installing and configuring the react development environment. So, what are you waiting for, go ahead, and begin your react learning journey.
In order to reap the full benefit of these tutorials, I strongly recommend you to code and run all the code examples I’ll teach you in these lesson.