What Is React JS? Understanding React From Basics.
Here In This We Will Understand About The React.JS And What Makes It Special While Going Through The Basics.
Web Development Has Been Becoming As One Of The Most Famous Career In The IT Sector And Within Last Few Decades The Changes Or Reforms That Have Occurred In This Area Of Research Field Has Made Web Development Very Interesting And Easy With Less Consumption Time While Also Helping In The Client Side Working In The Links Used In Web World. The pre requisites of learning React JS include HTML, CSS And JAVASCRIPT(especially ES6) and all the components are being imported and used in App.js file component. All the styles in examples are not given as it is simple and one must be knowing CSS Beforehand applying in React as much of it is same but in inline styling you need to use like style={{backgroundColor: “red”,…}} and provide it in camelCase where it is done in object form of basic styling and value need to be provided in quotes.
So First Of All, The Question That Must Arise In Your Mind Would Be What Was The Need To Introduce React When We Are Having HTML And JAVASCRIPT In The Web Development? So Now Let’s Proceed To The Answer Of This Question In The Upcoming Sections Of The Article Or Blog.
What Is React JS?
React JS Was Developed By Jordan Walke (FACEBOOK Employee) And Was First Released On May 29, 2013 And Now It Is Maintained By FACEBOOK. It Mainly Focuses On Developing The UI Components And React JS Can Be Used As A Base For Single Page Mobile Applications Which Is Called React Native. It Makes The Use Of DOM Objects Or The Components. React Came In To Use Due To Various Advantages Over HTML And JAVASCRIPT Which Makes It Quite Great To Use Easily After Getting Familiar With It. Right now the current stable version of React Is 17.0.1 / 22 October 2020. We Will See Certain Advantages Of Using React JS In Front End Web Development.
- It Facilitates And Make It Easier In Overall Process Of Writing The Code In Component Form And Also Helps Us To Write JAVASCRIPT Along With Text Form.
- It Boosts Overall Productivity And Helps In Maintenance.
- It Gives Us Quick Rendering And Stability In The Code We Write.
- It Is Having Huge Developer Community.
- It Is Also Used In Mobile Application Development As React Native.
What Are Essential Constituents Of React JS?
1. Creating React App
To Create A React JS App, Open Your Command Line Terminal Or Terminal. Go To The Folder Where You Want To Create React App. You must install node from it’s web site and npm before hand to use React. Now Type npx create-react-app <project app name> Where In The App Name is the name You Will Enter to create Your React App.
To Install npm, use Following command:
npm install npm --globalTo Create A React App, use Following command:
npx create-react-app <project app name>
Here We Are Creating React App Named demo . Now Hit Enter And Your React App Will Be Created. After All The Steps And After Downloading All The Files We Will Get The Following Screen.
2. Setup Of React App
The Basic Setup Of The React JS App Include Various Folders With The Utmost Important Folders Are public and src. One Of The Most Important File Is package.json. In The public folder we will be having the HTML file where will not be writing any code but in our div tag with id as root we will be having our React App code in it.
In <div id= “root” ></div> we will be having all our code in it and here is where it is the starting point of our app and whole of our code. The New React version is having functional components which have replaced earlier used class components. Also very useful feature of React JS , Hooks are introduced and that all changed the way React was working in the earlier times and transformed it to one of the most powerful JAVASCRIPT Front End library with a lot of features in it.
3. JSX(JavaScript Extensible Markup Language)
We work with HTML looking like format in the components of the React App which is called JSX. As it is markup language constituent so it looks and works similar to the HTML .
It is the basic format of the React application view that how it’s code will look when we write multiple Components of the React JS form.
4. Components In React JS
Components are the constituents of a React App where we divide the single code into multiple parts or components which help us to separate the code into multiple items and also it helps us to divide the code which helps us to re-use that component into various other main components and that helps us to save our time by saving time and also helps us to separate the code of necessary parts into new places and this avoids the inter-mixing of the code and also facilitates in much better understanding of the code by the developer and user as well. Here below you can see example of components. All the hooks and the React we need to import from ‘./react’ directory in order to make the React JS App. All the components should be having same name with the File name along with the name of Function name. So Components are used like this in it.
This Is App.js and it includes various components such as Navbar and Calculator as we have imported them in our App file so we can use their code in separated and clean manner. Below You will see the individual components we are using in it along with their code.
So This how we use the components and it is one of the most essential part of React JS.
5. React Hooks
Hooks are essential part of React as we now use Functional Components and hooks let us solve various real life problems and help us to do various tasks very easily such as change the state, render something after some other task, sharing some other information based on context so as to provide the privacy or using to tell on which web page we are rendering our information.
We will now start to discuss about various important Hooks :-
(a.) useState Hook
It is one of the most important Hook as it allows us to change the state and perform certain tasks very easily which are based on real life problems in Front Web World and hence help us in updating the information very easily and putting that value where ever we want. We will learn it by applying to a small example that will be based changing the count when we click on a button.
Here you Can see that when we click the button the state changes and it updates the count that was 0 and incremented single time by the use of useState hook. Below given is the code which tells that we created a state and then created a callback function which would update the state each time click event occurs.
const [add, setAdd] = useState(0);So this is how useState Hook functions
(b.) useEffect Hook
It is also one of the most important hook after useState as it helps to produce some side effects after we have rendered something such as JSX Form of data and we have to give some other effects so as to produce animations, fetch data from API which takes some time to fetch the data or to change some window size measurements. Here in our example we will look how to take into the actual width after every resize event that is rendered or called and how we will cleanup the useEffect Hook so as to prevent overloading of our local storage of our web page and also to prevent it’s crashing. We are also having dependency list which understands that when we need to render the useEffect Hook and that most of the times take in the state of the present hook. Below is given it’s live visual appearance how useEffect behaves.
Below given is the code of the useEffect example we discussed above.
(c.) useContext Hook
It is one of the most important hook of React which allows us to pass a certain information or text to a certain component without passing the information to all the components in the hierarchy of component tree. For example we need to privately pass the information consisting some particular information and if we need to pass the info to Component C from main file not passing that value to Component B or Component A.
We have in our main file two constants where we need to pass FirstName And LastName which are provided in form of Provider as we have imported the Context from React library and the argument passed to the createContext acts as a default value which would be passed another child component as we have exported them to component and the value provided could be used in that component and can be used any where. You would become more comfortable when you see visual example and code provided down this description.
So After Seeing the video, you can see how we changed the names in our Provider values and how it changed in The final view without effecting Component B And Component A. So this is the power of useContext Hook in React JS.
(d.) useRef Hook
It is used in Uncontrolled Forms which are similar to simple forms and input tags which we use in HTML where the form is handled by DOM of HTML and it changes it’s value on it’s own and their is no need of event handler as of in Controlled forms where we use onChange event handler to access it’s value and in Uncontrolled Forms we can easily access the value by taking in the reference(ref) of that value in the input tag. It would be more clear by seeing the visual view and seeing the code where in line below the input tag, we can see the value we entered in the input tag.
So now above as reference you can see how this all functions as we can do same with Controlled Forms but we have used here useRef Hook to illustrate the way how Uncontrolled Forms functions in React JS.
(e.) useReducer Hook
In Here we discuss the useReducer Hook as an alternative to the useState Hook as it accepts a reducer of the type (state,action)=> newState and here in we take the state and an action which would be performed on clicking on something or due to some event which will occur and has a dispatch method similar to the way when we order something and then the order is dispatched after we order something. useReducer is more useful when we have more of the complex states or the state is dependent on the function of the previous state and it also helps us in saving us from callback functions and dispatch method helps in delivering the action to be performed upon the state which renders the state. Down here we will take a small example where we will click on two buttons to Increment and Decrement a particular value on onClick event and which will render this.
Here the action all depends on the type of action which also depends further on the dispatch method we are sending to the action so as to update the state which will be changed and rendered on clicking on either of the two buttons given.
(f.) Custom Hooks
One can also make the use of Custom Hooks where in we can create our own Hooks for making the code DRY(Do Not Repeat) and where we can use that particular component multiple times. Here Again We Will Take In The Example of Increment App where on clicking we get to Change the Title Of The Page and Count. Below given is the visual representation of code and code.
So here you can see how we can create Custom Hooks in React.
6. React-Router-Dom
We have been working more with Static Routing or the server-side-routing where when we click a certain link, a request is made to server and the server accepts the request and then send us the web page that we have requested. But it takes a lot of time in fetching the web page when the internet speed is not up to the mark. So here we will introduce the dynamic routing where we will be making only the client-side-routing and this will all increase the speed of our web application.
So will be using the react-router-dom which brings in the facility with it for client-side-routing. It brings with it various useful hooks which we will discuss along with Routing feature with the use of Link component of react-router-dom which increases the speed of our site and gives good user-experience. To use it, we need to Install npm package from npm. To install use below given command:
npm install react-router-dom --saveHere we will first discuss Hooks provided by react-router-dom:
(a.) useHistory Hook
This hook provides you the access of the history of our web pages we have visited. It has three functions such as push(), goForward(), goBack() which take in the link to which page we want to go and goForward() move to a next page and goBack() will move to back page respectively. It Also have location but as history is mutable so location is not preferred to be used from it. Below given is the visual representation along with code.
This is the main AppRouter.js file where all the components are used here in. Down there will be codes of all the components which we will be using along with Error Component which appears only when someone has entered any other web page whose link we have not provided.
So this is How it functions.
(b.) useLocation Hook
It is really important hook which enables us to know our present location on which web page we are and this all behaves similar to useState hook which returns a new location when we render a new page and it is really important when we are using analytics tool as provides us various page views of a web page. By taking in pathname from useLocation object we can know our path on which are currently rendering the page. Below given are the visual representation of an example where we will print location of our web page along with code.
Here You Can see after h1 heading we are printing the location after the ‘/’ and it tells further the address we are at presently. Below is given code for your reference.
So this is how it functions.
(c.) useParams Hook
It is a hook which helps us to use key value pairs which we can add after a particular URL and access it anywhere in our page and use it for any purpose and can fetch the values that a user enters in URL link provider. Anything written after /<main url>/:fname/:lname where the fname and lname are the keys through which values would be easily passed on. Below I have shown it in visual representation and along with code.
So Here you can seen how this all functions in it.
(d.) React-Router In React-Router-Dom
It is one of the most important part of Router as we have facility to perform the routing at client-side by dynamically running into the links where we can go to web page by spending only few milli-seconds and helps the user to reach the web page very early and with great speed. It has certain important components where in we use them in our App.js file to include them in it. We have BrowserRouter which takes in the routing parent component where we include Switch Component and that has advantage that it will render the first route which matches first with what we are requesting.
The Switch allows multiple Routes to be nested in the pattern and we can use them by inserting the keyword ‘exact’, which tells the Switch to take us to specified path of Route to which we want to go. In Route we are having pathname to which we want to go and which Component we want to render or show to the user when we reach at that path attribute. It would be more clear to see the visual representation and code so that how it all works in it.
So Now You can see how this all functions in React-Router
7. Running The React JS App
You Can Run The App for demo by applying or using below given commands so as to see result of your code in app.
npm run startor
npm startBy Using these commands we can run our app.
8. Deploying React JS App
You can deploy your React JS App on various platforms. Two of the most famous of them are GitHub And Netlify. I am going tell below about these two platforms for deployment.
(a.) Netlify
You can deploy your app in it by performing simple command to build the app which will create the build folder in it and by exporting that folder to Netlify will Deploy your App within few seconds. Command used in it is:
npm run build(b.) GitHub
It is also very easy to Deploy apps in GitHub as well. I have attached down the link which would help You all to Deploy Apps On GitHub.
This would help You to Deploy Apps on GitHub Very easily.
9. Using Styles By Use Of CSS In React
You can use styles by use of Internal Or External styling. Inline Styling is already explained above. Now in External Styling we would use to create styles similar as in Normal Front End Web Development and used similarly. The Styles file of CSS should be Imported in your main App.js file and need not be imported in all of the Component files. We could use it like:
import './index.css';As index.css is the file in that same folder where we are using the Component files.
So that was all from my side in this technical blog where we talked about the Use of React And basics of React from scratch which makes the Front End Web World So Beautiful and impressive in look and which has transformed the Web Development in few years.
I am ARYAN GARG, a second year student of Information Technology and pursuing my B.E/B.Tech from Dr. B.R. Ambedkar National Institute Of Technology, Jalandhar, Punjab, India.
If you like my blog, kindly like and share it on different platforms so that beginners in React JS should read it so that they can get idea about what is it and learn it by applying things in the practical manner. I have already added the code of React Examples for the reference. I have also attached the images and the videos that would be really helpful in seeing the things that are happening in reality along with the code. If someone still have any doubts, you can either contact me on various platforms given below or directly comment in this blog comment section. I will surely help you out.
You Can Connect With Me On Various Platforms For Further Discussions And Project work as I am also available for freelancing. The Profile links are given below :
- LinkedIn — https://www.linkedin.com/in/aryan-garg-661552198/
- Instagram — https://www.instagram.com/aryan_garg_08/
- Facebook — https://www.facebook.com/aryan.garg.9022662/
- GitHub — https://github.com/code08-ind
- Personal Portfolio Web Site — https://code08-ind.github.io/Portfolio_08/
You can also contact me at my email : gargaryan82000@gmail.com
Keep Coding, Keep Developing!!!
Thanks For reading this article and blog on React Development. Please like and share and comment below to express your views and I would love to hear from you about the changes I can make in my next blog. Shower Your Love !!!
