React.js组件化开发第一步(框架搭建)
开始前
安装 node.js;
安装 cnpm;
安装 yarn;
安装完成yarn后, 将镜像替换成国内的:$ yarn config set registry 'https://registry.npm.taobao.org'
安装 create-react-app:
$ sudo cnpm install -g create-react-app // 查看安装版本 $ create-react-app --version 1.3.3
项目初始化
命令行切到需要创建项目的目录内, 然后执行:
// my-app 是项目的名称, 也是文件夹的名称 $ create-react-app my-app // 命令行切到刚创建的项目 $ cd my-app // 运行项目 // 执行以下命令会自动打开浏览器, 并防问 http://localhost:3000/ $ yarn run start
初始化生成的文件先不管, 做项目还是得好好的分目录的哟, 接下来安装react-router
因为, 是在浏览器内运行的, 所以安装react-router-dom; 命令行切到刚创建的项目目录内, 然后执行安装:
$ yarn add react-router-dom // 我这里安装的是 ^4.1.2 版本的
好了, 路由也有了, 现在可以开始写项目啦.
开始上路
在
src目录内创建一个comonents目录, 用来放组件;创建我们自己的首页: 在
components目录内创建一个Home目录, 然后再Home目录内创建一个Home.js, 写入以下内容:// 组件必须先 import 进 react; import React from 'react'; const Home = () => ( <div> <h1>这是首页</h1> </div> ); export default Home;创建
about页面: 在components目录内创建一个about目录, 然后再about目录内创建一个About.js, 写入以下内容:import About from 'react'; const About = () => ( <div> <h1>这是关于页</h1> </div> ); export default About;现在我们有两个组件了, 但是还没办法在浏览器内防问, 接下来创建路由:
先清空src/App.js内的内容, 然后写入以下内容:import React from 'react'; import { BrowserRouter as Router, Route, } from 'react-router-dom'; import Home from './components/Home/Home'; import About from './components/About/About'; const App = () => ( <Router> <div> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> </div> </Router> ); export default App;现在命令行切到项目根目录, 执行
yarn run start启动项目, 会自动在浏览器内防问 http://localhost:3000/, 这就是我们的首页组件哟, 可以手动修改url防问关于页(http://localhost:3000/about)组件.
公共组件
我们创建了两个组件, 并且都有自己的独立路由, 但是要防问需要手动输入, 太麻烦啦, 那我们可以创建一个
导航组件:
在components目录下创建一个Common文件夹并创建NavBar.js内容如下:import React from 'react'; import { Link, } from 'react-router-dom'; const NavBar = (props) => ( <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li>来源于: { props.title }</li> </ul> ); export default NavBar;现在我们有一个公共组件了, 接下来把它放到
Home和about组件内:Home内容如下:import React from 'react'; import NavBar from '../Common/NavBar'; const Home = () => ( <div> <NavBar title="首页" /> <h1>这是首页</h1> </div> ); export default Home;about内容如下:import React from 'react'; import NavBar from '../Common/NavBar'; const About = () => ( <div> <NavBar title="关于页" /> <h1>这是关于页</h1> </div> ); export default About;现在命令行切到项目根目录, 执行
yarn run start启动项目, 在浏览器内查看效果;
创建一个列表
虽然, 我们现在有一个组件了, 但是内容都特别单调, 接下来创建一个列表的组件:
在 components 目录下创建一个 List 文件夹并创建 List.js 内容如下:
import React from 'react';
import NavBar from '../Common/NavBar';
const List = () => {
const data = [{
name: '小白',
age: 5
}, {
name: '大黄',
age: 3
}];
const dataDom = [
<li key="1">1号</li>,
<li key="2">2号</li>
];
return (
<div>
<NavBar title="列表页" />
<ul>
{
data.map((item, index) => (
<li key={index}>
<strong>名字:</strong>
<span>{item.name}</span>
<strong>大小:</strong>
<span>{item.age}</span>
</li>
))
}
{
dataDom
}
</ul>
</div>
);
};
export default List;创建完成后, 修改 src/App.js 将我们的列表组件添加到路由中:
import React from 'react';
import {
BrowserRouter as Router,
Route,
} from 'react-router-dom';
import Home from './components/Home/Home';
import About from './components/About/About';
import List from './components/List/List';
const App = () => (
<Router>
<div>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/list" component={List} />
</div>
</Router>
);
export default App;修改 src/components/Common/NavBar.js:
import React from 'react';
import {
Link,
} from 'react-router-dom';
const NavBar = (props) => (
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/list">List</Link></li>
<li>来源于: {props.title}</li>
</ul>
);
export default NavBar;现在命令行切到项目根目录, 执行yarn run start启动项目, 在浏览器内查看效果;
第一步就先到这里啦: 源码
React.js组件化开发第二步(添加样式及数据请求)