React项目

React项目搭建与部署

一,介绍与需求

1.1,介绍

1.1.1,React简介

    • React 是一个用于构建用户界面的 JAVASCRIPT 库。
    • React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
    • React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
    • React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

1.1.2,React特点

    1. 声明式设计:React采用声明范式,可以轻松描述应用。
    2. 高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
    3. 灵活:React可以与已知的库或框架很好地配合。
    4. JSX:JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
    5. 组件:通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
    6. 单向响应的数据流:React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

1.2,需求

二,环境搭建与项目框架

2.1,环境搭建

1,安装NODE,

2,安装webpack

1  npm install -g webpack 

3,配置淘宝镜像

使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm

1 npm install -g cnpm --registry=https://registry.npm.taobao.org
2 npm config set registry https://registry.npm.taobao.org

4,安装create-react-app

1 cnpm install -g create-react-app

5,创建项目

1 create-react-app my-project//创建项目
2 cd my-project/ 

6,本地服务启动

1 npm run start//启动本地server用于开发

2.2,项目框架

|-node_modules             //项目包

|-public             //一般用于存放静态文件,打包时会被直接复制到输出目录(./buidle)

|-src               //项目源代码
  |  |-asserts         //用于存放静态资源,打包时会经过 webpack 处理

|  |-components     //组件 存放 React 组件,一般是该项目公用的无状态组件
  |  |-containers          //页面视图
  |  |-routes         //路由 存放需要 connect model 的路由组件

|  |-App.js         //入口文件

|  |-index         //注册路由与服务

|  |- serviceWorker        //开发配置

|-package.json      //包管理代码

|-.gitignore //Git忽略文件

三,常用集成与配置

3.1,路由集成与配置使用

React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。react-router

1 npm install [email protected] --save

  1. Router下面只能包含一个盒子标签,类似这里的div。
  2. Link代表一个链接,在html界面中会解析成a标签。作为一个链接,必须有一个to属性,代表链接地址。这个链接地址是一个相对路径。
  3. Route,是下面要说的组件,有一个path属性和一个组件属性(可以是component、render等等)。
  4.  1  render(){
     2         return (
     3             <Router>
     4                 <div>
     5                     <ul>
     6                         <li><Link to="/home">首页</Link></li>
     7                         <li><Link to="/other">其他页</Link></li>
     8                     </ul>
     9                     <Route path="/home" component={Home}/>
    10                     <Route path="/other" component={Other}/>
    11                 </div>
    12             </Router>
    13         )
    14 }

路由支持嵌套,代码如下:

 1 const Root = () => (
 2    <div>
 3       <Switch>
 4          <Route
 5             path="/"
 6             render={props => (
 7                <App>
 8                   <Switch>
 9                      <Route path="/" exact component={Home} />
10                      <Route path="/home" component={Home} />
11                      <Route path="/test" component={Test} />
12                      <Route path="/message/:id/:TestId" component={Message} />
13                       {/*路由不正确时,默认跳回home页面*/}
14                      <Route render={() => <Redirect to="/" />} />
15                   </Switch>
16                </App>
17             )}
18          />
19       </Switch>
20    </div>
21 );
22
23 export default Root;

3.2,redux集成与配置使用

React是单向数据流,所以有些情况下单单依赖React自身无法实现组件之间的通信,故此需要redux

需要安装Redux相关依赖,由于不同版本之间可能存在兼容性问题,所以安装的时候最好制定版本:

1 npm install [email protected] --save
2 npm install [email protected] --save
3 npm install [email protected] --save

然后就可以在项目中引入redux了,可以像如下方式组织目录结构:

3.3,fetch集成与配置使用

关于请求数据有很多种方式,这里采用的是fetch

1 npm install fetch --save

