React学习笔记

React笔记三：创建第一个组件

1、src文件夹下新建一个components文件夹

2、在components文件夹中新建一个button文件夹

3、在button文件夹中新建index.tsx文件和styles.module.scss文件

4、编写第一个组件

1
2
3
4
5
6
7
8
9
10
11
//index.tsx文件
import React from 'react';
import styles from './styles.module.scss';

function VelButton() {
    return (
        <button>默认按钮<button>
    )
}

export default VelButton;

5、使用组件

1
2
3
4
5
6
7
8
9
10
11
//app.tsx文件
import VelButton from './components/button';

function App() {
    return(
        .....
        .....
        <VelButton></VelButton>
        ......
    )
}

6、添加样式

1
2
3
4
//styles.module.scss
.button{
    padding: 10px 20px;
}

7、安装classnames模块

1
npm install classnames -s

8、引入样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//index.tsx文件
import React from 'react';
import styles from './styles.module.scss';
import classnames from 'classnames';

function VelButton() {
    return (
        <button className={classnames(
            styles.button
        )}>默认按钮<button>
    )
}

export default VelButton;