My React App

2024-02-11 12:35:19

React 造轮子项目工程搭建经历

这篇文章将深入探讨我在从零开始构建 React 造轮子项目时搭建工程环境的经历。对于那些对 React 的内部运作方式感兴趣、希望深入了解其底层机制的开发人员来说，这将是一个宝贵的资源。

工程搭建

初始化项目

使用以下命令初始化项目：

npx create-react-app my-react-app

安装依赖项

安装必要的依赖项：

npm install --save react react-dom

创建项目结构

创建以下项目结构：

src/
- App.js
- index.js
public/
- index.html

App.js

App.js 是我们的 React 应用程序的入口点。在这里，我们定义了我们的 React 组件：

import React, { useState } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default App;

index.js

index.js 是我们的应用程序的入口点。在这里，我们渲染我们的 App 组件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

index.html

index.html 是我们的应用程序的 HTML 入口点。在这里，我们链接到我们的 index.js 脚本：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
  </head>
  <body>
    <div id="root"></div>
    <script src="index.js"></script>
  </body>
</html>