react_新手教程入门01-只需2步完成react项目构建

图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

(完 待续......)