React

React 是什么？

一个用于构建用户界面的 JavaScript 库

命令式编程 和 声明式编程

• 告诉计算机怎么做（How） - 过程
• 告诉计算机我们要什么（What） - 结果

如何使用 React

基于浏览器的模式

• React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件
  • React.createElement(type,props,children);

 // 2.利用React创建视图
        let h1 = React.createElement("h1",null,"我是一个标题");
        let div = React.createElement("div",null,"我是一个div");
        let el =  React.createElement(
                "header",
                {id:"header"},
                h1,
                div
        );                 
        ReactDOM.render(
            el,
            // React.createElement("h1",null,"我是一个标题"),
            document.querySelector("#box"), 
            ()=>{
                console.log("渲染成功")
             }   
        );   

• ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染
  • ReactDOM.render(element, container,callback)
    • element：要渲染的内容
    • container：要渲染的内容存放容器
    • callback：渲染后的回调函数，可选内容

实例

• 1.引入

    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>

• 2.容器

 <div id="box"></div>

• 3.渲染

 ReactDOM.render(
           "参数1：渲染的内容",
            document.querySelector("#box"), //参数2：容器
             ()=>{
                console.log("渲染成功")     //参数3：可选
           }
        )

babel

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

JSX

JSX 是一个基于 JavaScript + XML 的一个扩展语法，注意事项：

• 它可以作为值使用
• 它并不是字符串
• 它也不是HTML
• 它可以配合JS 表达式一起使用
• 它不可以和JS语句一起使用
• 所有的标签名必须是小写
• 所有的标签必须闭合，哪怕单标签

1.引入

    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <!-- 1.引入 -->
    <script src="js/babel.js"></script>

2.容器

<div id="box"></div>

3.设置type=“text/babel”

<script type="text/babel">                      
        ReactDOM.render(
            <header>
                <h1>标题</h1>
                <div>利用JSX来渲染</div>
            </header>,
            // React.createElement("h1",null,"我是一个标题"),
            document.querySelector("#box"), 
            ()=>{
                console.log("渲染成功")
             }   
        );
    </script>

• class要写做className

• style 接收的是一个对象，并不是字符串,style的第一个花括号代表插值，第二个花括号代表对象

• 每次只能输出一个标签（或者说必须要有一个容器）

 <script  type="text/babel">
      let style = {
            width:'200px',
            height:'200px',
            background:'red'
        }
        ReactDOM.render(
            // <div>
            //     <div className="bt" style={{width:'200px'}}></div>
            // </div>,
            <div>
                <div className="bt" style={style}></div>
            </div>,
            document.querySelector("#box"),

        )
    </script>

插值表达式

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

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

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

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

各种类型内容在插值中的使用

• 注释
  {/注释/}
  {/*
  多行注释
  */}

输出数据类型

• 字符串、数字：原样输出
• 布尔值 : 不输出
• 数组 ：去掉逗号，原样输出
• 对象：没办法直接使用,需要去对象下取某一个属性

<script type="text/babel">
let data = {
            name:"姓名",
            age:18
        };
        ReactDOM.render(
            // 3.内容
            <header>                
                <h1>标题 {data.name}</h1>  
                <div>利用JSX来渲染</div>
            </header>,
            // React.createElement("h1",null,"我是一个标题"),
            document.querySelector("#box"), 
            ()=>{
                console.log("渲染成功")
             }   
        );
    </script>

列表渲染

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

<script type="text/babel">
        let data = [
            "内容1",
            "内容2",
            "内容3",
        ] 
        // function Data(){
        //     let arr = [];
        //     data.forEach(item=>{
        //        arr.push(<li>{item}</li>) 
        //     });
        //     return arr;
        // }                                                           
        ReactDOM.render(
            // 3.内容
            <ul>                
                 {
                    data.map(item=>{
                        return <li>{item}</li>
                    })
                 }
            </ul>,
            document.querySelector("#box"), 
            ()=>{
                console.log("渲染成功")
             }   
        );
    </script>

条件渲染

• 三元运算符(? : ) : 类似 if…else
• 与运算符（&&）：类似 if()
• 或运算符（|| ）：类似 if(!) 取反

 <script type="text/babel">                                                             
        ReactDOM.render(
            // 3.内容
            <header>                
                <h1>标题 {true?"成立":"不成立"}</h1>  
                <div>{false || "利用JSX来渲染"}</div>
                <div>{true&&"正确"}</div>
            </header>,
            // React.createElement("h1",null,"我是一个标题"),
            document.querySelector("#box"), 
            ()=>{
                console.log("渲染成功")
             }   
        );
    </script> 

在属性上使用 表达式

JSX 中的表达式也可以使用在属性上，但是使用的时候需要注意

• 当在属性中使用 {} 的时候，不要使用引号包含

基于自动化的集成环境模式 - 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 <项目名称>

项目目录结构说明

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

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

npm run test

运行 Jest 测试

npm run build

打包应用（准备上线）

组件

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

函数式组件

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

类式组件

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

// 类式组件写法的必要条件
import React, {Component} from 'react';
import FriendList from './FriendList';

// 1.组件类必须继承 React.Component
class App extends Component{
  // 2.组件类必须有 render 方法
    render(){
      // 3.render方法的return后定义组件的内容
       return (<div><FriendList /></div>)
    }
}
export default App;