React作为与Vue,Angular同样热门的前端框架之一,因其简单的代码风格(俗称语法糖)受广大开发者追捧。

现在我也来学一下React。

创建一个项目,首先要选择合适的编辑器(我选择的是VS Code)以及配置环境。

首先需要安装node.js,直接搜索并在官网下载安装包。

    node.js官网:https://nodejs.org/en/

    选择适合的版本后下载下来(最好是最新版),并打开安装程序,如下图所示

使用yarn 创建 react 项目 如何创建一个react项目_Code

    然后,根据安装提示安装node.js,npm包管理工具也会一同安装。

    安装完成后,打开cmd命令行,输入 node -v 和 npm -v 来查看版本号,如果显示则安装完成(如下图)。

使用yarn 创建 react 项目 如何创建一个react项目_使用yarn 创建 react 项目_02

当然也可以从VS Code新建一个终端输入命令来查询(如下图)

使用yarn 创建 react 项目 如何创建一个react项目_node.js_03

成功安装node和npm后,我们可以用npm来创建新的项目,首先用npm 安装 create-react-app工具(脚手架工具),其可以自动地在本地目录中创建react项目。

在终端输入npm命令:

 npm install -g create-react-app

然后继续输入 create-react-app my-new-app

其实上述两句命令可以用 npx create-react-app my-new-app来代替

不同之处在于第一种需要安装脚手架,第二种跳过安装脚手架,直接创建项目

这里是默认安装在用户目录下的,想更换目录可以先进入到对应目录再输入上述命令

等待一段时间待项目创建好你会发现包括以下目录

使用yarn 创建 react 项目 如何创建一个react项目_使用yarn 创建 react 项目_04

其中,    --node_modules用于存放项目的依赖包,也就是构建这个React项目可能会用到的工具,

              --public文件夹中是 index.html存放目录,也就是React根页面的所在地

              --src中用于存放js文件,也就是项目开发中的主要区域

              --json文件不能直接打开,需要用到文本编辑器,本人用的是VScode

              --package.json用于记录项目信息,以及外部依赖包的导入信息等

我们可以看到dependencies下包含 react / react-dom / react-scripts三个依赖包,后续导入的包都会记录于此

使用yarn 创建 react 项目 如何创建一个react项目_Code_05

这里只安装了一些可以说是必备的包,后续大家用到什么包搜索对应的npm命令就好了。
因为npm是国外服务器来维护的,下载起来可能会比较慢(你懂的),然后大家可以用淘宝镜像cnpm,cnpm是十分钟和国外服务器同步一次。

  然后就可以通过命令 npm start 来启动项目(注意启动时 要在项目路径下输入 npm start启动命令,否则会报start命令找不到的错误),自动弹出localhost:3000的网页窗口,这样一个React项目就算创建成功了!我们 只需要继续完善就好了。