React 学习之旅 1 - 基础篇 1

概览

本文介绍 React 基础知识，包括创建第一个 React 应用、组件的概念和使用、JSX 语法等内容。通过简单的示例代码，帮助你快速入门 React 开发。文章涵盖了 React 最基本也最重要的概念，为后续深入学习打下基础。

HelloWorld

DEMO: react-journey/01/helloworld.html

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

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<MyApp />);

创建和嵌套组件

React 组件：

• React 程序由组件组成
• 一个组件是 UI 的一部分，拥有自己的逻辑和外观
• 组件可以小到一个按钮，也可以大到一个页面。
• React 组件是返回 JSX 的 JavaScript 函数

DEMO: react-journey/01/my-button.html

function MyButton() {
    return <button>Click me</button>;
}

export default function MyApp() {
    return (
        <div>
            <h1>Welcome to my app</h1>
            <MyButton />   
        </div>
    )
}

说明：

• React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母。如：MyButton、MyApp
• export default 关键字指定了文件中的主要组件

使用 JSX 写标签

什么是 JSX？

JSX 可以理解为是一种特殊的语法糖，可以让你在 JS 代码中直接写 HTML 一样的代码。

DEMO: react-journey/01/jsx.html

// 这是 JSX 写法
function Welcome() {
  const name = "谢小沛";
  return (
    <>
      <h1>你好！</h1>
      <p>{name}</p>
    </>
  );
}

DEMO: react-journey/01/no-jsx.html

// 这是不使用 JSX 的写法
function Welcome() {
  const name = "谢小沛";
  return React.createElement(
    'div',
    null,
    React.createElement('h1', null, '你好!'),
    React.createElement('p', null, name)
  );
}

JSX 特点：

• 更直观：像 HTML 一样写界面，代码结构更清晰容易理解
• 更灵活：可以在 JSX 中嵌入 JS 表达式
• 有规则：
  • 必须闭合标签
  • 要有一个根标签包裹（如：<div>...</div> 或 <>...</>）
  • 使用 className 而不是 class（因为 class 是 JS 关键字）

PS：工具：HTML -> JSX 在线转换器

添加标签样式

DEMO: react-journey/01/add-style.html

function Square() {
  return <div className="square"></div>;
}

function MyApp() {
  return (
    <div>
      <Square />
    </div>
  );
}

.square {
  border: 3px solid #ccc;
  width: 100px;
  height: 100px;
  display: inline-block;
}

显示数据

DEMO: react-journey/01/show-data.html

const user = {
  name: '谢小沛',
  occupation: 'Front-end Developer',
};

const Profile = () => {
  return (
    <>
      <p>姓名：{user.name} </p>
      <p>职业：{user.occupation}</p>
    </>
  );
};

function MyApp() {
  return (
    <div>
      <Profile />
    </div>
  );
}

条件渲染

DEMO: react-journey/01/condition.html

条件渲染 if：

const isShow = true;

const Content = () => {
  let content;
  if (isShow) {
    content = <div>Blow up!</div>;
  } else {
    content = <div>Nothing happened.</div>;
  }
  return content;
};

条件渲染 ?（三元表达式）：

content = isShow ? <div>Blow up!</div> : <div>Nothing happened.</div>;

当你不需要 else 分支时，你还可以使用 逻辑 && 语法：

content = isShow && <div>Blow up with `&&` !</div>;

列表渲染

渲染列表：可以使用 for 循环和数组的 map() 函数 来渲染组件列表：

DEMO: react-journey/01/loop.html

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

const ProductList = () => {
  // 写法 1：使用 for...of 循环遍历 products
  const listItems = [];
  for (const product of products) {
    listItems.push(<li key={product.id}>{product.title}</li>);
  }

  // 写法 2：map 方法会返回一个新数组，非常适合 React 的列表渲染
  // const listItems = products.map((product) => <li key={product.id}>{product.title}</li>);

  return <ul>{listItems}</ul>;
};

资源

• 代码仓库：xiezipei/react-journey

参考

• 官方文档：快速入门 – React 中文文档