React : A Brief Overview of the Popular JavaScript Library
Introduction to Reactjs
React has become one of the most influential and popular JavaScript libraries used for developing the frontend of web applications. Developed and maintained by Facebook and released in the year 2013, React is currently the most in demand UI library in recent memory.
The fundamental building block of a UI designed in a React is a Component. By combining these isolated Components, React allows you to design complex UI’s. React is used to design highly reliable single page web applications. The library is concerned with state management and rendering the application in the DOM. However, additional libraries are used alongside with react to develop web applications. React has a vast community of active developers who are constantly updating and developing open source packages and other complementary resources which makes developing with React much more convenient and easy.
Getting Started with Reactjs
Install nodejs
In order to create an application with React it is necessary to have node installed in your computer. If you have not installed node in your computer you can download and install node from the following link.
Once you visit that website it is recommended that you download the latest stable version of node.
In this article I will be using Visual Studio code as the code editor of my choice. However, you are free to use any code editor of your preference.
Launch VS Code and open the integrated terminal build inside the editor by clicking Terminal and then click on New Terminal.
Inside the terminal run the following command.
node -v
If you have successfully installed node in your computer the terminal would display the version number of the version of node installed in your computer.
Creating a React app with create-react-app
Upon successfully installing node on your computer we can start proceeding on with creating our first React application.
In order to create your first React app you can use the create-react-app pacakage which has also been developed by Facebook. First navigate to the desired directory in which you wish to create your React application and then run the following command in the terminal.
npx create-react-app react-demo
This which is the entry point of our application and create-react-app creates the necessary files which are essential in creating a React application.
Once you have run that code change the directory to react-demo and run npm start.
cd react-demonpm start
You will now notice that the React app will be running on port 3000 on your local machine.
Afterwards open the react-demo folder in VS Code.
The Folder Structure
Once you open the react-demo directory you would have observed that create-react-app has created the above shown files in our directory.
The pakage.json file contains details pertaining to the dependencies and scripts required for our React project.
The node_modules folder is the location where all the dependencies for our project will be installed.
The public folder will mainly contain the favicon.ico and the index.html file. We will be building single page applications with React so index.html will be the only html file we will be having in our react application.
The src folder will be the folder that you will be interacting the most as a web developer. The index.js is the entry point to our application and App.js is the root component which will rendered inside the ‘root’ DOM node.
Setting up the files
We don’t need all of the above files created by create-react-app. We will not need the App.test.js, App.css, logo.svg, reportWebVitals.js and setupTest.js in this simple application that we are going to build. Therefore, first let’s get rid of the files highlighted above. Right click on each of those files and delete them.
Once you have deleted the above mentioned files the browser will display an error indicating that some files are missing. Since we have made changes to some of our files it is necessary to make some adjustments to our code in our React application.
First open the index.js file and delete the code highlighted below in the diagram.
Next, open the App.js file and delete the code highlighted below in the diagram.
To check whether our React app is running without errors insert a h1 tag with the content “My First React App is Working!!!” inside the div element of the App.js file.
Open the web browser and if you can observe as follows, it means you have successfully configured the base code that create-react-app provides us to work in our project.
Creating your first React Component
A component in React is the fundamental building block of UI designed using this library. React allows the developer to create customized reusable components which makes React such a powerful UI library.
Let’s create our first component in React. First Make a directory inside the src directory named “components” and inside the “components” directory make a JavaScript file named “FirstComponent.js”.
Inside the FirstComponent.js file write the following code.
First you need to import React from react. We will creating a functional component instead of a Class based component. It is recommended that you learn both Class based and functional based components in React. However, React is slowly shifting from Class based components towards functional based components and functional based components could be stated as the future of React.
Create a function named FirstComponent and inside the return statement of that function make a div element. Inside that div element make h1 tag with the text “Hello World!!!”. Here inside the return statement we will writing in JSX which allows you to combine and write HTML and JavaScript together.
We need to export the above created function so that we can import that functional component in other parts in our application.
Now let us use this component in our App.js file. To do this go to the App.js file and import FirstComponent.js from the relevant directory that this file reside.
Afterwards, replace the existing h1 element with FirstComponent as shown below.
If you have successfully followed the above mentioned steps, you could observe that Hello World!!! has been rendered in the web browser.
The power of React comes from its ability to reuse the same component over and over again.
In the App.js file duplicate the FirstComponent two times as shown below and you will notice that Hello World!!! is displayed 3 times in the web browser.
As you can see here “Hello World!!!” is displayed three times in the browser.
Props in React
Props are the arguments that you pass in to the Components that you make with React. Props are used to pass data from one component to the other in an React application.
Consider a scenario that you want to render a car Component where each car has a different name. One possible method is to create separate Components for each car name. This method is unreasonable and inefficient as we need to create a separate JavaScript file for each car as they have different car names.
However, by using props we can create a single Car Component and pass the car name as a prop to that component.
First create a new JavaScript file named as Car.js inside the components folder. We will be passing the names of the cars as props to the Component. Therefore in order to use the passed down props inside the Car.js we need to specify props as a parameter in the Car function.
We can access the name property by referring to it as props.name inside the Car function.
If you have successfully followed the above mentioned steps, you could observe that by using the same car Component we have displayed different car names which were passed as props to the Car Component.
Conclusion
React has become one of the most influential UI libraries of modern times. React has an active community of developers who are constantly involved in supporting the library and React is also backed by Facebook, which is one of the largest organizations in the world. If you are familiar with JavaScript and now in a position to move ahead in learning a JavaScript UI framework/library, React is a good option that I would like to recommend and you should definitely consider.
