React基础入门

2024-02-22 12:47:34

React基础

一.React 是什么？

一个用于构建用户界面的 JavaScript 库
中文手册：https://react.docschina.org/

二.声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。
以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

三.组件化

构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。
由于组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并保持状态与 DOM 分离。

四.React的特点

1.声明式编码
2.组件化编码
3.React Native 编写原生应用
4.高效（优秀的Diffing算法）

五.如何使用 React

基于浏览器的模式

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

六.React基本使用

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

第一种使用

<!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 crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        ReactDOM.render(
            React.createElement("h1",null,"哈哈哈"),
            document.querySelector("#root"),
            ()=>{
                console.log("渲染成功")
            }
        )
    </script>
</body>
</html>

第二种React创建视图

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

七.babel

babel-standalone.js：在浏览器中处理 JSX
https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js

八.JSX

什么是JSX?

全称: JavaScript XML
JSX 是一个基于 JavaScript + XML 的一个扩展语法
- 它可以作为值使用
- 它并不是字符串
- 它也不是HTML
- 它可以配合JavaScript 表达式一起使用

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

        ReactDOM.render(
            <header>
                <h1>hello react</h1>
                <p>利用JSX来渲染</p>
            </header>,
            document.querySelector("#root"), () => {
                console.log("渲染成功");
            }
        );
    </script>
</body>

</html>

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

JSX的注意事项

JSX 基于javaScript 和 Xml 的扩展语法
- 可以作为值使用
- 它不是字符串
- 它不是html
- 它可以配合js 表达式一起使用
- 它不可以和Js语句一起使用
- 所有标签名必须小写
- 所有标签必须闭合哪怕单标签
- class 要写作className
- style 接收的是一个对象并不是字符串
- 每次只能输出一个标签

React为什么使用JSX?

JSX语法糖允许前端开发者使用我们最熟悉的类HTML标签语法来创建虚拟DOM在降低学习成本的同时，也提升了研发效率与研发体验。

插值表达式

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

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

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

<!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 data = "今天周一"   // 原样输出
    // let data = 1;    // 原样输出
    // let data = false    // 不输出
    // let data = undefined;    // 不输出
    // let data = null      // 不输出
    // let data = ["一","二","三"];     // 去掉, 原样输出
    let data = {
        name:"小明",
        age: 18
    }
        ReactDOM.render(
            <header>
                <h1>{data.name}</h1>
                <p>利用JSX来渲染</p>
            </header >,
            document.querySelector("#root"), () => {
                console.log("渲染成功");
            }
        );
    </script>
</body>

</html>

注意： 分清楚表达式与语句的区别，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">

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

</html>

列表循环

<!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"
        ]
        function toData() {
            let arr = [];
            data.forEach(item => {
                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 帮助我们更好的在本地预览应用，其实还有更多。

这些都通过 Create React App 帮助我们安装并配置好了，开箱即用

安装与使用

通过 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 <项目名称>

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

然后我们进入创建的项目

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

npm run test
运行 Jest 测试

npm run build

打包应用（准备上线）

组件

对具有一定独立功能的数据与方法的封装，对外暴露接口，有利于代码功能的复用，且不用担心冲突问题。

函数式组件

函数的名称就是组件的名称
函数的返回值就是组件要渲染的内容

class类式组件

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

创建一个FriendList.js组件

import React, { Component } from "react";
export default class FriendList extends Component {
  render() {
  	return (
		<div className="friend-list">
                <div className="friend-group">
                    <dt>家人</dt>
                    <dd>爸爸</dd>
                    <dd>妈妈</dd>
                </div>
                <div className="friend-group">
                    <dt>朋友</dt>
                    <dd>张三</dd>
                    <dd>李四</dd>
                    <dd>王五</dd>
                </div>
                <div className="friend-group">
                    <dt>客户</dt>
                    <dd>阿里</dd>
                    <dd>腾讯</dd>
                    <dd>头条</dd>
                </div>
            </div>
	);
  }
}

组件复用 - 数据抽取

为了提高组件的复用性，通常会把组件中的一些可变数据提取出来

let datas = {
    family: {
        title: '家人',
        list: [
            {name: '爸爸'},
            {name: '妈妈'}
        ]
    },
    friend: {
        title: '朋友',
        list: [
            {name: '张三'},
            {name: '李四'},
            {name: '王五'}
        ]
    },
    customer: {
        title: '客户',
        list: [
            {name: '阿里'},
            {name: '腾讯'},
            {name: '头条'}
        ]
    }
};

十.总结

今天学习了什么是react,react的基本使用,还有react的脚手架的搭建以及目录的介绍,和JSX语法

React是一个声明式、高效、灵活的、创建用户界面的JavaScript库

码农公寓