图1.png
react_learning---技术栈: 前端react + react-router-dom + antd + egg
背景: 额,看到很多小伙伴要react教程,而自己也刚入坑,也知道没人带有多痛苦,就趁热写一集试水,后续有时间精力 ,会依次增加其他功能(包括导航栏,面包屑,弹窗及CRUD), 另外这节课本着"先操起来"的原则,不涉及理论. 本屌水平不高,望大家轻喷.
适合人群: 看过阮一峰教程.(注:本节课零基础也可)
目标: 以后以这套代码为基准进行react开发
安装和初始化配置
注:本节课暂时不需要用到 egg 和 antd ,这里安装只是勾勒整个架构雏形安装 后端脚手架egg
$ npm i egg-init -g
$ egg-init react_admin --type=simple
安装 react脚手架
$ npm install -g create-react-app yarn
$ cd react_admin
$ cd app
$ create-react-app public
安装 antd
$ cd public
$ yarn add antd
安装 react-router-dom 路由
$ yarn add react-router-dom
新建项目文件夹和删除多余文件
$ cd src
$ mkdir components service style tools
$ mv App.test.js /tmp
//新建路由表配置文件
$ touch router.js
前端项目结构
├── src
│ ├── conponents (公用组件放在这，以文件夹为维度)
│ ├── pages (以页面为维度,在这里建立文件夹)
│ ├── service (数据交互,已组件文件夹为维度)
│ ├── style (公共样式文件,只需要在index.css中添加)
│ ├── tools (前端工具组函数)
├── index.js (入口)
├── README.md
└── router.js (路由表配置)
用react开始渲染你的第一个页面-welcome
image.png
每新建一个页面,我们都把它放在pages文件夹里,便于管理
$ cd pages
$ mkdir welcome
这里以create-react-app默认的页面作为第一个渲染的页面
$ cd ..
$ mv app.css app.js logo.svg ./pages/welcome
把app.css和app.js重命名为index.css和index.js
//pages/welcome
$ mv app.js index.js
$ mv app.css index.css
在路由表配置文件中设置你的第一个路由, 并引入组件
//app/public/src/router.js
/**
* 定义前端路由表
* Created by ocean on 18/2/28.
*/
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
// 引入welcome组件
import Welcome from './pages/welcome';
export default () => (
<Router>
<div>
<Switch>
{/* welcome */}
<Route exact path="/" component={Welcome} />
</Switch>
</div>
</Router>
);
修改router.js为项目的入口组件
//app/public/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
-import App from './App';
+import Router from './router';
import registerServiceWorker from './registerServiceWorker';
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<Router />, document.getElementById('root'));
registerServiceWorker();
ok, 把程序运行起来,就能看到你的第一个页面了
$ yarn start
(完 待续......)
