React 了解React的基本使用_了解react基本-优快云博客

本文链接：https://blog.youkuaiyun.com/Sillydreamboy/article/details/118698926

React基本使用

1 特点

声明式设计------采用声明范式，可以轻松描述应用。
高效------React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活------可以与已知的库或框架很好地配合。
JSX------JSX 是 JavaScript 语法的扩展。
组件
单向响应的数据流------实现了单向响应的数据流，从而减少了重复代码。

2 安装

需要三个库： react.development.min.js 、react-dom.development.min.js 和 babel.min.js

react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 将 ES6 代码转为 ES5 代码。Babel 内嵌了对 JSX 的支持。

npm install react react-dom

3 基本构建方法

两个方法用于快速构建一个react示例

React.createElement()
- 三个参数：
  1. 参数一：元素名称
  2. 参数二：元素属性
  3. 参数三：元素子节点
ReactDOM.render()
- 两个参数
  1. 参数一：要渲染的react元素
  2. 参数二：挂载点

步骤：

引入JS文件
创建react元素
渲染react元素

<!-- 1、引入js文件 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
  <div id="box"></div>
  <script>
    // 2、创建react元素
    const app = React.createElement(
      'h1',
      {title:'我是标题'},
      "一级标题",
      React.createElement('i',null,'子节点i标签')
    )
    // 3、挂载并渲染react元素
    ReactDOM.render(app,document.getElementById('box'))
  </script>
</body>

4 React脚手架

初始化项目

//方式一
npx create-react-app my-app
//方式二
npm init react-app my-app
//方式三
yarn create react-app my-app

启动项目
```
npm start
```

引入react

import React from 'react'
import ReactDOM from 'react-dom'