React

介绍

react就是一个框架，他相对于mvc来说只是其中的v 他适用于开发数据不断变化的大型应用程序
在中大型项目中有百分之90的公司都用React框架；是因为React是由一个一个组件拼接而成的，它是一小部分一小部分拼接的，所以它在后期便于维护
链接: 中文官网

基本使用

先创建以个html文件
引入react.js文件和dom文件（我在这里用的是网上的没有下载到本地）

    <!-- 提供 核心代码 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <!-- 提供与浏览器交互的DOM功能相当于DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

在script标签中声明 ReactDom.render函数它里面有对应的参数

  // ReactDOM.render(element, container , [callback])
  //  element：要渲染的内容
  //  container：要渲染的内容存放容器
  //  callback：渲染后的回调函数

附完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <!-- 提供 核心代码 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <!-- 提供与浏览器交互的DOM功能相当于DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <div id="root"></div>
    <script>
        // ReactDOM.render(element, container , [callback])
        //  element：要渲染的内容
        //  container：要渲染的内容存放容器
        //  callback：渲染后的回调函数 
        //第一种写法
        // ReactDOM.render(
        //     // React.createElement(type,props,children)
        //     React.createElement('h1',null,'我是一个标题') ,   
        //     document.querySelector("#root"),
        //     ()=>{
        //         console.log('成功');  
        //     }
        // )
        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>

JSX语法(语法糖)

注意事项：
它是一个基于 JavaScript + XML 的一个扩展语法
它可以作为值使用，并不是字符串，也不是HTML
它可以配合JavaScript 表达式一起使用
它不可以和js语句一起使用
所有的标签必须是闭合，包括单标签
class要写成className
style接收的是一个对象，并不是字符串
每次只能输出一个标签（或者说必须有一个容器）

JSX基本使用

使用时要规定babel类型，和引入babel文件

    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <script type='text/babel'></script>

它使用是在ReactDOM.render()函数中直接定义标签就可以

         ReactDOM.render(
             <header>
                 <h1>{data.name}</h1>
                 <p>利用jsx渲染</p>
             </header>,
             document.querySelector("#root"),
             ()=>{
                 console.log('成功');  
             }
         )

附完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <!-- 提供 核心代码 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <!-- 提供与浏览器交互的DOM功能相当于DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
         ReactDOM.render(
             <header>
                 <h1>我是标题</h1>
                 <p>我是段落</p>
             </header>,
             document.querySelector("#root"),
             ()=>{
                 console.log('成功');  
             }
         )
    </script>

  </body>
</html>

使用差值

注意点：渲染时使用的是单括号{} 不是双括号{{}}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <!-- 提供 核心代码 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <!-- 提供与浏览器交互的DOM功能相当于DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
        // 使用插值
        // let data='插值' //原样输出
        // let data=1 //原样输出
        // let data=false  //不输出
        // let data=null  //不输出
        // let data=undefined  //不输出
        // let data=['内容1','内容2']  // 去掉 ，  原样输出
         let data={
             name:'张',
             age:18
         } //对象要 .对象中的内容

        ReactDOM.render(
             <header>
                 <h1>{data.name}</h1>
                 <p>利用jsx渲染</p>
             </header>,
             document.querySelector("#root"),
             ()=>{
                 console.log('成功');  
             }
         )

    </script>

  </body>
</html>

条件渲染

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <!-- 提供 核心代码 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <!-- 提供与浏览器交互的DOM功能相当于DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
        // 条件渲染
        ReactDOM.render(
            //会输出成立 如果写成false会输出不成立
            //基本使用
            // <header>
            //     <h1>{true?'成立':'不成立'}</h1> 
            //     <p>利用jsx渲染</p>
            // </header>,
            
            // 可以规定条件
                // ？类似 if..else()
                // || 类似if(!)取反
                // && 类似if()
            <header>
                <h1>{true?'成立':'不成立'}</h1> 
                <p>{false||'我是段落'}</p>
                <p>{false&&'正确'}</p>
            </header>,
            document.querySelector("#root"),
            ()=>{
                console.log('成功');  
            }
        )
    </script>

  </body>
</html>