可以简单封装一下,如下:

 1 import ‘whatwg-fetch‘
 2 import loggerService from ‘./logger‘
 3
 4 let notAuthorizedCounter = 0;
 5 let fetchService = {
 6     fetch: (url, method, header, body) => {
 7         if (!header) {
 8             header = {}
 9         }
10
11         return fetchService[method.toLowerCase()](url, header, body).catch(function(exception) {
12             loggerService.log(‘fetchService failed:‘, exception);
13
14             // token过期,重新获取token并发起请求
15             if (exception.code === ‘401‘ || exception.code === ‘403‘) {
16                 notAuthorizedCounter++;
17                 // 最多重试3次
18                 if (notAuthorizedCounter > 2) {
19                     notAuthorizedCounter = 0;
20                     loggerService.warn("401 or 403 received. Max attemps reached.");
21                     return;
22                 } else {
23                     return fetchService.fetch(url, method, header, body);
24                 }
25             }
26         });
27     },
28     get: (url, header) => {
29         return fetch(url, {
30             method: ‘GET‘,
31             headers: header
32         }).then((response) => {
33             return response.json();
34         });
35     },
36     post: (url, header, body) => {
37         header[‘Content-Type‘] = ‘application/json‘;
38         return fetch(url, {
39             method: ‘POST‘,
40             headers: header,
41             body: JSON.stringify(body)
42         }).then((response) => {
43             return response.json();
44         });
45     }
46 };
47 export default fetchService;

3.4,UI组件集成与配置使用

基于React的UI组件在这里推荐两个,一个是蚂蚁金服的Ant Design;另外一个是Material-UI

两个都很不错,这里使用的是Ant Design。

1 npm install antd --save

请注意 react >= 16.6.3和react-dom >= 16.6.3 是对等依赖

1 npm install @material-ui/core

3.5,国际化方案

采用的是常用的react-intl

1 npm install react-intl --save

四,项目部署与问题

4.1,项目部署

首先对项目进行打包。

1 npm run build

通过以下命令可以在本地环境运行打包后的项目。

1 serve -s build

4.2,问题与注意事项

PropTypes 的使用

JavaScript 是弱类型语言,所以请尽量声明 propTypes 对 props 进行校验,以减少不必要的问题。

 1 import React from ‘react‘;
 2 import PropTypes from ‘prop-types‘
 3
 4 class PropTypesList extends React.Component {
 5     static propTypes = {//校验
 6        title: PropTypes.string,
 7     };
 8     static defaultProps = {//设置默认值
 9         title:"PropTypes 的应用实例"//添加默认值
10     };
11     constructor(props) {
12         super(props);
13         this.state = {
14
15         }
16     }
17     render() {
18         const { title} = this.props
19         return (
20             <div>
21                 <p>{title}</p>
22             </div>
23         );
24     }
25 }
26
27 export default PropTypesList ;

内置的 prop type 有:

    1. PropTypes.array
    2. PropTypes.bool
    3. PropTypes.func
    4. PropTypes.number
    5. PropTypes.object
    6. PropTypes.string
    7. PropTypes.node,// 字符串,DOM 元素或包含这些类型的数组。
    8. PropTypes.element, // React 元素
    9. PropTypes.instanceOf(Message), // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    10. PropTypes.oneOf([‘News‘, ‘Photos‘]), // 用 enum 来限制 prop 只接受指定的值。
    11. PropTypes.oneOfType([ PropTypes.string, PropTypes.number, PropTypes.instanceOf(Message) ]), // 指定的多个对象类型中的一个
    12. PropTypes.arrayOf(PropTypes.number),// 指定类型组成的数组
    13. PropTypes.objectOf(PropTypes.number),  // 指定类型的属性构成的对象
    14. PropTypes.shape({ color: PropTypes.string, fontSize:PropTypes.number }), // 特定形状参数的对象
    15. PropTypes.func.isRequired, // 不可空的任意类型
    16. PropTypes.any.isRequired,// 以后任意类型加上 `isRequired` 来使 prop 不可空。
    17. customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error(‘Validation failed!‘); } } },// 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接 // 使用 `console.warn` 或抛异常,因为这样 `oneOfType` 会失效。

原文地址:https://www.cnblogs.com/Leo_wl/p/10273567.html

时间: 2024-10-08 06:39:11

React项目的相关文章

webpack搭建react项目

遥看套路挖掘机,不见当年老司机.this is a boilerplate 1.新建一个项目目录文件夹,暂且叫seed cd seed npm init 然后一直回车,最后yes,最终生成一个package.json文件 2.新建以下 src  文件夹用于存放js,css,img等源码和引用的静态文件 .babelrc babel编译器配置文件 favicon.ico   浏览器默认读取的一个icon index.html  入口首页 webpack.config.js  webpack配置文件

在react项目当中使用redux

如果需要在你的react项目当中使用状态管理模式的话,需要引入redux和react-redux两个插件,redux提供基本的功能,react-redux提供将redux注入react的方法. import React from 'react' import { render } from 'react-dom' import { createStore } from 'redux' import { Provider } from 'react-redux' import App from '

