React Core Concept, Boost Your React Knowledge
Virtual-Dom
Here is that Virtual DOM Example
Virtual DOM Compare New Changes Browser DOM, While Compare, is Done Virtual DOM Check Where Are Changes. Then Virtual Dom And Browser DOM Check Equal Equal. And Set always New Changes Browser DOM. Virtual DOM Representation of the real DOM. When state changes occur, the virtual DOM is updated and the previous and current version of virtual DOM is compared. This is called diffing algorithm. Then virtual DOM sends a batch update to the real DOM to update the UI.
JSX
It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. JSX produces React “elements”
JSX Example:
const element = <h1>Hello, world!</h1>;
You can put any valid JavaScript expression inside the curly braces in JSX. For example, 2 + 2 , user. firstName , or formatName(user) are all valid JavaScript expressions. In the example below, we embed the result of calling a JavaScript function, formatName(user) , into an <h1> element.
Example With JSX :
const myelement = <h1>I Love JSX!</h1>;
ReactDOM.render(myelement, document.getElementById('root'));
Example Without JSX :
const myelement = React.createElement('h1', {}, 'I do not use JSX!')
ReactDOM.render(myelement, document.getElementById('root'));
React Components:
Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render() function. Components come in two types, Class components and Function components, in this tutorial we will concentrate on Class components.
React Class Component Example:
React Functional Component Example:
PropTypes
A React. js application is created by lots of components. These components get many specific attributes, just like an HTML tag does. … React has a solution for this and it's called propTypes. PropTypes defines the type and which props are required.
PropTypes exports a range of validators that can be used to make sure the data you receive is valid. In this example, we’re using PropTypes. string. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. For performance reasons, propTypes is only checked in development mode.
PropType Code Example: npm install — save prop-type
React Important Think You Need To Know.
These are the concepts you should know in React. js (after you learn the basics)
- The Component Lifecycle. By far the most important concept on this list is understanding the component lifecycle. …
- Higher-Order Components. …
- React State and setState() …
- React Context. …
- Stay up to date with React!