react 基本语法
时间: 2023-09-04 13:12:40 浏览: 54
React 是一个用于构建用户界面的 JavaScript 库。它采用组件化的开发方式,让开发者可以将应用程序拆分为独立的、可复用的组件,从而实现高效的开发和维护。
React 的基本语法包括以下几个方面:
1. 引入 React 库:在代码的开头,需要引入 React 库。可以使用以下语句:
```javascript
import React from 'react'; ```
2. 创建组件:使用类或函数来定义一个组件。类组件需要继承 `React.Component` 类,函数组件则直接返回一个 JSX 元素。例如:
```javascript
// 类组件
class MyComponent extends React.Component {
render() {
return <div>Hello, World!</div>;
}
}
// 函数组件
function MyComponent() {
return <div>Hello, World!</div>;
}
```
3. 渲染组件:使用 `ReactDOM.render()` 方法将组件渲染到页面上的指定元素中。例如:
```javascript
ReactDOM.render(<MyComponent />, document.getElementById('root'));
```
4. JSX 语法:JSX 是一种类似 HTML 的语法扩展,用于描述组件的结构和外观。它允许在 JavaScript 代码中直接写 HTML 标记,并支持使用花括号 `{}` 插入动态内容。例如:
```javascript
function MyComponent() {
const name = 'John Doe';
return <div>Hello, {name}!</div>;
}
``