前端 React 入门 Day01 - 了解 React 和 JSX 基础
React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。它使得开发者能够以组件的形式组织 UI，使得代码更加模块化和可维护。React 的核心思想是通过组件来构建用户界面，通过状态管理和生命周期方法来控制组件的行为。
什么是组件？
组件是 React 的核心概念之一。它们是可以复用的 UI 片段，可以接受输入（称为 "props"）并返回一个 React 元素。React 组件可以是类组件或函数组件。
让我们来看一个简单的函数组件的示例：
import React from 'react';
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
在上面的例子中，Greeting 是一个函数组件，它接收一个 name 的 prop，并渲染出一个包含该名称的问候语。
什么是 JSX？
JSX（JavaScript XML）是一种 JavaScript 的语法扩展，允许我们在 JavaScript 中编写类似于 HTML 的语法。使用 JSX，开发者可以更直观地构建 React 组件的结构。值得注意的是，JSX 不是 HTML，但它的语法非常相似。
下面是一个使用 JSX 的简单示例：
import React from 'react';
function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
</div>
);
}
在这个例子中，App 组件渲染了两个 Greeting 组件，并向它们传递了不同的 name 属性。JSX 使得我们可以通过类似 HTML 的语法来描述 UI 结构。
渲染组件
要在页面上渲染一个 React 组件，首先需要将其放入一个 DOM 节点中。通常，我们使用 ReactDOM.render() 方法来实现这一点。
下面是如何将我们的 App 组件渲染到网页上的示例：
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));
在上面的代码中，ReactDOM.render() 接受两个参数：一个是要渲染的 React 元素（在这个例子中是 <App />），另一个是要渲染到的 DOM 节点（document.getElementById('root') ）。确保在 HTML 文件中有一个 id 为 root 的 DOM 元素，以便 React 可以将其内容渲染到那里。
综合示例
结合以上内容，我们可以创建一个完整的小应用，显示不同用户的问候语。以下是整个代码示例，包括 HTML 结构和 React 代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Demo</title>
</head>
<body>
<div id="root"></div>
<script src="path/to/your/bundle.js"></script>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
<Greeting name="Charlie" />
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
结语
通过本文，我们初步了解了 React 的基本概念和 JSX 语法。React 通过组件化的方式，让我们能够更高效地创建复杂的用户界面。接下来，我们可以深入学习 React 的状态管理、生命周期、事件处理等功能，以便更好地掌握这个强大的工具。欢迎继续关注后续的学习内容！