解决每次只能输出一个标签使用Fragment

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <!-- 提供 核心代码 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <!-- 提供与浏览器交互的DOM功能相当于DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <div id="main">
        <div id='header'></div>
        <div id='container'></div>
        <div id='root'></div>
    </div>
    <script type="text/babel">
    let style={
        width:'100px',
        height:'200px',
        backgroundColor:'green'
    }
    let {Fragment}=React
        ReactDOM.render(
            // <div>
            //     <div className='box' style={ {width:'300px',height:'400px'} }></div>
            // </div>,
            // 还可以用这种方法  style在上面定义
            <div className='box' style={style}>11</div>,

            // 用Fragment包裹可以写多个标签
            // <Fragment>
            //     <div className='box' style={style}></div>
            //     <p>我是段落</p>
            // </Fragment>,
            document.querySelector("#root"),
        )
    </script>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
  </body>
</html>

列表循环

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- 提供 核心代码 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <!-- 提供与浏览器交互的DOM功能相当于DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
    // 列表循环
    // 第一种写法
        let data=['内容1','内容2','内容3','4']
        // 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>

以上就是单文件使用React，下面我们来看一下自动化构建的React怎么使用

搭建React框架

搭建框架步骤

创建一个文件夹来存放React框架
cmd进入这个文件
安装create-react-app

命令：npm i -g create-react-app

安装完之后使用 create-react-app 命令搭建框架

//注意不要用驼峰命名法 推荐全小写
create-react-app 项目名称

完成之后使用即按照提示cd xxx 和npm start 即可

框架的基本使用（写了一个案例做理解参考）

你可把src中的文件全部删除只剩下index.js文件
然后创建一个入口文件app.js（这是个空文件）
index.js文件中的内容即下

import ReactDOM from 'react-dom';
//引入文件
import App from './app'

ReactDOM.render(
	//页面输出Hellow后就可吧这个Hellow删除
	//'Hellow',
	//这里相当于注册组件
  <App/>,
  document.getElementById('root')
);

app.js这里声明的是一个类式组件

import React,{Component} from 'react'
//引入friend组件
import Friend from './friend'
//  类式组件
//  组件类必须继承 **React.Component**
//  组件类必须有 **render** 方法
//  render的return后定义组件的内容
// 注意：记得导出
class App extends Component{
    render(){
    //先随意写一个内容做测试 , 在页面上显示之后就可删除
    //return (<div>哈喽</div>)
        return (<div><Friend/></div>)
    }
}
//导出APP类
export default App

定义一个friend.js文件

import {Component} from 'react'
//引入样式
import  './friend.css'
//引入数据
import data from './data'
//吧要显示在页面的数据封装到一个文件中
import DataList from './dataList'
//firend是你这个文件的名字
export default  class friend extends Component{
    render(){
        return (
        <div className="friend-list">

            {/* Object.keys  这个方法会吧给定对象自身的内容返回一个数组*/ }
            {
                Object.keys(data).map((item,index)=>{
                    return (
                        <DataList
                            key={index}
                            name={item}
                            value={data[item]}
                        />
                    )
                })
            }
        </div>
        )
    }
}

friend.css文件

.friend-list {
    border: 1px solid #000000;
    width: 200px;
}
.friend-group dt {
    padding: 10px;
    background-color: rgb(64, 158, 255);
    font-weight: bold;
}
.friend-group dd {
    padding: 10px;
    display: none;
}
.friend-group.expanded dd {
    display: block;
}
.friend-group dd.checked {
    background: green;
}

data.js文件

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

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

dataList.js文件

import React,{Component} from 'react'
export default class dataList extends Component{
    // state 组件自身状态
    // 它的主要作用是用于组件保存、控制、修改 *自己* 的可变状态，在组件内部进行初始化，也可以在组件内部进行修改，但是组件外部不能修改组件的 state
    //setState()修改state中的数据
    state={
        isOpen:false
    }
    render (){
    	//props 父组件传递过来的参数
        // console.log(this.props);
        let {title,list}=this.props.value
        let {isOpen} = this.state
        //下面的onClick是一个点击事件 注意他的大小写
       //在onClick中使用()=> (箭头函数是因为他的this指向问题)
        return(
            <div className={"friend-group "+(isOpen?"expanded":"")}>
                    <dt onClick={
                        ()=>this.setState({
                            isOpen:!isOpen
                        })   
                    }>{title}</dt>
                    {
                        list.map((item,index)=>{
                        return <dd key={index}>{item.name}</dd>
                        })
                    }
            </div>
        )
    }
}