React.js 快速介绍

React 能够创建完全在浏览器中呈现的动态网站。 它的核心元素是 JSX，一种类似于 HTML 和 XML 的语法。

Language	Full Form	Use	Tags
HTML	Hyper Text Markup Language	Website Development	Predefined tags (e.g., H1, H2, P)
XML	Extensible Markup Language	Data Structuring	Customizable Tags
JSX	JavaScript XML	Combines HTML and JavaScript	HTML & Custom Tags

说明性示例

HTML

<code class="language-html"><div>
  <h1>This is heading 1</h1>
  <p>This is an example paragraph in HTML</p>
</div></code>

XML

<code class="language-xml"><example><title>XML Example
  <note>This is a note</note><data1>Example Data</data1><data2>Example Data</data2></title></example></code>

JSX

<code class="language-javascript">function ExampleReactComponent() {
  return (
    <div>
      <h1>This is heading 1</h1>
      <p>This is an example paragraph in JSX</p>
    </div>
  );
}</code>

HTML、XML 和 JSX 之间的相似性是显而易见的。 JSX 在 JavaScript 中独特地集成了 HTML，因此得名：JavaScript XML。

HTML 和 JavaScript 的融合实现了动态 HTML 操作。 例如，单击按钮可以切换类名称。

反应组件

React 简化了返回 JSX 的自定义组件的定义。 本质上，React 组件是一个生成 JSX 的 JavaScript 函数。

渲染根 React 组件后，JSX 会自动转换为 HTML 并集成到网页中。 React 允许创建自定义组件（类似于自定义标签）以包含在其他组件中。

这是一个使用 ExampleReactComponent 的组件：

<code class="language-javascript">function RootReactComponent() {
  return (
    <div>
      <h1>This is the main Component</h1>
      <ExampleReactComponent />
    </div>
  );
}</code>

道具

与 HTML 属性类似，React 组件也使用 props。

<code class="language-javascript">function PropsExample(props) {
  console.log(props); // Prints { exampleValue: "example-value" }
  return (
    <div>
      <h1>Props Example</h1>
      {props.exampleValue}
    </div>
  );
}

function MainComponent() {
  return (
    <div>
      <h1>This is the Main Component</h1>
      <PropsExample exampleValue={"example-value"} />
    </div>
  );
}</code>

渲染 MainComponent 调用 PropsExample，并使用 { exampleValue: "example-value" } 作为 props 参数。 请注意，JavaScript 变量使用 {}.

嵌入到 JSX 中

状态

数据通常存储在变量中以供显示。 React 利用“状态”进行数据管理，充当 getter/setter 机制。 当状态被修改时，React 会自动更新组件的 HTML。

此示例演示了状态更改时自动 HTML 更新：

<code class="language-javascript">import { useState } from 'react';

function IncrementDecrement() {
  const [value, setValue] = useState(0); // Initial value: 0

  function increment(e) {
    setValue(value + 1);
  }

  function decrement(e) {
    setValue(value - 1);
  }

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      {value}
    </div>
  );
}</code>

使用 Vite 构建 React 应用

像 Vite 这样的工具简化了将 React 组件和 JSX 捆绑到浏览器可执行 JavaScript 中的过程。

启动 React 项目：

<code class="language-bash">npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev</code>

结论

对 React.js 的介绍提供了基本的理解。 建立 Vite 项目后，尝试创建 React 组件以加深理解。 更多学习资源请访问https://www.php.cn/link/27a5eaafdb88c45dd61732d6a6493421。

以上是React.js 快速介绍的详细内容。更多信息请关注PHP中文网其他相关文章！