不废话了,这次直接开干。也是我逐步的搭建过程。当手记了
总结看最后。
本次项目地址:https://github.com/ht-sauce/react-template
1、创建项目
这个没什么可以说的,就是一个命令:npm create 你的项目名称
附带官网地址:https://www.html.cn/create-react-app/docs/setting-up-your-editor/
2、分析目录结构
my-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
官方说明:
public/index.html
是页面模板;src/index.js
是 JavaScript 入口点。
有vue经验的那么就直接很好理解。并且对文件进行部分修改。我初步干完是这样样子的。剩下这么写文件。
public
favicon.ico
index.html
src
App.css //app页面css
App.js //首页,全局的
index.css //全局css
index.js //入口文件,类似vue的main.js
这里注意,只是初次修改。后面还需要引入路由和redux(类似vux)
3、必须有eslint,prettier
注意react的官方脚手架是有eslint的。暂时根据官方的操作来
1、先添加包
yarn add prettier
yarn add eslint-plugin-prettier
安装完毕
2、添加eslint配置文件
根目录下面
.eslintrc.json
添加内容
{
"extends": "react-app",
}
3、添加prettier配置
最终eslint配置文件为
{
"extends": "react-app",
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
4、添加prettier配置文件
参考配置参数说明:https://www.cnblogs.com/linjunfu/p/10880381.html
prettier.config.js
module.exports = {
printWidth: 100,
singleQuote: true,
trailingComma: 'all',
bracketSpacing: true,
jsxBracketSameLine: false,
parser: 'babylon',
semi: true,
};
4、添加sass
先根据官方文档,添加简单的来
命令:yarn add node-sass
然后把css文件后缀改为scss就行了
5、添加路由
1、react-router?react-router-dom
这里有一个比较争议性的问题,通过create-react-app的官方推荐了react-router-dom,但是通常问的是react-router。
原谅我是新手,所以我百度比较了下。
这里推荐一个csdn的博客,这位大神讲的比较详细。大家可以看看。
我总结下:react-router-dom是基于react-router再次封装的,并且优化提供了更多的解决方案。所以两者而言是一个优化过程。
所以安装:yarn add react-router-dom
2、改的像vue一样操作路由react-router-config
这里我不得不吐槽react的路由。
吐槽原因:
学习免不了百度,然后当我比较崩溃的时候我去掘金发发牢骚。然后我发现react路由做的确实差。因为我自己百度所得知,目前有dva.js解决放hi,umiJs方式,还有各位大佬自己去封装路由。想想,这react生态真是丰富啊。然而这对于一个新手呢?这是不是一个灾难。
然后就是react太灵活,灵活到新手无法驾驭。老手各自封装,然后项目参差不齐。原罪啊。
react之所以适合大公司,因为大公司有良好的规范。
vue没有限制,即适合大项目也适合小项目。对于小公司vue本身规范良好。对于大公司,又不欠缺灵活性。只叹,vue出现的比react晚,又没有大厂背景。
正式:
既然我是新手,而且我是vue转过来的。那么我是万万不能接受vue这种组件方式的路由导航。但是自己封装又不够熟悉。好在react-router官方开始向vue学习,推出了react-router-config
安装:npm install --save react-router-config/yarn add react-router-config
3、编写router.js
在src下面创建router文件,然后新建router.js
如果直接拷贝react-router-config文档那么没什么可以说的。我放出来自己的代码
import asyncComponent from './asyncComponent';
//子路由展示的关键参数,类似router-view
//import { renderRoutes } from 'react-router-config';
// 传参示例
/*const Child = ({ route }) => (
<div>
<h2>Child</h2>
{/!* child routes won't render without this *!/}
{renderRoutes(route.routes, { someProp: 'these extra props are optional' })}
</div>
);*/
const routes = [
{
component: asyncComponent(() => import('../App')),
routes: [
{
path: '/',
exact: true, //只有当路由完全匹配的时候才进行匹配
component: asyncComponent(() => import('../view/Home')),
},
{
path: '/About',
component: asyncComponent(() => import('../view/About')),
},
{
path: '/Inbox',
exact: true, //只有当路由完全匹配的时候才进行匹配
component: asyncComponent(() => import('../view/Inbox')),
},
// 路由嵌套示例
/*{
path: '/child/:id',
component: Child,
routes: [
{
path: '/child/:id/grand-child',
component: GrandChild,
},
],
},*/
],
},
];
export default routes;
可以看到代码和vue很相似了
然后是index.js中的内容
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
// 路由配置
import { BrowserRouter as Router } from 'react-router-dom';
// 路由配置抽离
import { renderRoutes } from 'react-router-config';
import routes from './router/router';
ReactDOM.render(
<Router>{renderRoutes(routes)}</Router>,
document.getElementById('root'),
);
serviceWorker.unregister();
基本上是和react-router-config一样的。没什么多余的改变。这里赞扬下官方(我要是早去年写react是不是就没有这玩意,可怕!)。
4、按需加载
如果你直接按官方完整的例子来那么是无法按需加载的。
我记得在学习vue的时候,vueRouter说过,如果直接在页面里面引入import是不会按需加载的。但是在组件(component)位置用
component: () => import("../views/blog/Home.vue"),
上述方式,那么就能按需加载。
但是react里面不行啊。这样写就报错。英文提示的大致意思就是,你引入的是primose,但不是组件。
这时候回想到react-create-app官方隐约提过按需加载的方式。
官方地址:https://www.html.cn/create-react-app/docs/code-splitting/
但是vue-router是另外的方式
地址:https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
大致意思就是,你需要将promise处理为高阶组件。
还好文档有现成的。拷贝就行了。
export default function asyncComponent(importComponent) {
class AsyncComponent extends Component {
constructor(props) {
super(props);
this.state = {
component: null
};
}
async componentDidMount() {
const { default: component } = await importComponent();
this.setState({
component: component
});
}
render() {
const C = this.state.component;
return C ? <C {...this.props} /> : null;
}
}
return AsyncComponent;
}
使用方式,看我刚才router.js里面的代码就懂了。这样就完成了按需加载。
文档中还提到:npm install --save react-loadable
这个就大家自己看看了。
到目前为止路由算基本完成了。
6、vue和react总结
上述操作下来,其实react除了redux基本上是没问题了。剩余的就是实际开发了。
然后我前端开发路线是:小程序——vue——学习react
这里我觉得react非常灵活。总的走来下,react官方其实已经给你了良好的道路。只是可以看的出来react从开始到目前位置,项目本身演变过程中,没有一个良好的规范。导致入门太高,百花齐放。入门高,限制了react在底层用户的发展。
vue从一开就好像给用户框定了一套规则。让你去根据他的规则来。但是这对于新手友好。相对于react,基本面上其实vue这块做的更好。
从开发效率上,初始绝对是react更好。后期两者其实相差不多。
从代码上看,react颗粒度更低,但是vue也不能说比react大,只是vue感觉更像一个html页面开发。
开发体验上vue更好。
相比而言,vue绝对是小公司首选。react对于小公司有点像灾难。因为react的高度灵活性,导致出现太多规范。
大项目相比,两者没有差别(抛开性能)。
官方文档比较:react在入门教育上更好,vue就比较欠缺。说实在,我一开始学vue的时候比react还懵逼。因为vue在新手教程上不够友好。(主要在于vueCli方面)
最后:国内选vue没错,但是你也不能不学习react,路想走的更远那么就都需要学习。
本次项目git地址:https://github.com/ht-sauce/react-template
想着要不要推自己个人博客的,不过想想,我只是打算自己当作记事本一样。就不推了。大家看掘金就好。