从创建到启动，React电商项目的初始搭建指南

React电商项目是电子商务网站的前端项目，它需要处理诸如商品展示、购物车、支付、订单管理等功能。搭建一个React电商项目需要一定的技术基础，本指南将从创建一个新的React项目开始，逐步讲解如何使用create-react-app脚手架搭建一个React电商项目，并进行配置，使其在webstorm中支持react语法提示，在index.html中加入一些移动端的适配属性，并开始配置。

1. 项目搭建

1.1 创建一个新的React项目

使用create-react-app脚手架创建一个新的React项目：

npx create-react-app my-ecommerce-app

1.2 配置webstorm支持react语法提示

在webstorm中，点击File > Settings > Plugins，搜索并安装React插件。

1.3 删除项目中不必要的文件

删除项目中不必要的文件，如：

• README.md
• src/App.test.js
• src/logo.svg

1.4 在index.html中加入一些移动端的适配属性

在index.html文件中加入以下代码：

<meta name="viewport" content="width=device-width, initial-scale=1" />

2. 项目配置

2.1 使用CSS预处理器Sass/SCSS

在项目中使用CSS预处理器Sass/SCSS，需要安装sass和node-sass包：

npm install sass node-sass --save-dev

在src文件夹中创建一个新的文件夹名为styles，并在其中创建一个新的文件名为styles.scss。在styles.scss文件中加入以下代码：

/* 你的样式代码 */

在src/index.js文件中，导入styles.scss文件：

import './styles.scss';

2.2 利用Node.js和npm管理项目

在项目中使用Node.js和npm管理项目，需要安装以下包：

npm install npm-run-all --save-dev

在package.json文件中，添加以下脚本：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

2.3 使用git进行版本控制

在项目中使用git进行版本控制，需要安装git：

brew install git

在项目目录中初始化git仓库：

git init

将项目添加到暂存区：

git add .

提交项目到本地仓库：

git commit -m "Initial commit"

将项目推送到远程仓库：

git remote add origin https://github.com/your-username/my-ecommerce-app.git
git push -u origin master

至此，您已经成功搭建了一个React电商项目，并进行了配置，使其在webstorm中支持react语法提示，在index.html中加入了一些移动端的适配属性，并开始配置。您还可以使用CSS预处理器Sass/SCSS，利用Node.js和npm管理项目，使用git进行版本控制。