react进阶

原创

wx612f45b709d99 2021-09-01 18:39:42 博主文章分类：react ©著作权

©著作权归作者所有：来自51CTO博客作者wx612f45b709d99的原创作品，请联系作者获取转载授权，否则将追究法律责任

1.脚手架使用(包含多个插件)

单页面：只有index.js一个入口
mainfest.json可以帮助离线缓存
package.json是包含插件和依赖的脚本，scripts第一个是运行方法
如果项目本身满足不了我们的需求，要修改webpack.config.js里的配置
react是热加载，修改部分代码不用重启打开即可更新。项目更改完会自动重新打包。
Eslint检验 .js 文件是否符合编码规范

npm install -g create-react-app （-g是全局安装，install简写是i也行）
create-react-app proname

编写Hello World

sass支持(效率高)
将App.css修改为App.scss 这样css将支持嵌套语法
安装sass：yarn add node-sass --save

import React from 'react';
import './App.scss';

class App extends React.Component{

    state = {
        val:'',
        list:[]
    }

    handleChange=(event)=>{
        let val = event.target.value;   //这样可以获取到input里的值
        this.setState({
            val
        })
    }


    handleAdd=()=>{
        let {val,list} = this.state;
        list.push(val);
        this.setState({
            list
        })
    }

    render() {
        const {val,list} = this.state;
        return <div>
            <p>欢迎学习react</p>
            <h1>Hello World</h1>
            <input type="text" value ={val} onChange={this.handleChange}/>
            <button onClick={this.handleAdd}>添加</button>
            <ul>
{
                 list.map((item)=>{
                    return <li>{item}</li>
                })
}  
//遍历标签 ，在标签里穿插着js的时候，要用{}大括号括起来。
// map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
            </ul>
        </div>
    }
}


export default App;

2.Ant Design UI框架使用

面向B端（Business组织，工作效率，定制付费，免打扰简洁风）一般都是使用UI框架
面向C端（Consumer个人，生活痛点，规模经济，趣味性流畅风）的一般写一部分样式
安装 npm install antd --save
主要就是从官网例子学习。

import React from 'react';
import {Input,Button,Select} from "antd";
import 'antd/dist/antd.css'

const Search = Input.Search;
const Option = Select.Option;
class AntD extends React.Component{

    state = {
        val:'',
        list:[]
    }

    handleChange=(event)=>{
        let val = event.target.value;
        this.setState({
            val
        })
    }


    handleAdd=()=>{
        let {val,list} = this.state;
        list.push(val);
        this.setState({
            list
        })
    }

    handleSearch=(value)=>{
        let {list} = this.state;
        list.push(value);
        this.setState({
            list
        })
    }

    render() {
        const {val,list} = this.state;
        const options =[];
        //width 是一个object对象
        const width = {width:300}; //如果不定义，直接在style里写两个大括号

        return <div>
            <p>欢迎学习react</p>
            <h1>Hello World</h1>
            <Input type="text" value ={val} style={width} onChange={this.handleChange}/>
            <Button type={"primary"} onClick={this.handleAdd}>添加</Button>
            <ul>
                {list.map((item,index)=>{
                    options.push(<Option key={index}>{item}</Option>)
                    return <li key={index}>{item}</li>
                })}
            </ul>
            <div>
                <Search
                    style={width}
                    enterButton={"搜索"}
                    onSearch={this.handleSearch}/>
                    <br/>
                <Select style={{width:200}} >
                    {options}
                </Select>
            </div>
        </div>
    }
}

export default AntD;

3.React-Router

1.1 路由基本配置
安装npm install react-router-dom --save完整代码

①首先在src下新建router.js
as 是别名，BrowserRouter是通过斜杠 HashRouter是通过#

// import {BrowserRouter as Router,Route,Switch} from "react-router-dom";   
import {HashRouter as Router,Route,Switch} from "react-router-dom";
import React from 'react'
import App from "./pages/simplerouter/app";
import Login from "./pages/simplerouter/login";
import Home from "./pages/simplerouter/home";

export default function IRouter(){
    return  <Router>
            {/*普通方式，根据path匹配，从上到下都找，比如/login，会出现两个，App的内容会出现在Login上方 ->*/}
            {/*<Route path = "/" component={App}></Route>*/}
            {/*<Route path = "/login" component={Login}></Route>*/}
            {/*<Route path = "/home" component={Home}></Route>*/}

        {/*如果用swithc只会匹配一个，浏览器输入/home也只会加载App页，因为/home先匹配了/*/}
        {/*加上 exact 可以精准匹配 ，只有输入/才可以匹配到App ->*/}
        {/*如果导入的是HashRouter，会自动加上# 如 http://localhost:3000/login#/ ->图3所示*/}
        <Switch>	
            <Route exact path = "/" component={App}></Route>
            <Route path = "/login" component={Login}></Route>
            <Route path = "/home" component={Home}></Route>
        </Switch>
    </Router>
}

pages/simplerouter/app.js

import React from 'react'
import {Link} from "react-router-dom";
import './app.scss'
import {Button} from 'antd'
import 'antd/dist/antd.css'

// export default function App() {
//     return <div  class="container">
//         <h1>欢迎来到React的世界</h1>
            <Link to="/login">点击跳转到登录页</Link>
            <br/>
            <Link to="/home">点击跳转到主页面</Link>
//         <br/>
//     </div>
// }


//有状态组件
export default class App extends React.Component{
    handleJump=()=>{
        this.props.history.push("/login");
    }

    render() {
        return <div className="container">
            <h1>欢迎来到React的世界</h1>
            {/*Link的使用*/}
            {/*如果是HashRouter  浏览器地址栏输入http://localhost:3000/#/login#/即可跳转到登录页 */}
            <Link to="/login">点击跳转到登录页</Link>
            <br/>
            <Link to="/home">点击跳转到主页面</Link>
            <br/>
            <Button onClick={this.handleJump}>登录跳转登录</Button>
        </div>
    }
}

router.js中新增以下代码

 {/*动态路由 浏览器输入http://localhost:3000/#/detail/123 即可看到效果*/}
    <Route path = "/detail/:goodsId" component={Detail}>
        <Redirect to={'/login'}/>   {/*重定向到另一个页面*/}
    </Route>
    {/*404* 如果都没匹配到  输入http://localhost:3000/#/goods等不存在的路径即可看到效果 */}
    <Route path = "*" component={NoMatch}/>

detail.js & 404.js

export default class Detail extends React.Component{
    render() {
        return <div className="container">
            <h1>this is detail</h1>
        </div>
    }
}

export default function NoMacth() {
    return <div style={{color:'red'}}>404！！！</div>
}