使用react+redux+react-redux+react-router+axios+scss技术栈从0到1开发一个applist应用 (2)

在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom，这两个不同之处就是后者比前者多出了 这样的 DOM 类组件，所以我们只需要使用react-router-dom就可以了

1、安装

npm install react-router-dom --save-dev

2、创建路由组件router/index.js

import React from 'react'; import { HashRouter, Route, Switch } from 'react-router-dom'; import Home from '../pages/Home'; import Profile from '../pages/profile/Profile'; const BasicRoute = () => ( <HashRouter> <Switch> <Route exact path="http://www.likecs.com/" component={Home} /> <Route exact path="/profile" component={Profile} /> </Switch> </HashRouter> ); export default BasicRoute;

将两个页面组件Home和Detail使用Route组件包裹，外面套用Switch作路由匹配，当路由组件检测到地址栏与Route的path匹配时，就会自动加载响应的页面

3、入口文件index.js引入router组件

import React from 'react'; import ReactDOM from 'react-dom'; import Router from './router/router'; ReactDOM.render( <Router/>, document.getElementById('root') );

4、路由跳转

this.props.history.push("/search/result"); 添加vw适配手机屏幕

1、默认webpack的配置是隐藏的，通过eject 显示webpack配置（此操作不可逆）

npm run eject

2、安装postcss

npm install --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano

3、webpack配置

修改webpack.config.js，添加如下代码：

{ // Options for PostCSS as we reference these options twice // Adds vendor prefixing based on your specified browser support in // package.json loader: require.resolve('posREtcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebook/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), require('postcss-preset-env')({ autoprefixer: { flexbox: 'no-2009', }, stage: 3, }), // Adds PostCSS Normalize as the reset css with default options, // so that it honors browserslist config in package.json // which in turn let's users customize the target behavior as per their needs. postcssNormalize(), // 添加vw配置 start postcssAspectRatioMini({}), postcssPxToViewport({ viewportWidth: 750, // (Number) The width of the viewport. viewportHeight: 1334, // (Number) The height of the viewport. unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to. viewportUnit: 'vw', // (String) Expected units. selectorBlackList: ['.ignore', '.hairlines', '.list-row-bottom-line', '.list-row-top-line'], // (Array) The selectors to ignore and leave as px. minPixelValue: 1, // (Number) Set the minimum pixel value to replace. mediaQuery: false // (Boolean) Allow px to be converted in media queries. }), postcssWriteSvg({ utf8: false }), postcssPresetEnv({}), // postcssViewportUnits({ // filterRule: rule => rule.selector.indexOf('::after') === -1 && rule.selector.indexOf('::before') === -1 && rule.selector.indexOf(':after') === -1 && rule.selector.indexOf(':before') === -1 // }), postcssViewportUnits({}), cssnano({ "cssnano-preset-advanced": { zindex: false, autoprefixer: false }, }) // 添加vw配置 end ], sourceMap: isEnvProduction && shouldUseSourceMap, }, },

这里，配置之后运行项目会发现有个报错
ReferenceError: postcssPresetEnv is not defined
是因为我们没有引入postcssPresetEnv

安装并添加以下依赖

npm install postcss-preset-env --save-dev const postcssPresetEnv = require('postcss-preset-env');

配置好了之后，再访问我们的页面，可以发现已经自动转成vw了

4、兼容低版本android，加入viewport-units-buggyfill hack

下载viewport-units-buggyfill.min.js到public文件夹下面，修改index.html添加如下代码：

<script src='http://www.likecs.com/%PUBLIC_URL%/viewport-units-buggyfill.min.js'></script> <script> window.onload = function () { window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks }); } </script> 或者使用cdn的方式引入 <script src="http://g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script> 安装scss npm install node-sass sass-loader --save 在React中的几种样式写法

行内样式、声明样式、引入样式、CSS Modules模块化

1、行内样式

<div style={{ background: '#eee', width: '200px', height: '200px'}}> <p style= {{color:'red', fontSize:'40px'}}>行内样式</p> </div>

2、声明样式

const style1={ background:'#eee', width:'200px', height:'200px' } <div style={style1}> <p style= {style2}>行内样式</p> </div>

3、引入样式

.person{ width: 60%; margin:16px auto; } import './Person.css'; <div className='person'> <p>person:Hello world</p> </div>