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})

}

巴特西

create-react-app脚手架使用

最新文章

热门文章