01. Hello React

引言

React 已经成为构建用户界面的流行库。在本文中，我们将探讨如何将 React 整合到你的 Web 项目中。

HTML 结构和库引入

首先，让我们看一下 HTML 结构和我们所需的库。

<!-- HTML 结构 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>hello react</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="../../js/react.production.min.js"></script>
    <script type="text/javascript" src="../../js/react-dom.production.min.js"></script>
    <script type="text/javascript" src="../../js/babel.min.js"></script>
    <script type="text/babel">
        // JSX 代码和 ReactDOM.render
    </script>
</body>
</html>

JSX 代码和 React 元素

现在，让我们深入了解 JSX 代码并了解如何创建 React 元素。

const vDOM = <h1>hello react</h1>;

这段 JSX 代码表示一个简单的 React 元素，一个包含文本 "hello react" 的标题。

渲染到页面

为了使我们的 React 元素在页面上可见，我们使用 ReactDOM.render。

ReactDOM.render(vDOM, document.getElementById('root'));

这行代码将 React 元素 (vDOM) 渲染到具有 id 为 'root' 的 HTML 元素中。

完整代码示例

以下是完整的代码示例，供你在浏览器中尝试。

<!-- 完整代码示例 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>hello react</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="../../js/react.production.min.js"></script>
    <script type="text/javascript" src="../../js/react-dom.production.min.js"></script>
    <script type="text/javascript" src="../../js/babel.min.js"></script>
    <script type="text/babel">
        const vDOM = <h1>hello react</h1>;
        ReactDOM.render(vDOM, document.getElementById('root'));
    </script>
</body>
</html>

在浏览器中预览

在浏览器中打开此 HTML 文件，以查看 React 的渲染效果。

结论

总的来说，React 提供了一种简洁而强大的方式来构建用户界面。本文为你进入 React 世界的旅程提供了一个起点。深入研究 React 的文档，探索更多高级功能。

参考

hello react

React新手上路之hello world