create-react-app+node+npm+andt来完成自己的首个项目。
一、按这个步骤走下去:
npm install -g create-react-app
create-react-app my-app
使用命令创建应用,myapp为项目名称
cd my-app
进入目录,然后就启动
npm start
启动之后打开的页面(localhost:3000):
现在我们的目录结构:
其中src文件夹中的index.js是整体的入口文件;public中的index.html是承载主体,现在你可以尝试修改App.js中的return后面的代码,修改页面显示;
二、我们引入路由
npm install --save react-router-dom
react 的路由在4.0版本以后分离开来;如果你只是想做PC端的页面,那么react-router-dom就够用了。
安装完之后可以在项目目录src下创建几个文件夹
修改App.js
import React,{ Component } from 'react';
import { BrowserRouter, Route,Link} from 'react-router-dom';
import Home from './components/Home';
import Product from './components/Product';
import About from './components/About';
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<a href="/abc">家</a>
<a href="/abc1">产品</a>
<a href="/abc2">我们</a>
<br/>
<Link to="abc"> 家</Link>
<Link to="abc1"> 产品</Link>
<Link to="abc2">我们</Link>
<br/>
<Route path="/abc" component={Home}/>
<Route path="/abc1" component={Product}/>
<Route path="/abc2" component={About}/>
</div>
</BrowserRouter>
);
}
}
export default App;
About.js
import React from 'react';
class About extends React.Component {
render() {
return (
<h1>关于我们</h1>
);
}
}
export default About;
Home.js
import React from 'react';
class Home extends React.Component {
render() {
return (
<h1>hihihihi</h1>
);
}
}
export default Home;
Product.js
import React from 'react';
class Product extends React.Component {
render() {
return (
<h1>产品列表</h1>
);
}
}
export default Product;
效果图:
至此一个简单的路由就完成了。