当前位置：首页 > news >正文

零基础学习React(Html)

news 来源：原创 2024/5/8 4:57:11

一切以官方文档为准

创建一个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>初学React</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

添加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>初学React</title>
    <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" /><!--css文件导入-->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/><!--ico图标-->
  </head>
<body>
    <div id="app"></div>
</body>
<script type="text/babel" src="./main.js"></script><!--自己的文件-->
</html>

创建一个 React 组件

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

创建虚拟DOM

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

ReactDOM.render(VDOM,document.getElementById("app"))

JSX语法

id写法

const e = React.createElement;

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

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

语句中写法

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"))

内联样式style

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

ReactDOM.render(VDOM,document.getElementById("app"))

第一个{}表示是要写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"))

要区分: (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"))

但是我们没有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"))