Table of Contents
What is the difference between react and reactdom
Home Web Front-end Front-end Q&A What is the difference between react and reactdom

What is the difference between react and reactdom

Apr 27, 2022 am 10:26 AM
react

The difference between react and reactdom is: ReactDom only does operations related to the browser or DOM, such as the "ReactDOM.findDOMNode()" operation; while react is responsible for related operations other than the browser and DOM, and ReactDom is Part of React.

What is the difference between react and reactdom

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What is the difference between react and reactdom

ReactDom only does operations related to the browser or DOM, such as: ReactDOM.render() and ReactDOM.findDOMNode(). If it is server-side rendering, you can use ReactDOM.renderToString(). React can not only deal with web pages through ReactDOM, but can also be used in server-side SSR, mobile-side ReactNative and desktop-side Electron.

React did not have ReactDOM before v0.14, and all functions were included in React. Starting from v0.14 (2015-10), React was split into React and ReactDOM. Why separate React and ReactDOM? Because of ReactNative. React only contains the core parts common to Web and Mobile. Those responsible for DOM operations are divided into ReactDOM, and those responsible for Mobile are included in ReactNative.

ReactDom is part of React. ReactDOM is the glue between React and DOM. It is generally used to define a single component, or used in conjunction with ReactDOM.findDOMNode(). What's more, the ReactDOM package already allows developers to remove non-essential code added by the React package and move it to a more suitable repository.

e.g:

Web side React code

import React from 'react';
import ReactDOM from 'react-dom';
const App = () => (
  <div>
  <h1>Hello React</h1>
  </div>
 )
ReactDom.render(<App/>, document.getElementById('root'));
Copy after login

Mobile side ReactNative code:

import React from 'react';
import {Text, View} from 'react-native';
const WelcomeScreen = () => (
  <View>
  <Text>Hello ReactNative</Text>
  </View>
 );
Copy after login

The same thing is that they all need to import React from 'react'.

And Web applications need to import ReactDOM from 'react-dom';

Mobile applications need to import {Text, View} from 'react-native'

Recommended learning: " react video tutorial

The above is the detailed content of What is the difference between react and reactdom. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to build a real-time chat app with React and WebSocket How to build a real-time chat app with React and WebSocket Sep 26, 2023 pm 07:46 PM

How to build a real-time chat app with React and WebSocket

Guide to React front-end and back-end separation: How to achieve decoupling and independent deployment of front-end and back-end Guide to React front-end and back-end separation: How to achieve decoupling and independent deployment of front-end and back-end Sep 28, 2023 am 10:48 AM

Guide to React front-end and back-end separation: How to achieve decoupling and independent deployment of front-end and back-end

How to build simple and easy-to-use web applications with React and Flask How to build simple and easy-to-use web applications with React and Flask Sep 27, 2023 am 11:09 AM

How to build simple and easy-to-use web applications with React and Flask

How to build a reliable messaging app with React and RabbitMQ How to build a reliable messaging app with React and RabbitMQ Sep 28, 2023 pm 08:24 PM

How to build a reliable messaging app with React and RabbitMQ

React code debugging guide: How to quickly locate and solve front-end bugs React code debugging guide: How to quickly locate and solve front-end bugs Sep 26, 2023 pm 02:25 PM

React code debugging guide: How to quickly locate and solve front-end bugs

How to build a fast data analysis application using React and Google BigQuery How to build a fast data analysis application using React and Google BigQuery Sep 26, 2023 pm 06:12 PM

How to build a fast data analysis application using React and Google BigQuery

React Router User Guide: How to implement front-end routing control React Router User Guide: How to implement front-end routing control Sep 29, 2023 pm 05:45 PM

React Router User Guide: How to implement front-end routing control

React responsive design guide: How to achieve adaptive front-end layout effects React responsive design guide: How to achieve adaptive front-end layout effects Sep 26, 2023 am 11:34 AM

React responsive design guide: How to achieve adaptive front-end layout effects

See all articles