React小白自学指南——基础篇，第二篇《JSX语法和组件》下篇

2024-01-22 03:08:23

前言

React已经成为现代Web开发的热门前端框架之一，越来越多的开发者加入React社区的队伍。但是对于初学者来说，学习一个新的技术框架可能会感到有些困难，特别是如果在没有指导和明确的学习计划的情况下。因此，这篇React基础教程应运而生，它将以循序渐进的方式引导您入门React，让您快速掌握JSX语法、组件开发等基本知识，从而为后续的React学习和应用打下坚实的基础。

JSX语法

JSX(JavaScript XML)是一种语法扩展，它允许您在JavaScript代码中编写类似XML的代码。JSX的主要目的是让您能够更轻松地编写React组件。

JSX代码非常类似于HTML代码，但它也有自己的一些独特之处。例如，在JSX代码中，您需要使用大括号来包裹表达式。

const name = "John";
const element = <h1>Hello, {name}!</h1>;

JSX代码还可以使用注释和条件语句。

{/* This is a comment */}
{name && <h1>Hello, {name}!</h1>}

组件开发

组件是React应用程序的基本构建块。组件可以是简单的，也可以是复杂的，它们可以被组合在一起以创建更大的组件。

组件通常由两个部分组成：状态和渲染方法。状态是组件的数据，渲染方法是组件如何将数据呈现给用户。

class MyComponent extends React.Component {
  state = {
    name: "John"
  };

  render() {
    return <h1>Hello, {this.state.name}!</h1>;
  }
}

组件可以使用各种各样的属性和方法。属性是组件从父组件接收的数据，方法是组件可以执行的操作。

class MyComponent extends React.Component {
  state = {
    name: "John"
  };

  handleClick = () => {
    this.setState({ name: "Jane" });
  };

  render() {
    return (
      <div>
        <h1>Hello, {this.state.name}!</h1>
        <button onClick={this.handleClick}>Change name</button>
      </div>
    );
  }
}