React Some important topics about DOM and Virtual DOM
1.React Virtual DOM: React is most popular frameworks in JavaScript. It creates
User interface (UI) in a efficient way using declarative code. Raect is more fast than Vanila javascript. You can use it to help build single page applications and mobile apps.
How react DOM works that is explain the in following image:
In the image , you can see react makes a Virtual DOM along with browser DOM .when any state is changed that makes diff algorithm which is easy to render the state .
2.React Fundamentals Core concept:
(a):Declarative code: React works in declarative code .To understand declarative code
the following image :
Here , That’s because each line of code declares what each element of the app is.
(b).React Component: React is component based. Every component is
reusable UIS that allows to divide into different blocks so that they can work independently of each other. Components accept an arbitrary input with data (a prop) and return a React element to declare what should appear on screen. They can interact with other components via props to create a complex UI.
©.State Management :
When you build a React application, you’re assembling a bunch of components to make a tree of components starting at your <App /> and ending at your <input />s, <div />s and <button />s. You don’t manage all of the low-level composite components that your application renders in one central location. Instead, you let each individual component manage that and it ends up being a really effective way to build your UI. You can do this with your state as well, and it’s very likely that you do today:
function Counter() {
const [count, setCount] = React.useState(0)
const increment = () => setCount(c => c + 1)
return <button onClick={increment}>{count}</button>
}
function App() {
return <Counter />
}
3.Optimizing Performance:
Three are several ways to level up your web applications is as belows :
a. Use the Production Build: at first, to make sure you have to text with minified production build . you should make sure to use the production version when you deploy the app.
b. Create react App: If your project is built with Create React App, run:npm run build that help to build /folder of your project.
c. Single-File Builds: We offer production-ready versions of React and React DOM as single files: <script src=”https://unpkg.com/react@17/umd/react.production.min.js"></script>
d. <script src=”https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
e. Browserify: for efficient browserify you can build a few plugin:
# If you use npm
npm install — save-dev envify terser uglifyify
# If you use Yarn
yarn add — dev envify terser uglifyify
4.React JSX:
JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.
import React from ‘react’;
const componentName = () => {
return (
<div>
<h3>Hellow world </h3>
</div>
);
};
export default componentName;
Here, hellow world looks like html but it is JSX .that is synthetic sugar .You can play with like a HTML.
5. Conditional rendering:
By condition rendering, you can manipulate the state of the components. There are
Several conditional method whereas ternary operator is one of them.
One of example is here:
React.createClass({
getInitialState () {
return {
hideTodos: true
}
},
render () {
return (
<div>
{
hideTodos ? ‘Sorry there is no data’ : <TodoList />
}
</div>
)
}
})
6. React default Props: defaultProps can be defined as a property on the component class itself, to set the default props for the class. This is used for undefined props, but not for null props. React components take inputs in the props argument.
// Functional component
function CatComponent(props) {
return <div>{props.catName} Cat</div>
}
This is passed down from the Parent component.
// Functional component
function CatsComponent() {
return <div><CatComponent catName=”Picky” /></div>
}
You see we passed in an attribute catName with value Picky, the CatComponent will pick up the attribute value from the props argument.
If we do this :
return <div><CatComponent catName=”Picky” eyeColor=”blue” age=”4" /></div>
The props argument will be:
props = {
catName: “Picky”,
eyeColor: “blue”,
age: “4”
}
The parent component doesn’t pass all the attributes the child component renders.
Sure we will see undefined display in place of the props not sent by the parent component. To solve this problem, defaultProps is a property in React component used to set default values for the props argument. It will be changed if the prop property is passed.
Using ES6 class, we will define a static property named defaultProps
class ReactComp extends React.Component {}
ReactComp.defaultProps = {}
7. React’s tree reconciliation:
Reconciliation is the process through which React updates the DOM. When a component’s state changes, React has to calculate if it is necessary to update the DOM. It does this by creating a virtual DOM and comparing it with the current DOM. In this context, the virtual DOM will contain the new state of the component. That process made react popularity .here is some reasons to gain popularity :
a. React basically acts like your agent who will do the communication with the DOM on your behalf.
b. React also gives opportunity to run android and ios form mobile users.
c. React also powers other heavily used web applications like Netflix, Twitter, Airbnb, and many more.
8. Understanding React Component:
Components are the heart and soul of React. Most simply component is just a function that accept some properties and return a UI element.
Components take raw data and render it as HTML in the DOM. It describes what to render. They utilize properties (props for short) and states which contribute to this raw data. Both props and states are plain Javascript objects.
There are three ways to create a component.
A) React traditionally provided the React.createClass method to create component classes (its deprecated now).
B) Using the ES6 syntax with extends React.Component, which extends the Component class instead of calling React.createClass.
C) And the third way, is creating the React Stateless Functional Components.
9. How rendering works:
Along with life, death, fate, and taxes, React’s rendering behavior is one of the greatest truths and mysteries in life “by Ankush THAKUR”
We all begin learning React by writing (these days, functional) components that return something called JSX. We also understand that this JSX is somehow converted into actual HTML DOM elements that show up on the page. The pages update as the state updates, the routes change as expected, and all is fine. But this view of how React works is naive and a source of many problems.
10. React concepts: declarative:
You’ll run across articles describing React as a declarative approach to building UIs.
React made its “declarative approach” quite popular and upfront so it permeated the frontend world along with React.
It’s really not a new concept, but React took building UIs a lot more declaratively than with HTML templates:
you can build Web interfaces without even touching the DOM directly you can have an event system without having to interact with the actual DOM Events.The opposite of declarative is imperative. A common example of an imperative approach is looking up elements in the DOM using jQuery or DOM events. You tell the browser exactly what to do, instead of telling it what you need.
The React declarative approach abstracts that for us. We just tell React we want a component to be rendered in a specific way, and we never have to interact with the DOM to reference it later