开始前
安装 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; 现在命令行切到项目根目录,在浏览器内查看效果;
创建一个列表
虽然,我们现在有一个组件了,但是内容都特别单调,接下来创建一个列表的组件: 在 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,} 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;
现在命令行切到项目根目录,在浏览器内查看效果;
第一步就先到这里啦: 源码 React.js组件化开发第二步(添加样式及数据请求) (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|