zoukankan      html  css  js  c++  java
  • create-react-app脚手架使用

    1.安装脚手架和路由

    npm i -g create-react-app

    npm i -S react-router react-router-dom

    2.创建新项目

    create-react-app 项目名称

    3.运行项目

    npm start

    4.开始开发

    跟vue-cli和ng-cli很不同的是,react就算用了cli和原来引入

    1)书写组件

    例如一个简单的组件:

    //test.component.js
    import React,{Component} from React
    import './test.css'
    
    class Test extends Component {
        constructor(...args){
            super(...args)
        }    
        render(){
            return (
                <div className="test">
                    test123
                </div>
            )
        }
    }
    export default Test

    2)引入书写路由

    //App.js
    import React,{Component} from React
    import {BrowserRouter,Switch,Route,Link} from 'react-router-dom'
    import Test1 from './test1.js'
    import Test2 from './test2.js'
    import Test3 from './test3.js'
    
    class App extends Component {
        render(){
            return (
                <BrowserRouter>
                    <div>
                        <Link to="/test3/123/">切换到test3</Link>
                        <Test1></Test1>
                        <Switch>
                            <Route path="/" component={Test2}></Route>
                            <Route path="/test3/:id/" component={Test3}></Route>
                        </Switch>
                    </div>
                </BrowserRouter>
            )
        }
    }
    export default App

    3)ajax请求用es6的fetch

    //组件挂载完成时访问接口
    async componentDidMount(){
         let data = await (await fetch('http://localhost:8088/api/getData',
            // options
            {  method: 'POST',
                headers: { 
                    'Accept': 'application/json', 
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ 
                    user: 'miemie', 
                    pass: '123456'
                }) 
            }
        ).json())
        this.setState({myList: data})
    }
  • 相关阅读:
    Bootstrap自带的chart插件
    工作笔记2
    SqlFunctions 可以在EF种调用sqlserver的函数
    工作笔记1
    Asp.Net 导出Excel数据文件
    FileUpload上传与下载
    K2工作流的使用
    跨服务器导入数据SQL语句及其问题解决方案
    web.xml listener和event
    web-app子元素
  • 原文地址:https://www.cnblogs.com/amiezhang/p/8820634.html
Copyright © 2011-2022 走看看