React基础-3.组件 样式

参考：黑马程序员

1.组件

组件名称的首字母必须是大写

1.1 第一种创建组件方式

1.1.1 第一种创建组件方式

• 传值：
  下面是只读的：
  
  
  

1.1.2 了解ES6的展开符写法：

ES6 …例子：

1.2 抽离组件

抽离：

导入：

要省略后缀名，需要单独配置，方法：

• 要使得 @ 指向根目录中的src文件，要配置webp：
  

1.3 第二种创建组件方式 class （√ 更常用）

1.3.1 了解ES6中 class 关键字的使用

1. class 中 constructor 的基本使用
2. 实例属性和实例方法
3. 静态属性和静态方法
4. 使用 extends 关键字实现继承

• ES6 class 举例：实例属性、静态属性 ------ 实例方法、静态方法
  

1.3.2 class 创建组件：

最基本的组件结构：

   class 组件名称 extends React.Component {
       render(){
           return <div>这是 class 创建的组件</div>
       }
   }

必须有render(){} 且必须返回合法的JSX虚拟DOM结构

1.3.3 class组件 传参

这时和第一种相同，它也是只读的

1.4 两种创建组件方式的对比

• 
• class 有this.state 里面的数据可读写
  
  

1.5 事件调用

在这里插入图片描述

数据绑定

修改 state中的数据

this.setState的调用要注意：

可以采用回调：

双向绑定

2.样式

• 直接style
  

• 抽离成单独的样式表模块
  
  

• css文件
  任何一个component导入外部的css文件，它都是全局的css文件。
  
  

样式模块化

• 在Vue中可以使用
• 在React中：只针对类选择器和ID选择器，其他的例如标签无作用；利用属性绑定类名
  import cssObj from ‘@/css/index.css’
  如果输出 cssObj 可以发现有一些属性，给类名分配了一个字符串
  
  
• React自定义类名：
  
  
• 取消某个类的模块化：即相当于变全局
  

在项目中启用模块化并同时使用bootstrap时

• 如果不想要把第三方css库做模块化，则：规定只为less 或scss 文件做模块化
• 
  

rules: [
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ },
            { test:/\.css$/, use:['style-loader','css-loader']},
            { test: /\.ttf|woff|woff2|eot|svg$/, use: 'url-loader' },
            { test: /\.scss$/, use: ['style-loader','css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]','sass-loader'] },
        ]

导入 bootstrap：

import 'bootstrap/dist/css/bootstrap.css'

引用bootstrap样式：

<button className=“btn btn-primary”}>button</button>