05-2380

菜鸟教程 react

原标题：菜鸟教程 react

导读：

在如今这个前端开发盛行的时代,React 作为一款流行的 JavaScript 库，已经成为了许多开发者的首选，就让我带你详细了解 React，帮你更快地掌握这门技术，Reac...

在如今这个前端开发盛行的时代,React 作为一款流行的 JavaScript 库，已经成为了许多开发者的首选，就让我带你详细了解 React，帮你更快地掌握这门技术。

React 是什么？它由 Facebook 开发，用于构建用户界面，特别是在单页应用中，React 的核心思想是组件化，通过将界面拆分成一个个独立的组件，使得代码更加模块化、易于维护。

让我们从安装 React 开始，在开始之前，你需要确保你的电脑上已经安装了 Node.js 和 npm，安装好这些环境后，你可以通过以下命令来创建一个 React 项目：

npx create-react-app my-app

这条命令会创建一个名为 my-app 的新项目，你只需进入项目目录并启动开发服务器：

cd my-app
npm start

让我们深入了解一下 React 的几个核心概念。

组件

组件是 React 应用程序的基本构建块，它可以是函数或者类，用于描述界面的一部分，一个按钮、一个输入框或者一个列表都可以是一个组件，下面是一个简单的函数组件示例：

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

JSX

JSX 是一种 JavaScript 的语法扩展，它看起来很像 HTML，React 使用 JSX 来描述用户界面应该呈现出什么样子，在编译时，JSX 会被转换为普通的 JavaScript 对象，这些对象最终会被渲染到页面上。

const element = <h1>Hello, world!</h1>;

State 和 Props

State 和 Props 是 React 组件的两大核心概念，State 用于表示组件内部的状态，而 Props 则是传递给组件的参数。

当一个组件的状态发生变化时,React 会重新渲染这个组件，以下是一个包含 State 的组件示例：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  tick() {
    this.setState({
      date: new Date()
    });
  }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Props,即属性，是传递给组件的参数，通过 Props，我们可以实现组件之间的数据传递，以下是一个接受 Props 的组件示例：

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

事件处理

在 React 中，你可以很容易地为组件添加事件处理函数，只需在 JSX 中使用小驼峰命名的方式来指定事件处理函数，以下是一个包含事件处理函数的组件示例：

function App() {
  function handleClick() {
    alert('You clicked the button!');
  }
  return (
    <button onClick={handleClick}>Click me</button>
  );
}