react 入门-创建元素_react 动态创建div_teamlet的博客

二、Element和Dom的对比

1、Html Element

页面的结构是由Html Element构造的。

<h1>这是个标题</h1>
<div>点击获取帮助</div>

h1和div都是Html Element。

2、Html Dom

在浏览器中DOM是Document Object Model (DOM) 的简写，通过document对象操作 html element，如var element = document.createElement (“div”);

3、React Element

React库提供了创建React Element的API，如下面创建一个简单的 React Element

React.createElement("h1", null, "Hello World")

或者为element添加属性：

React.createElement("h1",
{id: "header1", 'data-type': "title"}, "Hello World")

4、React Dom

React Dom操作的是React element，React Element实际上是 javascript 的 object。

通过ReactDom可以将React Element在浏览器中渲染出来。

ReactDOM.render(
        sayHello,
        document.getElementById('react-container')
				思想在react的世界里，都是状态变更（数据变更）来驱动dom变化，动态添加dom不像以前用jquery一样append一个<li>或者一个<td> 这样了，而是通过装载<li> 或者<td> 数据数组[]来动态添加dom，下面的例子实现使用了antd的组件库 
参考：https://ant.design/components/form-cn/#components-form-demo-dynami
				见贤思齐焉，见不贤内自省
首先我们需要有一个数据结构，首先需要是一个数组，当然字段都可以自己定义，我这里没按照规范起名。
核心在于将数据整理好，字段梳理清楚，将state中用到的字段动态插入，提醒必填项也要动态遍历。
   let stateOptions = [{
                value: 'name',
                title: '允许传送',
                type: 'inp',
                isrequird: 
函数组件∶使用 JS 的函数（或箭头函数)创建的组件
函数组件必须有返回值，表示该组件的结构，如果返回值为 null，表示不渲染任何内容
组件名称必须以大写字母开头，React 据此区分组件和普通的 React 元素
使用 函数名 作为组件标签名
function Hello() {
  return (
    <div>这是我的第一个函数组件</div>
// 使用箭头函数创建组件
// const Hello = () => <d
				react开发需要引入的三个文件包
官网也有，但不可以直接下载，这里我将准备好的三个js文件（babel.min.js、react.development.js、react-dom.development.js）分享出来，供大家学习及使用。
react官网地址,可以自行查看。
下载地址：点击下载
https://reactjs.org/docs/getting-started.html 
https://react.docschina.org/ 
https://www.bootcdn.cn/
常用三个文件
//react 核心库 [必要]
react.development.js
&amp;lt;script src=&quot;https://cdn.bootcss.com/re...
				使用react开发网页的话，我们难免会下载两个包，一个是react，一个是react-dom，其中react是react的核心代码。react-dom 包提供了 DOM 特定的方法，可以在你的应用程序的顶层使用，如果你需要的话，也可以作为 React模型 之外的特殊操作DOM的接口。 但大多数组件应该不需要使用这个模块。
但是这个中文解释就跟没解释一样，下面参考geeksforgeeks
we all know that reactJS is a library to build active user i
        1 => println!("one"),
        2 | 3 | 5 | 7 | 11 => println!("prime: {}", x),
        13..=19 => println!("teen: {}", x),
        _ => println!("other"),
[/code]
                从PSP到TSP再到CMM
                    weixin_46916797: 
                    TSP的英文有点问题