React 入门：JSX语法详解

简介

React是一个用于构建用户界面的JavaScript库，它引入了JSX语法，使得你可以在JavaScript代码中编写类似HTML的结构。JSX在编译后会被转换成合法的JavaScript对象。

JSX基础

JSX是一种看起来像HTML的JavaScript语法扩展。它并不直接被浏览器执行，而是通过Babel这样的编译器转换成JavaScript。

基本语法

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

在React中，你可以像这样创建一个React元素。

表达式

JSX支持在花括号{}中嵌入任何有效的JavaScript表达式。

const name = 'Kimi';
const element = <h1>Hello, {name}!</h1>;

组件

在JSX中，你可以使用小写标签来表示HTML元素，而使用大写标签来表示React组件。

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

const element = <Welcome name="Kimi" />;

JSX与HTML的区别

1. 类名 vs className：在JSX中，class需要替换为className。

   const element = <div className="my-div">Hello, world!</div>;
   

2. 事件处理：JSX中的事件处理使用驼峰命名法。

   function handleClick() {
     console.log('Clicked!');
   }
   
   const element = <button onClick={handleClick}>Click me</button>;
   

3. 布尔属性：布尔属性如果在JSX中为true，则不需要提供属性值。

   const element = <input type="checkbox" checked />;
   

条件渲染

JSX中的条件渲染与JavaScript中的条件语句相同。

const element = (
  <div>
    {condition ? <ChildComponent /> : <AnotherComponent />}
  </div>
);

列表渲染

使用JavaScript的map()函数来渲染列表。

const items = ['item1', 'item2', 'item3'];
const element = (
  <ul>
    {items.map(item => (
      <li key={item}>{item}</li>
    ))}
  </ul>
);

样式

在JSX中，你可以使用行内样式，或者通过className来引用CSS类。

const element = (
  <div style={{ color: 'red', fontSize: 20 }}>
    Hello, world!
  </div>
);

函数作为子元素

你可以将函数作为子元素传递给组件，这在处理事件时非常有用。

const element = <ParentComponent onClick={handleClick} />;

结论

通过这篇教程，你应该对React的JSX语法有了基本的了解。JSX使得React的应用开发更加直观和声明式，是学习React不可或缺的一部分。