使用 create-react-app 构建 react应用程序流程及开发注意点

淩亂°似流年 2021-09-15 12:06 304阅读 0赞

# 一.了解 #

1.什么是React.js

React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。

React 中，把一切东西都看成组件，而且所有组件有其状态。什么是状态？简单来说，一个组件有多种有限的状态，但同时只能是一种状态，不过条件处罚就会变成另一种状态。学术上叫有限状态机。React.js 是一个新兴的 JavaScript 库，有很多经典的思想值得我们学习。

2.什么是create-react-app

Facebook 官方推出Create-React-App脚手架，基本可以零配置搭建基于webpack的React开发环境，内置了热更新等功能。

详细文档可前往链接：[Create-React-App文档][Create-React-App]

# 二.安装 #

(1).安装node环境

怎么搭建react的环境呢？要搭建react的环境需要借助node.js的npm的包管理器，所以先去看下[NodeJS、NPM安装配置步骤][NodeJS_NPM]。

(2).安装react项目

1.安装create-react-app

npm install -g create-react-app       /* 安装create-react-app，建议使用cnpm */

2.找到创建项目的目录 ：e盘 cd ylz\_project

create-react-app myreact                /\* 使用命令创建应用，myreact为项目名称 \*/

注意：有可能遇到问题

npm 版本低 导致一些操作有问题，所以需要更新最新版本

![20180528100907238][]

①这时只要

使用 npm install -g npm@latest 更新下npm，之后使用管理运行npm 重新试下就ok了。如果npm install -g npm@latest报错的话，执行cnpm install -g npm@latest 更新下npm

②或是设置npm代理,执行命令

npm config set registry http://registry.cnpmjs.org

再从重新创建项目：

create-react-app myreact

3.找到项目：

cd myreact

4.启动项目：npm start

![20180528101852428][]

项目结构

![70][]

# 三.谷歌--React开发者工具 #

安装React Developer Tools

![20180531162739392][]

# 四.项目部署 #

## 1.显示webpack配置 ##

生成项目后，脚手架为了“优雅”... ...隐藏了所有的webpack相关的配置文件，此时查看myreact文件夹目录，会发现找不到任何webpack配置文件。执行以下命令：

npm run eject

![70 1][]

再查看myreact文件夹，可以看到完整的项目结构：

![20180528104221670][]

## 2.安装scss的依赖 ##

①找到项目：npm install sass-loader node-sass --save-dev

②在config文件中找到webpack-config-dev.js和webpack-config-prod.js文件

{
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
    }
    
    exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.scss$/],

![20180528135359456][]

## 安装`less-loader` 和 `less` ##

npm install less-loader less --save-dev

修改webpack配置  
修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件

改动1：

/\.css$/ 改为 /\.(css|less)$/,, 修改后如下：
    exclude: [
      /\.html$/,
      /\.(js|jsx)$/,
      /\.(css|less)$/,
      /\.json$/,
      /\.bmp$/,
      /\.gif$/,
      /\.jpe?g$/,
      /\.png$/,
    ],

改动2：  
test: /\\.css$/ 改为 /\\.(css|less)$/  
test: /\\.css$/ 的 use 数组配置增加 less-loader  
修改后如下：

{
      test: /\.(css|less)$/,
      use: [
        require.resolve('style-loader'),
        {
          loader: require.resolve('css-loader'),
          options: {
            importLoaders: 1,
          },
        },
        {
          loader: require.resolve('postcss-loader'),
          options: {
            // Necessary for external CSS imports to work
            // https://github.com/facebookincubator/create-react-app/issues/2677
            ident: 'postcss',
            plugins: () => [
              require('postcss-flexbugs-fixes'),
              autoprefixer({
                browsers: [
                  '>1%',
                  'last 4 versions',
                  'Firefox ESR',
                  'not ie < 9', // React doesn't support IE8 anyway
                ],
                flexbox: 'no-2009',
              }),
            ],
          },
        },
        {
          loader: require.resolve('less-loader') // compiles Less to CSS
        }
      ],
    },

## 3.安装 ant design和ant-mobile ##

①找到项目执行：npm install antd --save    npm install antd-mobile --save

②然后在组件页面中引入

