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