react快速安装脚手架（第一天）

• 全局安装(以后可以任意项目里使用，不用重复安装，只需要创建项目名称即可)

npm install create-react-app -g

• 创建项目名称（myapp是文件名）

create-react-app myapp

安装完成之后，我们将在src目录下写自己的单页面，将双src目录自带的文件全删了，我们自己写，要有一个入口文件（index.js）

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
// 样式最好引导全局引入，局部组件需要样式的话，可以写行内样式
import './App.css'

ReactDOM.render(
    <App/>,
    document.getElementById('root')
)

将App组件作为根组件，渲染到页面，

import React from 'react'
//引入需要的组件
import {NavLink,Route,HashRouter,useParams} from 'react-router-dom'
import Home from './Home'
import News from './News'
import Contact from './Contact'

需要路由链接时，需要下载 react-router-dom ，在原有的项目里继续下载

npm install react-router-dom 

App里的内容

class App extends React.Component{
    render(){
        return(
            <HashRouter>
        <div >
            <h1>用react构建单页面应用</h1>
            <ul className='heading'>
                <li><NavLink to='/' exact>站点主页</NavLink></li>
                <li><NavLink to='/news'exact>新闻中心</NavLink></li>
                <li><NavLink to='/Contact'>联系我们</NavLink></li>
                
            </ul>
            <div className='contain'>
                <Route path='/' exact component={Home} />
                <Route path='/news' exact component={News} />
                <Route path='/Contact' component={Contact} />
                
            
            </div>
        </div>
    </HashRouter>
        )
    }
}
//导出
export default App

• {id}要在函数里使用

function News (props) { 
    let {id} = useParams()
        return(
        <h1>我是新闻{id}</h1>
        )
    
}


    <Route path='/news/:id' component={Xinwen} />