1.2使用脚手架安装react ---webpack版本 构建react项目配置代理 图片懒加载-webpack React中如何实现样式隔离.

使用 webpack + create-react-app

1.安装react代码行工具(脚手架), 基于webpack工具构建项目

npm install -g create-react-app

2.创建一个react应用程序, my-app是自定义项目名

	create-react-app my-app

3.启动react项目 (需要cd进入项目my-app根目录)

npm start

注意: 在使用 create-react-app 来创建一个新的React应用，在拉取各种资源时,往往会非常慢,一直卡在那,因为资源还是使用了 npm下载的, 我们可以换成淘宝的资源, 执行指令
npm config set registry https://registry.npm.taobao.org
可以把npm指令替换成cnpm指令 

问题: 安装脚手架报错: The fs.promises API is experimental

原因: npm版本过高或node版本过低 
解决: npm i npm@6.4.1 -g

构建react项目配置代理

1, 下载安装代理模块

cnpm install http-proxy-middleware --save

2, 在src目录中新建setupProxy.js文件，在文件中放入如下代码(注意是src目录,不是根目录)：

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function (app) {
    app.use(createProxyMiddleware('/api',
        {
            target: 'http://127.0.0.1:3000',
            changeOrigin: true,
            pathRewrite: {
                "^/api": ""
            }
        })
    )
}

附加: 
设置项目端口号:  node_modules/react-scripts/scripts/start.js
也可以通过指令 npm run eject 把服务器配置暴漏出来, 修改scripts/start.js         	(这个指令不可逆)

图片懒加载-webpack

此模块适用于webpack构建的项目

1, 下载安装懒加载模块

 cnpm i react-lazyload --save

2, 在src/assets/目录下放入懒加载占位图 placeholder.gif

3, 在需要使用懒加载的组件中导入懒加载模块和占位图

import LazyLoad from 'react-lazyload';
import placeholder from "../../asset/placeholder.gif"

``
4, 在组件rander函数中创建占位图片标签img

var holderImg = <img src={placeholder} />

5, 在组件模板中给需要懒加载的图片添加LazyLoad父标签

 <LazyLoad placeholder={holderImg}>
        <img src={item.room_src} alt="这是一个图片" />
 </LazyLoad >

---

# react样式隔离 在react组件中,默认所有的样式文件都是全局作用域,不存在样式隔离

方法一: 根标签选择器限制

如果需要每个组件样式隔离, 在设置组件样式时, 每一个选择器都添加组件根标签选择器, 以区分不同组件中的样式

方法二: 使用CSS Modules css模块化

1, 创建组件样式文件时以 xxx.module.css命名, 例如 Home.module.css 代替 Home.css
2, 在组件jsx导入样式文件时使用 import styles from ‘./xxx.module.css’ 导入 代替 import ‘./xxx.css’
3, 在组件中需要设置样式的标签上添加class值, className={styles.yyy} 其中yyy指的是css样式中的class值
4, 在xxx.module.css中通过 .yyy{} 设置样式,即为局部样式

一般建议:

自定义组件的样式,自己写的样式使用方法一
第三方导入的组件或样式文件,使用方法二