import { DatePicker } from 'antd';
    import 'antd/dist/antd.css';
    
    class App extends React.Component {
    	render() {
    		const user = '表单处理';
    		return (
    			<div>
    				<h1>{user}!</h1>
    				 <DatePicker/>
    			</div>
    		);
    	}
    }
    export default App;

注意

**以下的操作是按需加载，ant design 需要以下操作 css才可以自动出来，而antd-mobile 需要引入css （import 'antd-mobile/dist/antd-mobile.css'）**

就是在package.json里面直接添加这行代码。当然前提也是需要先安装依赖：` `cnpm install babel-plugin-import --save

"plugins": [
          ["import",{ "libraryName": "antd","style": "css"}]
    ]

![70 2][]

## 4.安装 redux 和 react-redux、 ##

①找到项目执行：npm install --save redux react-redux

npm install redux-thunk --save-dev

redux是本地数据库使用，react-redux帮助你完成数据订阅，redux-thunk可以放你实现异步action，redux-logger是redux的日志中间件。

②引用

import { createStore ,applyMiddleware} from 'redux'; 
    import { Provider } from 'react-redux';
    import thunk from 'redux-thunk';//是中间件
    import reducer from './reducer';//自己reducer文件里面的index.js 来计算state的值
    
    //1.新建store 
    const store = createStore(reducer,applyMiddleware(thunk));
    
    ReactDOM.render(
    		<Provider store={store}>
    		</Provider>
    	,
    	document.getElementById('root')
    );

## 5.安装 React-router4 ##

①找到项目执行：npm install react-router-dom --save

②引入

import \{BrowserRouter,Route,Link\} from 'react-router-dom'  //需要什么组件就引用什么

## **6.引入css** ##

require('./assets/css/App.css');

## 7.注销 ##

{/*Switch只渲染第一路由 它的子路由是不渲染的*/}

## 8.引入图片 ##

import logos from '../../assets/images/logos.png';//src/assets
    render() {
    		return (
    			<img alt="logo" src={logos} />
    		)
    	}

[React 组件引用本地图片问题][React]

## 9.组件属性类型检测  prop-types ##

(1).安装prop-types模块  
        npm install --save prop-types  
    (2).引用  
    import PropTypes from 'prop-types';

**加上isRequired表示是必填的**

static propTypes = {
    		name: PropTypes.string.isRequired,//检测字符串
    		age:PropTypes.number.isRequired,//检测数字
    		user:PropTypes.object.isRequired,//检测对象
    		num:PropTypes.array.isRequired,//检测数组类型
    		bool:PropTypes.bool.isRequired//检测布尔类型
    		fu: PropTypes.func.isRequired,//检测函数（Function类型）
    		Symbol: PropTypes.symbol.isRequired//ES6新增的symbol类型
    	}

[react检测类型][react]

10.由于浏览器兼容问题---babel-polyfill

ie10以下有些es6函数不支持:语法兼容性问题  
所以需要安装：babel-polyfill（Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码）

安装命令----cnpm install --save babel-polyfill

引用的时候：

import 'babel-polyfill';
    // 或者
    require('babel-polyfill');

[Create-React-App]: https://link.jianshu.com/?t=https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md
[NodeJS_NPM]: http://blog.csdn.net/gao_xu_520/article/details/75243384
[20180528100907238]: /images/20210813/e7684bf9f6a54ed09a15afcf3eda672c.png
[20180528101852428]: /images/20210813/ae72a6d655fe447b90f352ab7bb1ff1c.png
[70]: /images/20210813/703b2d3589b640aaa69e2117b4bbb57b.png
[20180531162739392]: /images/20210813/bde6723986db47a3bc8817defc8f9b8f.png
[70 1]: /images/20210813/a3018f5042bc4c14ae70ee6010713be2.png
[20180528104221670]: /images/20210813/984e5548f92f4e839b08c5ec3d2ced8b.png
[20180528135359456]: /images/20210813/f29ab0b0ec8947bdad98457811c47627.png
[70 2]: /images/20210813/d6662cb4a7944d09b9dae29cffdfc4d4.png
[React]: https://blog.csdn.net/gao_xu_520/article/details/81219261
[react]: https://www.cnblogs.com/penghuwan/p/6796139.html