Insights

ReactJs is a library, not a framework and it is used for building user interfaces. ReactJs is mostly used to maintain your DOM elements, with ReactJs you can handle all the HTML DOM elements without any Javascript method like createElement()

Currently, ReactJs is the most popular library and most developers have shifted to ReactJs.

F.A.Q.s

1 .Can we create an App in ReactJs?

The answer is no, we cannot make an app in ReactJs. But if we want to make an app, we need to learn React-Native. And for a ReactJS developer, React-Native is fairly easy to learn. ReactJs is used to develop web applications.

2 .Can we use ReactJs in Angular or Ionic?

The answer is yes, we can use ReactJs in Angular or Ionic because ReactJs is a library, not a framework. The main concept here is to build the Web Application faster.

Here are some famous web apps that uses ReactJs :

If you want to start learning ReactJs, you need to know HTML, CSS, Javascript, and some ES6 concepts.

How to install ReactJs?

npx create-react-app my-app
cd my-app
npm start

Above written is a command which Installs and Runs the React App.

If you are a beginner and don’t want to install ReactJs, you can also use the ReactJs CDN, so you can skip the file structure of ReactJs projects.

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react-demo.development.js"></script>

ReactJs File Structure :

• public
  • index.html
  • robots.txt
• src
  • component
  • services
  • App.css
  • App.js
  • index.js
  • enliven-logo.svg
  • reportWebVitlas.js
  • reportWebVitlas.js
• .gitignore
• package-lock.json
• package.json

First start the code from “Hello Enliven” :

First go to your App.js file and type Below code :

import logo from './enliven.svg';
import './App.css';

function App() {
         return "Hello Enliven"
}

export default App;

After that go to your folder and C:\xampp\htdocs\reactwebapp\learning\src remove and type cmd and press enter.

You will be redirected to Command Prompt Now type npm start, wait for a minute as this may take little time at first.

Then after you see the result of message, we pass in App.js file in your default browser.

C:\xampp\htdocs\ReactWebApp\learning\src>npm start

ReactJs does not support native HTML tags, so How does ReactJs Work?

There are two main concepts in ReactJs :
(1) JSX and (2) Babel. JSL provides a use of HTML code, while Babel converts the code in Javascript.

ReactJs is based on the component, so what is a Component?

A Component is a piece of code which can be used anywhere in the project. Which eventually saves your time and you can code more.

ReactJs has mainly two components

1. Class Component
2. Function Component

Class Component : Uses Javascript ES6 Class.

import React form "react";

class App extends React.Component {
  render() {
    return <h1>Hello Enliven</h1>;
  }
}

export default App;

Function Component : Uses Javascript ES6 Function.

import React form "react";

const App = () =>{
return "Hello Enliven";
}

export default App;

In the Class Component there is life cycle, so what is a “life cycle”?

In ReactJs, you have to use Life Cycle Methods in order to manipulate DOM.

In Class Component there are three phases of life cycle :

1. Mounting
2. Updating
3. Unmounting

1. Mounting :

Mounting is something we use when we want to change or add element in DOM.

There are Four Methods in Mounting:

1. constructor()
2. componentDidMount()
3. getDerivedStateFromProps()
4. render()

2. Updating :

Updating means when your state or props updates the current value.

There are three methods in Updating :

1. componentDidUpdate()
2. shouldComponentUpdate()
3. getSnapshotBeforeUpdate()

3. Unmounting :

Unmounting is called when the component is removed or deleted from the DOM.

There is only one method in Unmounting :

1. componentWillUnmount()

There are some Hooks in the function component, so what are “hooks”

Hooks are implemented codes, faster and more efficient.

There are basic and additional hooks :

Basics Hooks :

1. useState
2. useEffect
3. useContext

Additional Hooks :

1. useReducer
2. useCallback
3. useMemo
4. useRef
5. useImperativeHandle
6. useLayoutEffect
7. useDebugValue

But the question is: “What should we use between Class Component and Function Component?”

And the answer is: Function Component is better than the Class Component, because the Function Code is easy to write and easy to understand.

Function Component uses Hooks while Class Component uses Life Cycle. So, the Function component is better than Class Component, because the “useEffect()” Hook provides the combined usage of componentDidMount() and componentDidUpdate(), both. For this reason, the Function Component is used more than Class Component.