React + webpack 开发单页面应用简明中文文档教程（二）创建项目

React + webpack 开发单页面应用简明中文文档教程（二）创建项目

React 入门系列教程导航

React + webpack 开发单页面应用简明中文文档教程（一）一些基础概念
React + webpack 开发单页面应用简明中文文档教程（二）创建项目
React + webpack 开发单页面应用简明中文文档教程（三）目录说明以及调整项目构架文件
React + webpack 开发单页面应用简明中文文档教程（四）调整项目文件以及项目配置
React + webpack 开发单页面应用简明中文文档教程（五）配置 api 接口请求文件
React + webpack 开发单页面应用简明中文文档教程（六）渲染一个列表，初识 jsx 文件
React + webpack 开发单页面应用简明中文文档教程（七）jsx 组件中调用组件、父组件给子组件传值
React + webpack 开发单页面应用简明中文文档教程（八）Link 跳转以及编写内容页面
React + webpack 开发单页面应用简明中文文档教程（九）子组件给父组件传值
React + webpack 开发单页面应用简明中文文档教程（十）在 jsx 和 scss 中使用图片
React + webpack 开发单页面应用简明中文文档教程（十一）将项目打包到子目录运行

---

在上一篇博文当中，你是否感觉我实在是太啰嗦了一点，说了很多你不喜欢听的东西呢。

不重要啦，这里，我们开始。

使用 mac 或者 Linux 系统的朋友直接进行，使用 windows 的朋友，先自行解决终端的问题。

上一篇博文让你安装 nodejs ，不会没安装吧？没安装赶紧去安装。

安装脚手架

打开终端工具，输入下面的命令，安装 react 脚手架

sudo npm i -g create-react-app

会要求你输入系统用户密码，输入密码的时候，看不见星号，完成后直接按回车。正确就会执行，否则会告诉你密码错误。

全局安装 create-react-app 工具。

然后我们就可以使用 create-react-app 来创建项目了。

---

这段可以跳过

我觉得这个命令比较长，所以我们可以将这个命令简写一下

Bash 用户

echo 'alias cra="create-react-app"' >> ~/.bash_profile
. ~/.bash_profile

zsh 用户

echo 'alias cra="create-react-app"' >> ~/.zshrc
. ~/.zshrc

然后我们就可以使用 cra 这个命令，来取代这个长命令了。

可跳过部分结束。

创建项目

在命令行中，进入到你希望创建项目的目录。

cd ~/Sites/Mywork

创建一个 react-test 的项目

create-react-app react-test

然后这个命令需要运行一会儿。它在下载一些东西。

如上图所示，我们已经执行完成了。已经给出了接下来要执行的命令。

运行项目

根据上图给出来的命令，我们直接执行：

cd react-test
npm start

因为我 3000 端口被占用，所以跑在了 3002 端口上了。之前会有一个提示，直接回车即可继续运行。

然后应该会自动打开系统默认浏览器，访问 http://localhost:3002/ 地址。

好，到这里，我们今天的工作就完成了，顺利的搭建，并跑起来了。

相信你也没遇到什么问题。

本文由 FungLeo 原创，允许转载，但转载必须保留首发链接。