react项目运行心得 -- 访问地址的问题

1.react项目运行时,要先在命名窗口输入相应的命令 2.在浏览器输入相应的地址,比如:http://localhost:3000/new/newlogin (地址一定要这样输入,否则是运行不出来的,绿色地方表示的是路由对应的地址,有的设置了默认,有的没有设置.当输入了"localhost:端口号"之后,如果界面没有输出,调试bug的第一步是查找路由,在"localhost:端口号"之后输入对应的路径,如果界面还是运行不出来,就仔细查看readme文件. 当然,除

如何架构一个 React 项目?

编程有点像搞园艺.比起竭力去对付BUG(虫子),我们更愿意把一切弄得整洁有序,以免最后落得个身在荒野丛林中.低劣的架构会拖我们的后腿,也会使得BUG更容易钻进系统里去. 想要对你的项目进行架构,方法有多种.我相信,根据你的实际情况对架构进行演进,要远比坚持一些条条框框的教条更好.接下来我将会介绍一些基础的方法以资您思考. 将所有的东西都放在一个文件中 最简单的项目可以被放到一个文件之中.而这就是我所选择的用来处理我的Webpack 配置的方法.这种方法最大的好处就是所有你需要的东西都在这一个文件

使用 Dawn 构建 React 项目

开发一个 React 项目,通常避免不了要去配置 和 之类,以支持 或 模块及各种 新语法,及进行 语法的转义.当然也可以用 脚手架快速创建一个 项目,但与此同时 常常又显的不太自由. 在配置 时,看着上百行的 是不是很闹心?为了重用是不是在多个项目间各种 ,整个配置起来还是稍显麻烦,对于新手用户常 http://pic.cnhubei.com/space.php?uid=1913&do=album&id=998116http://pic.cnhubei.com/space.php?uid

[Web 前端] webstorm 快速搭建react项目

cp from : https://blog.csdn.net/qq_39207948/article/details/79467144 前端新手如何安装webstorm ,初步搭建react项目 下载安装webstorm:配置成功: 配置成功后就可以开启webstorm项目了.(存微信收藏..) 1:在webstorm下配置node环境: 2:完成之后: React官方脚手架地址: https://github.com/facebook/create-react-app 在终端下安装执行npm

从零开始搭建一个react项目

如果只是想试试 React,那么建议使用 create-react-app来创建一个react项目.快速开始 因为 create-react-app 和 vue-cli 不一样,create-react-app将webpack的相关配置直接封装好了,所以自定制化程度不高,所以考虑手动构建一个 React项目 代码下载 准备工作 安装node环境. 配置cnpm(看个人需求). 准备一个空的文件夹react-demo. 初始化工程 从这里开始新建一个react工程 1. 初始化工程目录 1 cd

解决react项目中跨域和axios封装使用

最新几天学了一下react,发现了几个问题,估计新入坑的同学们也会遇到,下面我先列出来几点 1.请求跨域问题 2.如何发起请求 3.axios的简单封装 全局安装create-react-app脚手架,帮助我们新建react项目 npm install -g create-react-app 然后创建react项目 create-react-app xxx项目名 然后安装依赖,并且运行react项目 安装 npm install 运行 npm start 首先我们解决跨域的问题 打开项目生成的p

【学习】reactjs(一)——使用npm创建react项目并整合elementUI

在实习的过程中了解了react,所以打算使用react搭建一个属于自己的页面,如有问题请教正,谢谢. Github:https://github.com/yclxt/react-elementUI 工具: 使用工具:nodejs:Jetbrains WebStorm nodejs的安装和配置环境变量这里就不写了. 创建过程: 命令行安装全局create-react-app脚手架工具:npm install -g create-react-app 定位到工作目录下,创建项目:create-reac

如何使用脚手架搭建一个react项目

1.准备工作: 首先要知道,搭建一个react项目总是需要安装node.js和npm的,未安装的请移步node.js官网:https://nodejs.org/en/ 检测是否安装成功:npm -v 和node -v 2.npm安装脚手架 执行命令npm install create-react-app 3.使用npx和脚手架创建项目my_app,这个过程可能需要几分钟,请耐心等待 npx create-react-app my_app 这里用到了npx,就是可以让你不用全局安装create-r