零基础学习React(Html)

创建一个div容器

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初学Reacttitle>
head>
<body>
    <div id="app">div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12

添加React文件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初学Reacttitle>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin>script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin>script>
    <link rel="stylesheet" href="indexCss.css" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
  head>
<body>
    <div id="app">div>
body>
<script type="text/babel" src="./main.js">script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

创建一个 React 组件

function Demo(){
return <h1>Hello World</h1>
}
ReactDOM.render(<Demo/>,document.getElementById("app"))
1
2
3
4

创建虚拟DOM

const VDOM = (
  <h1>hello word</h1>
)

ReactDOM.render(VDOM,document.getElementById("app"))
1
2
3
4
5

JSX语法

id写法

const e = React.createElement;

function Demo(){
    let hello="wo"
    return <h2 id={hello}>hello world</h2>
}

ReactDOM.render(<Demo/>,document.getElementById("app"))

1
2
3
4
5
6
7
8
9

语句中写法

const e = React.createElement;

function Demo(){
    let hello="OK"
    return <h2>hello world{hello}</h2>
}

ReactDOM.render(<Demo/>,document.getElementById("app"))

class添加样式写法
.Toggle_back{
    background-color: orange;
}
function Demo(){
    let hello="wo"
    return <h2 className="Toggle_back" id={hello}>hello world</h2>
}

ReactDOM.render(<Demo/>,document.getElementById("app"))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

内联样式style

const VDOM = (
  <h1 style={{color:'red',fontSize: '29px'}}>hello word</h1>
)

ReactDOM.render(VDOM,document.getElementById("app"))
1
2
3
4
5

第一个{}表示是要写js表达式
第二个{}表示里面的是对象

JSX语法规则

1、定义虚拟DOM时，不需要写引号
2、标签中混入js表达式时要用引号
3、样式的类名指定不要用class,用className
4、内联样式要用style={{key:value}}
5、虚拟DOM只能有一个根标签
6、标签必须闭合
7、标签首字母
- (1)若小写字母开头,则将为标签转为html中同名元素,若html中无同名元素(标签)对应的同名标签，则会报错。
- (2)若大写字母开头,react就会去渲染对应的组件，若组件没定义则会报错。

数组循环

let data = ['亚丝娜','一岐日和','叶佳瑶']
/**
 * 要区分: (js语句(代码))和(js表达式)
 *  表达式: 一表达式会产生一个值，可以放在任何一个需要值的地方
 *      下面都是表达式
 *          (1)  a(变量名)
 *          (2)  a+b
 *          (3)  demo(1)
 *          (4)  arr.map()
 */
const VDOM = (
    <div>
        <h1>Hello World</h1>
        <ul>
            {
                for(let i=0;i<data.length;i++){

                }
            }
        </ul>
    </div>
)

ReactDOM.render(<Demo/>,document.getElementById("app"))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

要区分: (js语句(代码))和(js表达式)
- 表达式: 一表达式会产生一个值，可以放在任何一个需要值的地方
  - 1、下面都是表达式
    - (1) a(变量名)
    - (2) a+b
    - (3) demo(1)
    - (4) arr.map()
    - (5) function test(){}
- 2、语句(代码)
  - 下面都是语句(代码)
    - (1) if(){}
    - (2) for(){}
    - (3) switch(){case}

let data = [1,3,5,7,9]

let result = arr.map((num/*拿到的每一个值*/)=>{
  //函数体
  return num + 1
})

console.log(result)
const x = function test(){}
所以我们得这么写:
let data = ['亚丝娜','一岐日和','叶佳瑶']

const VDOM = (
    <div>
        <h1>Hello World</h1>
        <ul>
            {
                data.map((item)=>{
                    return <li>{item}</li>
                })
            }
        </ul>
    </div>
)

ReactDOM.render(VDOM,document.getElementById("app"))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

但是我们没有key(唯一值)所以我们

let data = ['亚丝娜','一岐日和','叶佳瑶']

const VDOM = (
    <div>
        <h1>Hello World</h1>
        <ul>
            {
                data.map((item,index/*索引值*/)=>{
                    return <li key={index}>{item}</li>
                })
            }
        </ul>
    </div>
)

ReactDOM.render(VDOM,document.getElementById("app"))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

相关阅读:
Idea提升工作效率的必备技巧
 Java——AOP案例之测量业务层接口执行效率
 Vue指令v-show和v-if的区别
 MySQL数据库进阶第五篇（锁）
【Python】简单的逻辑训练题目（计算机二级练习题）
备战清华大学上机编程考试-冲刺前50%,倒数第5天
 计算机操作系统学习（六）设备管理
 cxf反向根据.net wsdl内容生成服务器端代码
 Flink 细粒度滑动窗口性能优化
 前端开发攻略---用原生JS在网页中也能实现文本转语音
原文地址：https://blog.csdn.net/yasinawolaopo/article/details/126607782