手把手教你写react项目

      'react-native': 'react-native-web',
      '@': path.join(__dirname,'../','src')

    import React from 'react';
    function App() {
      return (
    <div className="container">
      <header className="header">header</header>
      <div className="content">cont</div>
      <footer className="footer">foot</footer>
    </div>
      );
    }
    
    export default App;

    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
    //给根节点root要通过路由去渲染页面，只有一个子元素switch
    ReactDOM.render(
    	<Router> 
    	<Switch>  
    		<Route path="/" component={App}/>
    	</Switch>
    	</Router>
    	, document.getElementById('root'));

    import {Route,Switch} from 'react-router-dom';
    return (
    <div className="container">
    			<Switch>
    			<route path="/home" component={Home} />
    			<route path="/car" component={Car} />
    			<route path="/kind" component={Kind} />
    			<route path="/mine" component={Mine} />
    			</Switch>
      <footer className="footer">foot</footer>
    </div>
      );

    import {Route,Switch,Redirect} from 'react-router-dom';
    <Redirect to="/home"/>

    import {Route,Switch,Redirect, NavLink} from 'react-router-dom';
      <footer className="footer">
      <ul>
      <NavLink to="/home">首页</NavLink>    //会被转成a标签，设置样式选中a标签
      <NavLink to="/kind">分类</NavLink>    //选中的会有一个class=active类
      <NavLink to="/car">购物车</NavLink>
      <NavLink to="/mine">我的</NavLink>
      </ul>
      </footer>

    import React from 'react'
    export default (props)=>{
    	return (
    		<ul>
    		{
    			props.prolist.map((item,index)=>(
    				<li key={index}>{item.title}</li>
    			))
    		}
    		</ul>
    	)
    }

    	componentDidMount(){
    		axios.get('https://www.daxunxun.com/douban').then(res=>{
    			this.setState({
    				prolist:res.data
    			})
    		})
    	}
    	render(){
    		return (
    		<div className="box">
    		<header className="header">header</header>
    		<div className="content">
    		<Prolist prolist={this.state.prolist}/>
    		</div>
    		</div>
    		)
    	}

    <Switch>
    <Route path="/detail" component={ Detail }/>
    </Switch>

    import Detail from '@/otherApp'
    	<Switch> 
    	  <Route path = "/other" component={ OtherApp }/>
    		<Route path = "/" component={ App }/>
    	</Switch>

    <Switch>
    <Route path="/other/login" component={ Login }/>
    <Route path="/other/detail" component={ Detail }/>
    </Switch>

    <Route path="/other/detail/:id" component={ Detail }/>

    import React from 'react'
    import {Link} from 'react-router-dom'
    export default (props)=>{
    	return (
    		<ul>
    		{
    			props.prolist.map((item,index)=>(
    				<Link to={ "/other/detail/" + item.id } key={index}>{item.title}</Link> //遇到变量就腰用到{}
    			))
    		}
    		</ul>
    	)
    }

    import React , {Component} from 'react'
    import axios from 'axios'
    export default class extends Component {
    	constructor(props){
    		super(props)
    		this.state={
    			title:''
    		}
    	}
    	componentDidMount(){
    		const {props:{match:{params:{id}}}} =this
    		axios.get('https://www.daxunxun.com/detail?id='+id).then(res=>{
    			this.setState({
    				title:res.data[0].title
    			})
    		})
    	}
    	render(){
    		return (
    			<div className="box">
    				<header className="header">header</header>
    				<div className="content">
    				{this.state.title}
    				</div>
    			</div>
    		)
    	}
    }

    <Prolist prolist={this.state.prolist}{...this.props}/>

    import React from 'react'
    export default (props)=>{
    	return (
    		<ul>
    		{
    			props.prolist.map((item,index)=>(
    				<li key={index} onClick={()=>{
    					props.history.push('/other/detail/' + item.id)
    					//repalce goback
    					}}>
    					{item.title}
    				</li>
    			))
    		}
    		</ul>
    	)
    }

    	<Redirect from="/" exact to="/home"/> //只有当重定向是/才会重定向到home

    const Com = () => {
      // 声明一个新的叫做 “count” 的 state 变量，此处使用 [], 不能使用 {}
      const [ count, setCount ] = useState(1)
      return (
    <div>
      <button onClick = { () => {
        let a = count + 1
        setCount(a)
      }}>+1</button>
      { count }
    </div>
      )
    }
    
    export default Com

    import React, { useState, useEffect } from 'react'
    import axios from 'axios'
    // 使用 HOOK useState 可以在 函数式组件 中 用状态
    const Com = () => {
      // 声明一个新的叫做 “count” 的 state 变量，此处使用 [], 不能使用 {}
      const [ count, setCount ] = useState(1)
      const [ bannlist, setBannerlist ]= useState([])
      useEffect(() => {
    axios.get('https://www.daxunxun.com/banner').then(res => {
      setBannerlist(res.data)
    })
      })
      return (
    <div>
      <button onClick = { () => {
        let a = count + 1
        setCount(a)
      }}>+1</button>
      { count }
      <ul>
        { 
          bannlist.map((item, index) => (
            <li key = { index }> { item }</li>
          ))
        }
      </ul>
    </div>
      )
    }
    
    export default Com

    export default (props) => {
      return (
    <header>
      { props.children }
    </header>
      )
    }
    //在调用的地方
      <Header>
        <div className="left">左</div>
        <div className="center">中</div>
        <div className="right">右</div>
      </Header>

    import HomeStore from "./home";
    import KindStore from "./kind";
    class Store {
      constructor () {
    this.home = new HomeStore(this);
    this.kind = new KindStore(this);
      }
    }
    
    export default new Store()

    import { observable, action } from 'mobx'
    
    class HomeStore {
      @observable bannerlist = []
    
      @observable prolist = []
    
      constructor (store) {
    this.store = store
    this.changeBannerlist = this.changeBannerlist.bind(this)
    this.changeProlist = this.changeProlist.bind(this)
      }
    
      @action
      changeBannerlist (data) {
    this.bannerlist = data
      }
      @action
      changeProlist (data) {
    this.prolist = data
      }
    }
    
    export default HomeStore

    import axios from 'axios'
    @inject('store')
    @observer
    class Com extends Component {
      constructor (props) {
    super(props)
    this.state = {}
      }
      componentDidMount () {
    axios.get('https://www.daxunxun.com/banner').then(res => {
      this.props.store.home.changeBannerlist(res.data)
    })
      }