返回

从网站中添加React: React入门学习笔记1

前端

从网站中添加React

React是一个用于构建用户界面的JavaScript库，它可以帮助您创建交互式和动态的网页。React从一开始就被设计为逐步采用，并且您可以根据需要选择性地使用React。大多数网站不是、也不需要是单页应用程序，通过仅仅几行代码并且无需使用构建工具，先尝试在网站的一小部分中使用React，然后逐步扩展它的存在，或只将其涵盖在少数动态部件中。

要将React添加到您的网站，您需要遵循以下步骤：

  1. 添加一个DOM容器

    首先，您需要在您的HTML页面中添加一个DOM容器，这个容器将用来挂载您的React组件。DOM容器可以是一个<div>元素，也可以是一个<body>元素。

  2. 加载React库

    接下来，您需要加载React库。您可以通过以下两种方式之一来加载React库：

    • 从CDN加载：

      <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

    • 使用npm安装：

      npm install react react-dom

      然后在您的HTML页面中引用它们：

      <script src="./node_modules/react/umd/react.production.min.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>

  3. 创建React组件

    接下来，您需要创建一个React组件。React组件是一个JavaScript类，它定义了如何渲染一个用户界面。要创建一个React组件，您可以使用以下两种方式之一：

    • 使用ES6类：

      class MyComponent extends React.Component {
  render() {
    return <h1>Hello, world!</h1>;
  }
}

    • 使用函数组件：

      const MyComponent = () => {
  return <h1>Hello, world!</h1>;
};

  4. 将组件挂载到DOM容器中

    最后，您需要将组件挂载到DOM容器中。您可以使用以下代码来将组件挂载到DOM容器中：

    ReactDOM.render(<MyComponent />, document.getElementById('root'));

至此，您已经成功地在您的网站中添加了React。您可以通过在您的组件中添加更多的代码来创建更复杂的交互式和动态的网页。