react创建项目初始化(2)

大家好,我是大帅子,我们紧接着昨天的讲,昨天讲到了axios,今天我们来讲样式,大家肯定在想,啊?样式还要讲吗?不要慌,听我细细道来,因为我本次的项目用的是scss,所以就用scss来举例了

---

1. sass的使用

在react脚手架中已集成了sass的配置，因此只需要安装sass的依赖包，就可以直接使用sass了

步骤

1. 安装sass依赖包

npm i sass -D

1. 使用 把index.css改成index.scss。在组件中导入index.scss文件。

注意

在scss中使用图片的绝对路径的时候需要加上~

background-image: url(~@assets/login.png);

解决css样式污染-问题

问题引入

按如下操作可以复现问题。

第一不：在Login组件的index.scss中添加样式

.root {font-size: 100px;}

第二步：给Login和Layout组件的根元素都添加.root这个类

第三步：问题出现：发现在Layout组件中的样式也跟着发生了改变

解决方案

1. 改样式文件名。从 xx.scss -> xx.module.scss （这是React脚手架中的约定，与普通 CSS 作区分）

2. 引入使用。

   1. 组件中导入该样式文件（注意语法）

      import styles from './index.module.scss'
      

   2. 通过 styles 对象访问对象中的样式名来设置样式

      <div className={styles.css类名}></div>
      

      css类名是index.module.scss中定义的类名。

   3. 但是此时又出现了一种新的情况,每个类名都会加上className={styles.root}

解决重复书写类名的情况

如图,我们只需要在用 :global 包裹类名就可以正常使用了

配置Redux

估计配置Redux让大家,苦不堪言,因为要下载太多了包了,链入的东西又太多了,那我接下来,给大家提供一个万能的办法,按照我的这个模板去套

步骤：

1. 安装 redux 相关的包：npm i redux react-redux redux-thunk redux-devtools-extension
2. 在 store 目录中分别创建：actions 和 reducers 文件夹、index.js 文件
3. 在 store/index.js 中，创建 store 并导出
4. 创建 reducers/index.js 文件，创建 rootReducer 并导出
5. 创建 reducers/login.js 文件，创建基础 login reducer 并导出
6. 在 src/index.js 中为 React 组件接入 Redux

核心代码

store 目录结构：

├─store                # redux根目录
│  ├─actionTypes.js    # 
│  ├─reducers          # 
│  │  ├─index.js         # 
│  │  └─login.js       #  
│  ├─actions           # 
│  │  └─login.js       # 
│    └─index.js          # 创建store并导出

store/index.js 中：

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import rootReducer from './reducers'
​
const middlewares = composeWithDevTools(applyMiddleware(thunk))
const store = createStore(rootReducer, middlewares)
​
export default store

store/reducers/index.js 中：

import { combineReducers } from 'redux'
​
import login from './login'
​
const rootReducer = combineReducers({
  login     //要加新的模块直接链入之后逗号加入
})
​
export default rootReducer

store/reducers/login.js 中：

const initValue = {
  token: ''
}
export default function login(state = initValue, action) {
  return state
}

src/index.js 中：

import { Provider } from 'react-redux'
import store from './store'
​
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

效果检测

如果是一下的情况,就证明大家已经配置成功了,不熟练的话,就多试几次

---

好了,初始化,大概就差不多了,如果大家有什么不懂的,欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏 🐣---->🦅        还需努力!大家一起进步!!!