好客租房-React-移动web项目

好客租房-React-移动web项目
React 核心库：react、react-dom、react-router-dom

好客租房-React-移动web项目

技术栈

• React 核心库：react、react-dom、react-router-dom
• 脚手架：create-react-app
• ·数据请求：axios
  ·Ul组件库：antd-mobile
• ·其他组件库：react-virtualized、formik+yup、react-spring等
• ·百度地图API

组件库 antd-mobile

1.打开 antd-mobile的文档

2.安装 npm i antd-mobile

2.2嵌套路由

使用步骤

1.在pages文件夹中创建News/index.js组件

2.在Home组件中，添加一个Route作为子路由（嵌套的路由）的出口

3.设置嵌套路由的path，格式以父路由path 开头（父组件展示，子组件才会展示）

<Router>
    <div>
        <Route path="/home" component={Home} />
    </div>
</Router>


const Home = () =>{
    <div>
        <Route path="/home/news" component={News} />
    </div>
}

install axios 请求

npm i axios

使用Sass 在脚手架中

步骤
①打开脚手架的文档，找到添加Sass样式
②安装Sass: yarn add node-sass
③创建后缀名称为.scss或.sass的样式文件
④在组件中导入Sass群式文件

百度地图api

3.使用步骤
①引入百度地图API的JS文件，替换自己申请好的密钥。

react-virtualized 组件

搭配 AutoSize 高阶组件

组件间样式覆盖问题

2.CSS IN JS

• CSS IN JS：是使用JavaScript编写CSS的统称，用来解决CSS样式冲突、覆盖等问题

• CSS IN JS的具体实现有50多种，比如：CSS Modules、styled-components等

• 推荐使用：CSS Modules（React脚手架已集成，可直接使用）https://github.com/css-modules/css-

3.CSS Modules的说明

• CSS Modules通过对CSS类名重命名，保证每个类名的唯一性，从而避免样式冲突的问题

• ·换句话说：所有类名都具有“局部作用域”，只在当前组件内部生效

• ·实现方式：webpack的css-loader 插件

• 命名采用：BEM（Block块，Element元素，Modifier三部分组成）命名规范：比如 .list_item_active

• 在React 脚手架中演化成：文件名、类名、hash（随机）三部分，只需要指定类名即可

  /*自动生成的类名，我们只需要提供classname即可*/
  [filename]_[classname]__[hash]

  //类名
  .error{}
  //生成的类名为：
  .Button_error__ax7yz

4.CSS Modules 在项目中的使用
1.创建名为[name].module.css的样式文件（React脚手架中的约定，与普通CSS作区分）心

//在CityList组件中创建的样式文件名称：
index.module.css

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

//在cityList组件中导入样式文件：
import styles from'./index.module.css'

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

<div className={styles.test}></div>

​