React基础讲解

Posted 2021-08-28 stay_少年与梦

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React基础讲解相关的知识，希望对你有一定的参考价值。

前言

今天我们一起来学习react的内容，简单的学习一下。

一、React是什么？

是一个用于构建用户界面的 javascript 库。

二、如何使用

1.基于浏览器的模式

React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件

React.createElement(type,props,children);
ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染
- ReactDOM.render(element, container[, callback])
  - element：要渲染的内容
  - container：要渲染的内容存放容器
  - callback：渲染后的回调函数

babel

babel-standalone.js：在浏览器中处理 JSX

react.development.js提供了核心代码
react-dom.development.js提供了与浏览器交互的Dom功能

代码如下：

<!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>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>

    <script>


/* 
`react.development.js 提供了核心代码
react-dom.development.js提供了与浏览器交互的Dom功能


	基础格式
	
*/
        ReactDOM.render(
            "今天天气",
            document.querySelector("#root"),
            ()=>{
                console.log("渲染成功");
            }
        );
    </script>
</body>
</html>

2.利用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>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>

    <script>
        let h1 = React.createElement("h1",null,"我是一个标题");
        let p = React.createElement("p",null,"我是一个段落标签");
        let el= React.createElement("header",{id:"header"},h1,p);
        ReactDOM.render(
            el,
            document.querySelector("#root"),
            ()=>{
                console.log("渲染成功");
            }
        );
    </script>
</body>
</html>

3.JSX

是一个基于 JavaScript + XML 的一个扩展语法

它可以作为值使用
它并不是字符串
它也不是HTML
它可以配合JavaScript 表达式一起使用

不可以和js语句一起使用
所有的标签名必须是小写
所有标签必须闭合，哪怕单标签

class 要写做 className
style 接收的是一个对象，并不是字符串
每次只能输出一个标签（或者说必须要有一个容器）
唯一父级唯一容器

JSX 使用注意事项

必须有,且只有一个顶层的包含元素 - React.Fragment
JSX 不是html，很多属性在编写时不一样
- className
- style
列表渲染时，必须有 key 值
在 jsx 所有标签必须闭合
组件的首字母一定大写，标签一定要小写

<!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>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">
        /* 
         JSX ：javascript 和 xml的扩展语法
         */
        ReactDOM.render(
            <header>
                <h1> hello react</h1>
                <p>利用JSX来渲染</p>
            </header>,
            document.querySelector("#root"),
            () => {
                console.log("渲染成功");
            }
        );
    </script>
</body>

</html>

4.插值表达式

在 JXS 中可以使用 {表达式} 嵌入表达式

表达式：产生值的一组代码的集合

变量
算术运算
函数调用
……

注意：分清楚表达式与语句的区别，if、for、while 这些都是语句，JSX 不支持语句

代码示例

<!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>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">

    // 各种数据的插值状态
        // let str = "天气" //原样输出
        // let str = 1; //原样输出
        // let str = false; //不输出
        // let str = undefined;//不输出
        // let str = null;//不输出
        // let str = ["内容1","内容2"];//去掉，原样输出
        let str ={

            name: "拜拜",
            age:18
        } //报错  要单独去找某个属性
        ReactDOM.render(
            <header>
                <h1>  {str.name}不错</h1>
                <p>利用JSX来渲染</p>
            </header>,
            document.querySelector("#root"),
            () => {
                console.log("渲染成功");
            }
        );
    </script>
</body>

</html>

5.条件输出

输出数据类型

字符串、数字：原样输出
布尔值、空、未定义会被忽略

列表渲染

数组
对象
扩展：虚拟 DOM （virtualDOM）和 diff

条件渲染

三元运算符
与或运算符

