{"id":989,"date":"2021-11-10T05:05:39","date_gmt":"2021-11-10T05:05:39","guid":{"rendered":"https:\/\/www.liainfraservices.com\/kbarticles\/?post_type=tesserakb&p=989"},"modified":"2021-11-12T03:43:26","modified_gmt":"2021-11-12T03:43:26","slug":"fundamental-concepts-of-reactjs","status":"publish","type":"tesserakb","link":"https:\/\/www.liainfraservices.com\/kbarticles\/knowledgebase\/fundamental-concepts-of-reactjs\/","title":{"rendered":"Fundamental concepts of ReactJS"},"content":{"rendered":"\n

In this article, we will look into the fundamental concepts of ReactJS<\/strong> well suitable for beginners. If you are aware of HTML and JavaScript basics then React Native concepts will be easy to work with React Modules and understand different lifecycle methods. At Lia Infraservice<\/strong> we create Dynamic Websites. Become a front-end React JS developer and be a part of our tech-savvy Web App Development Company in Chennai<\/strong>.  <\/span><\/a><\/p>\n\n\n\n

Fundamental Concepts of React JS an Overview?<\/strong><\/h2>\n\n\n\n

React is an open-source, front end, JavaScript library used for building User Interfaces – UI<\/span><\/a> components. It is initially developed by Facebook for a purpose and maintained by a community of individual developers and companies. It breaks down complex UIs into small, isolated code called \u201ccomponents\u201d. <\/p>\n\n\n\n

Components are independent and reusable. They can either be JavaScript functions or classes.<\/p>\n\n\n\n

The Role of React JS:<\/strong><\/h3>\n\n\n\n

Whenever there is a change in any part of the application due to real-time updates or user input, that part only is loaded asynchronously to reflect the updated state. It means the respective – “Document Object Model” (DOM) container should be updated periodically to reflect the changes to the client. <\/p>\n\n\n\n

For Example:<\/strong> <\/h4>\n\n\n\n

When you add a new comment in Facebook, it makes an asynchronous request to the server to save this comment in the database, and update the DOM to reflect the current state.<\/p>\n\n\n\n

React is not a framework. It is just a library developed by Facebook to solve some problems that we were facing earlier.<\/p>\n\n\n\n

Build your React App With Lia Infraservices<\/a><\/strong> – Leading Mobile App Development Company in Chennai<\/a>.<\/span><\/strong><\/p><\/blockquote>\n\n\n\n

1. How to Create a Simple React Application?<\/h2>\n\n\n\n

Open terminal in visual studio code : <\/h4>\n\n\n\n

Install create-react-app by running this command in your terminal:<\/h4>\n\n\n\n

C:\\Users\\LIA>npm install -g create-react-app<\/p>\n\n\n\n

Run this command to create a React application : <\/h4>\n\n\n\n

C:\\Users\\LIA>npx create-react-app myfirstreact<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Run this command to execute the React application:<\/h4>\n\n\n\n

C:\\Users\\LIA>npm start<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Hello world Example:<\/strong><\/h3>\n\n\n\n

Change the code of App.js from src folder<\/p>\n\n\n\n

import React, { Component } from ‘react’;<\/p>\n\n\n\n

\/\/import ‘.\/App.css’;<\/p>\n\n\n\n

class App extends Component {<\/p>\n\n\n\n

  render() {<\/p>\n\n\n\n

    return (<\/p>\n\n\n\n

      <div className=”App”><\/p>\n\n\n\n

      <h1>Hello World!<\/h1><\/p>\n\n\n\n

      <\/div><\/p>\n\n\n\n

    );<\/p>\n\n\n\n

  }<\/p>\n\n\n\n

}<\/p>\n\n\n\n

export default App;<\/p>\n\n\n\n

Output:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Note:<\/strong> If u did not use <\/p>\n\n\n\n

export default App;<\/p>\n\n\n\n

It returns an error<\/strong> <\/p><\/blockquote><\/figure>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

2. Folder structure:<\/strong><\/h2>\n\n\n\n
Refer :<\/strong> ReactJS Tutori<\/span>al - 3 - Folder Structure<\/a><\/pre>\n\n\n\n
What is await in react?<\/strong><\/h3>\n\n\n\n
The await<\/strong> operator is used to wait for a Promise. It can only be used inside an async function. The keyword async<\/strong> is used<\/strong> to make a function asynchronous<\/strong>. The await<\/strong> keyword will ask the execution to wait until the defined task gets executed.<\/p>\n\n\n\n
Javascript Hoisting:<\/strong><\/h4>\n\n\n\n
Hoisting is the default behaviour of moving all the declarations at the top of the scope before code execution.<\/p>\n\n\n\n
Ex:<\/strong><\/p>\n\n\n\n
\n
\n
\n
function catName(name) {<\/p>\n\n\n\n
  console.log(“My cat’s name is ” + name);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
catName(“Tiger”);<\/p>\n\n\n\n
Or <\/p>\n\n\n\n
catName(“Tiger”);<\/p>\n\n\n\n
function catName(name) {<\/p>\n\n\n\n
  console.log(“My cat’s name is ” + name);<\/p>\n\n\n\n
}<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
Call function using before or after declaration Does not return any error, because of hoisting<\/p>\n\n\n\n
But, call before function Expression returns error <\/p>\n\n\n\n
For an example:<\/strong><\/p>\n\n\n\n
\n
\n
\n
catName(“Tiger”); \/\/ Returns undefined, as only declaration was hoisted, no initialization has happened at this stage<\/p>\n\n\n\n
Let catName = function(name) {<\/p>\n\n\n\n
  console.log(“My cat’s name is ” + name);<\/p>\n\n\n\n
}<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
Var, let and const variables:<\/strong><\/h2>\n\n\n\n
var declarations are globally scoped or function scoped while let and const are block-scoped. var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared. They are all hoisted to the top of their scope.<\/p>\n\n\n\n
Component<\/strong>:<\/h4>\n\n\n\n