react-从零开始搭建项目-项目框架搭建

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

前言

平时在创建react项目时，我们总喜欢用脚手架，因为这样可以快速搭建起项目。但是弊端也是有的，比如不太容易理解项目为什么要这样搭建，也可能搞不清楚各部分代码是如何配合的，所以我想尝试自己从零开始搭建一个react项目，以便搞清楚项目框架里各部分代码之间的关系。

本文是对这次尝试的记录与总结，如有表达不足或者错误之处，还望大家帮忙指出。

本文只是项目框架搭建，直至文末也不能运行项目。需要运行的话，可连着阅读webpack配置篇。

步骤分析

做一件事情前，分析一下步骤总能帮助我们更快的将事情完成 ------ 鲁迅

上面的话我没说过 ------ 鲁迅

技术选型

node与npm默认大家已安装
react框架，版本："react": "^17.0.2"
webpack打包工具，版本"webpack": "^5.47.1"

创建项目（react代码）

新建项目文件夹，确保自己已安装node与npm
初始化项目：npm init，生成package.json
创建项目文件：

src/index.js

这个文件写了一个组件，并将组件挂载到id为root的节点上，需要注意这里虽然import了React与ReactDOM，但我们还未安装这两个依赖。

安装依赖，运行：npm i react react-dom -D

另外import的语法也需要另外配置才能生效，这个下一篇会说到

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => (
  <div>
    <p>hello react</p>
  </div>
);

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

public/index.html

很简单的一个html文件，作为容器（或者说模板）来挂载组件，只需关注id为root的节点，与上面index.js文件的id对应。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello react</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

目前存在的问题：

项目无法运行，
react的JSX语法无法被编译
import语法无法被支持

那这一些都需要webpack来帮我们解决！

react-从零开始搭建项目-webpack配置

react-从零开始搭建项目-项目框架搭建

前言

步骤分析

技术选型

创建项目 （react代码）

下一篇

创建项目（react代码）