react-tutorial

React 是一个用于构建用户界面的 JavaScript 库，它可以帮助开发者快速构建高效、可维护的 Web 应用程序。以下是一些关于 React 的基础教程和资源。

安装 React

在开始之前，您需要安装 Node.js 和 npm（Node.js 包管理器）。安装完成后，可以通过以下命令创建一个新的 React 应用程序：

npx create-react-app my-app

JSX

React 使用 JSX（JavaScript XML）来描述用户界面。JSX 类似于 HTML，但它允许您在 JavaScript 中编写标签。

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

组件

React 应用程序由组件组成。组件是可重用的代码块，它们可以接受参数（props）并返回 JSX。

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Alice" />;
ReactDOM.render(element, document.getElementById('root'));

state 和 props

React 组件可以通过 state 和 props 来管理数据。

State：用于存储组件内部的数据，它可以随着用户交互而变化。
Props：用于从父组件向子组件传递数据。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

本站链接

更多关于 React 的教程，请访问我们的React 教程页面。