React入门(二):React的开发环境搭建

343 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第10天,点击查看活动详情

本节主要介绍如何搭建一个React的开发环境,一个基本的React项目目录包括哪些内容?最终可以运行一个本地Demo工程。

1.初始化开发环境

这里我们直接引用官方文档的做法:

Create React App 是一个用于学习 React 的舒适环境,也是用 React 创建新的单页应用的最佳方式。它会配置你的开发环境,以便使你能够使用最新的 JavaScript 特性,提供良好的开发体验,并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6。要创建项目,请执行

npx create-react-app my-app
cd my-app
npm start

要注意my-app是你希望创建的项目名称,可以改成其他的名字,执行完npx命令之后当前目录下便会生成名称是my-app的React工程文件夹。

注意这里在之前网上的一些教程中仍然使用npm的方式进行初始化,这里在最新版本的脚手架可能会报错,如果遇问题可以参考这篇博客解决:blog.csdn.net/sdsh1880gm/…

之后通过WebStorm或者Vscode打开对应的my-app工程就可以了,下面我们来分析一下一个基础的项目的目录组成部分

2. React项目目录介绍

我们直接贴一张当前目录的结构图吧,这样可能清晰一些:

image.png

3. 运行React项目

运行React项目直接使用package.json中定义的运行脚本就可以了

4. 去除不必要的项目文件

官方脚手架帮助我们初始化的项目工程中其实有一些是为了实现他的Demo,我们开始一个新的项目时候这些文件和内容都可以去掉