React组件

在React中网页被拆分为了一个一个组件，组件是独立可复用的代码片段。具体来说，组件可能是页面中的一个按钮，一个对话框，一个弹出层等。React中定义组件的方式有两种：基于函数的组件和基于类的组件。本节我们先看看基于函数的组件。

基于函数的组件其实就是一个会返回JSX（React元素）的普通的JS函数，你可以这样定义：

import ReactDOM from "react-dom/client";
​
// 这就是一个组件
function App(){
    return <h1>我是一个React的组件！</h1>
}
​
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);

函数式组件主要有两个注意点：

1. 函数名首字母大写
2. 返回值是一个JSX（React元素）

为了使得项目结构更加的清晰，更易于维护，每个组件通常会存储到一个单独的文件中，比如上例中的App组件，可以存储到App.js中，并通过export导出。

App.js

function App(){
    return <h1>我是一个React的组件！</h1>
}
​
export default App;

或者使用箭头函数

const App = () => {
    return <h1>我是一个React的组件！</h1>;
};
​
export default App;

在其他文件中使用时，需要先通过import进行引入：

index.js

import ReactDOM from "react-dom/client";
import App from "./App";
​
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);

引入后通过<组件名/>或<组件名></组件名>即可引入组件。

在一个组件中可以直接使用其他组件，比如有如下Button.js:

const Button = () => {
    return <button>我是一个按钮</button>;
};
​
export default Button;

在App.js中可以直接引入该组件：

import Button from "./Button";
​
const App = () => {
    return <div>
        <h1>我是一个React的组件！</h1>
        <Button/>
    </div>;
};
​
export default App;

除了函数组件外，在React中还有一种类组件，但类组件使用起来并不方便，所以在React中类组件的使用场景越来越少。所以，我们先将类组件放下暂且不表，后续课程中会对有对类组件的补充。

引入样式

那么如何为React组件引入样式呢？很简单直接在组件中import即可。例如：我们打算为Button组件编写一组样式，并将其存储到Button.css中。我们只需要直接在Button.js中引入Button.css就能轻易完成样式的设置。

Button.css：

button{
    background-color: #bfa;
}

Button.js：

import './Button.css';
const Button = () => {
    return <button>我是一个按钮</button>;
};
export default Button;

使用这种方式引入的样式，需要注意以下几点：

1. CSS就是标准的CSS语法，各种选择器、样式、媒体查询之类正常写即可。
2. 尽量将js文件和css文件的文件名设置为相同的文件名。
3. 引入样式时直接import，无需指定名字，且引入样式必须以./或../开头。
4. 这种形式引入的样式是全局样式，有可能会被其他样式覆盖。