从头开始搭建一个 React 项目 (一)

·  阅读 2361

最近需要开发一个webApp,在 vue 和 react 之间犹豫很久,考虑到项目的小程序应用是基于 Taro 开发的,但是由于前期开发没有考虑转 H5 的需求,导致现在项目过于庞大,转 H5 需要大量的时间和精力处理兼容性问题。考虑到语法上的相似型(方便复制粘贴代码),所以还是选择搭建 一个 React 项目。因为第一次搭建,还是遇到了一些问题,做一些简单的记录方便以后不要再踩坑~~

第一步:创建项目

方法一:

首先我们需要全局安装 create-react-app

npm install -g create-react-app
复制代码

然后直接执行

create-react-app my-app
cd my-app
npm start
复制代码

方法二:

直接使用 npx 创建项目,你需要保证你的电脑上 Node >= 8.10 和 npm >= 5.6,在这个前提下

npx create-react-app my-app
cd my-app
npm start
复制代码

这也是官方推荐的创建项目的方法。

第二步:配置 router

在一个有业务需求的react 项目中,路由是必不可少的,react 的脚手架没有帮我们安装路由,所以需要我们手动安装

npm install react-router-dom -S
复制代码

我个人比较习惯单独用一个来管理路由,因此我创建了一个 router.js 文件,下面简单介绍一下在项目的搭建过程中涉及到的 React Router 的一些必备的知识点。

Histories

React router 常用的 history 有三种形式:browserHistory、hashHistory、createMemoryHistory,

1、browserHistory 是使用 React Router 的应用推荐的 history,它创建一个像 example.com/some/path 这样真实的 URL,使用这种模式,需要服务器做好相关配置,做好处理 URL 的准备。 2、hashHistory 使用 URL 中的 hash(#)部分去创建形如 example.com/#/some/path 的路由。 3、createMemoryHistory 不会在地址栏被操作或读取,适合服务端渲染的应用,使用这种方式需要先创建它

const history = createMemoryHistory(location)
复制代码

注意 除了第三种形式外,react-router官方文档上说明的引用另外两种形式的方法都是:

import { browserHistory } from 'react-router'

render(
  <Router history={browserHistory} routes={routes} />,
  document.getElementById('app')
)
复制代码

但是在实际的项目操作中,你会发现直接按照文档中的做法,运行时会报错:

Attempted import error: 'browserHistory' is not exported from 'react-router'.
复制代码

查阅资料时发现,其实 React 项目中,一般不会安装 react-router 包,而是安装我上面安装的 react-router-dom 包,具体两者之间的区别可以参考这篇文章: react-router与react-router-dom使用时的区别

最终引用方法如下

import React from 'react';
import { BrowserRouter as Router} from 'react-router'

export default function RouteConf() {
	return (
		<Router>
		</Router>
	)
}
复制代码

Switch

Switch 是唯一的,它仅渲染一个路径,如果不使用 Switch 包裹, 每一个被location匹配到的将都会被渲染。为了减少不必要的渲染,我们一般都会将路由用 Switch 组件包裹起来。

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router'

export default function RouteConf() {
	return (
		<Router>
				<Switch>
					<Route path="/" component={index} />
				</Switch>
		</Router>
	)
}
复制代码

关于 Switch 的详细介绍,可以参考这篇文章--> react-router v4 之 啥是 - 简书

exact

exact 是 Route 的一条属性,一般而言,react 路由会匹配所有匹配到的路由组件,使用 exact 属性可以严格匹配路由组件。

<Route path='/' component={Index} />
<Route path='/about' component={About}>
复制代码

上面这两个路由,在未配置 exact 的路由中,如果匹配到的路由是 /about,那么 / 也会被匹配出来。

<Route exact path='/' component={Index} />
<Route path='/about' component={About}>
复制代码

使用 exact 配置后,就可以解决这个问题了。

代码分割

接下来介绍一下 React 的代码分割,在 React 应用中引入代码分割的最佳方式是通过动态 import() 语法,当 Webpack 解析到该语法时,会自动进行代码分割。

另外,React.lazy 函数能让你像渲染常规组件一样处理动态引入的组件。然后应在 Suspense 组件中渲染 lazy 组件,如此使得我们可以使用在等待加载 lazy 组件时做优雅降级(如 loading 指示器等)。

代码如下:

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
const Index = lazy(() => import('./Index'));

export default function RouteConf() {
	return (
		<Router>
			<Suspense fallback={<div> Loading... </div>}>
				<Switch>
					<Route path="/" component={Index} />
				</Switch>
			</Suspense>
		</Router>
	)
}
复制代码

第三步:引用路由

我们要在 index.js 中引用刚刚配置好的 router.js 文件。

import React from 'react';
import ReactDOM from 'react-dom';
import Route from './router';
import * as serviceWorker from './serviceWorker';

const render = (Component) => {
  ReactDOM.render(
    <Component />,
    document.getElementById('root'),
  )
}

render(Route);

serviceWorker.register();

复制代码

第四步:添加 fastClick

fastclick 是用来解决移动端的点击事件存在 300ms 延迟的问题的,我们在 index.js 中引用它

安装

npm install -S fastClick
复制代码

引用

import React from 'react';
import ReactDOM from 'react-dom';
import fastClick from 'fastclick';
import Route from './router';
import './index.css';
import * as serviceWorker from './serviceWorker';

fastClick.attach(document.body);
const render = (Component) => {
  ReactDOM.render(
    <Component />,
    document.getElementById('root'),
  )
}

render(Route);

serviceWorker.register();

复制代码

第五步:安装 UI 框架

这一步就大家自由选择了,我使用的是 antd-mobile 组件库。

结语

项目搭建到这里,基本就可以在上面实现业务需求了,如果后面再遇到项目相关的问题或者优化的建议,我也会继续更新哒!

第一次搭建 React App,还有很多不足之处,如果有什么可以改进的地方,希望大家可以给我一些建议~~

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改