react的基本使用

m0_63400611

于 2022-08-04 21:33:10 发布

阅读量180

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_63400611/article/details/126166695

版权

react 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

react的安装

安装命令:

npm i react react-dom

react 包是核心,提供创建元素,组件等功能
react-dom 包提供 DOM 相关功能等

在安装之前需要运行如下命令,完成对项目的初始化,生成package.json文件

npm init

React的使用

1.引入 react 和 react-dom 两个 js 文件

<script src-"./node_modules/react/umd/react.development.js"></script>
<script src-"./node_modules/react-dom/umd/react-dom.development.js"></script>

2.创建 react 元素

3. 渲染 react 元素到页面中

<script>
    const title = React.createElement('h1', null, 'Hello React')
</script>

示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="root">
      
    </div>
    
    <!-- 引入 js 文件 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <script>
      // 创建 react 元素
      //  参数一: 元素名称
      //  参数二: 元素属性
      //  参数三: 元素的子节点
      const title = React.createElement('h1', null, 'Hello React')
      
      // 渲染 react 元素
      //  参数一: 要渲染的 react 元素
      //  参数二: 挂载点
      ReactDOM.render(title, document.getElementById('root'))
    </script>
  </body>
</html>

方法说明

React.createElement()说明(了解)

// 返回值: React 元素
//  参数一: 要创建的 React 元素名称
//  参数二: 该 React 元素的属性
//  参数三及之后的参数: 该 React 元素的子节点
const el = React.createElement('h1', {
  title: '标题',
  id: '1'
}, 'Hello React',
  React.createElement('span', null, 'span子节点')
)

ReactDOM.render()说明

// 第一个参数: 要渲染的 React 元素
// 第二个参数: DOM 对象 用于指定渲染到页面中的位置
ReactDOM.render(el, document.getElementById('root'))

m0_63400611

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react的基本使用

在安装之前需要运行如下命令,完成对项目的初始化,生成package.json文件npm init。
复制链接

扫一扫

专栏目录