<!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>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">

    // 条件输出
        // ?: 类似 if...else
        // || 类似 if(!) 取反
        // && 类似 if()
        ReactDOM.render(
            <header>
                <h1>{true?"成立":"不成立"}</h1>
                <p>{false||"利用JSX来渲染"}</p>
                <div>{true&&"正确"}</div>
            </header>,
            document.querySelector("#root"),
            () => {
                console.log("渲染成功");
            }
        );
    </script>
</body>

</html>

6.列表循环

<!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>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
</head>

<body>
    <div id="root">

        <!-- <ul v-for="item in arr">
            <li>{{item}}</li>
        </ul> -->
    </div>

    <script type="text/babel">

        let data =[
            "内容1",
            "内容2",
            "内容3",
            "ddd"
        ]
        
        function toData(){
            let arr=[];
            data.forEach(item=>{
                return arr.push(<li>{item}</li>)
            })

            return arr;
        }
        // ReactDOM.render(
        //     <header>
        //         {toData()}
        //     </header>,
        //     document.querySelector("#root"),
        //     () => {
        //         console.log("渲染成功");
        //     }
        // );
        ReactDOM.render(
            <ul>
                {
                    data.map(item=>{
                    return<li>{item}</li>
            }) 
                }
            </ul>,
            document.querySelector("#root"),
            () => {
                console.log("渲染成功");
            }
        );
    </script>
</body>

</html>

基于自动化的集成环境模式 - create-react-app - 脚手架

通过前面 script 的方式虽然也能完成 React.js 的开发，但是有一个现在前端很重要的特性 - 模块化，无法使用。

Create React App 是一个使用 Node.js 编写的命令行工具，通过它可以帮助我们快速生成 React.js 项目，并内置了 Babel、Webpack 等工具帮助我们实现 ES6+ 解析、模块化解析打包，也就是通过它，我们可以使用模块化以及 ES6+ 等更新的一些特性。同时它还内置 ESLint 语法检测工具、Jest 单元测试工具。还有一个基于 Node.js 的 WebServer 帮助我们更好的在本地预览应用，其实还有更多。

安装与使用

通过 npm、yarn、npx 都可以

安装

npm

npm i -g create-react-app

yarn

yarn global add create-react-app

使用

安装完成以后，即可使用 create-react-app 命令

create-react-app <项目名称>

或者通过 npx 的方式

npx

npx create-react-app <项目名称>

项目目录结构说明

运行命令以后，就会在运行命令所在目录下面创建一个以项目名称为名的目录

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

命令脚本

create-react-app 同时也提供了其它一些命令来帮助我们进行开发

npm start

启动一个内置的本地 WebServer，根目录映射到 ‘./public’ 目录，默认端口：3000

类式组件

组件类必须继承 React.Component
组件类必须有 render 方法

代码示例

import React,{Component} from "react";
import './FriendList.css';
import data from './data';
import Dl from './dL'
export default class Friendlist extends Component {
    render(){
        return (
            <div className="friend-list">
              {
                Object.keys(data).map(item=>{
                    return (<Dl
                        name = {item}
                        value ={data[item]}
                    />)
                })
              }
            </div>
        )
    }
}

props 和 state

props 父组件传递过来的参数
state 组件自身状态
- setState
- 多个 setState 合并‘

import React,{Component} from "react";

export React基础讲解
 极智开发 | 讲解 React 组件三大属性之一：state
 极智开发 | 讲解 React 组件三大属性之三：refs
 极智开发 | 讲解 React 组件三大属性之二：props
 [vscode]--HTML代码片段（基础版，reactvuejquery）
 关于react16.4

React基础讲解

文章目录

前言

一、React是什么？

二、如何使用

1.基于浏览器的模式

babel

代码如下：

2.利用react 创建视图

3.JSX

4.插值表达式

代码示例

5.条件输出

输出数据类型

列表渲染

条件渲染

6.列表循环

基于自动化的集成环境模式 - create-react-app - 脚手架

安装与使用

安装

yarn

使用

npx

项目目录结构说明

命令脚本

npm start

类式组件

代码示例

props 和 state