webstorm+create-react-app搭建react.js运行环境上篇

avwu 发布于2019-07-01 18:30 / 2759人阅读

摘要：多带带使用基本上是不可能的事情。不要指望着类似于下载放到标签就开始使用。这就是所谓的全家桶。但开发开发出了一个打包运行环境插件的脚手架工具。所以可以把的源改成国内的的源，这样会加速下载过程。

React.js 多带带使用基本上是不可能的事情。不要指望着类似于 jQuery 下载放到  标签就开始使用。使用 React.js 不管在开发阶段生产阶段都需要一堆工具和库辅助，编译阶段你需要借助 Babel；需要 Redux 等第三方的状态管理工具来组织代码；如果你要写单页面应用那么你需要 React-router。这就是所谓的“React.js全家桶”。
但facebook开发开发出了一个打包运行环境插件的脚手架create-react-app 工具。它可以帮助我们一键生成所需要的工程目录，并帮我们做好各种配置和依赖，也帮我们隐藏了这些配置的细节。也就是所谓的“开箱即用”。

1.安装前提条件 node.js和npm环境搭建

在上一篇文章我们讲过node.js和npm环境搭建如果还没装好的同学可以去查看我的上一篇文章
这里我就直接进行create-react-app的安装

2.你可能会遇到下载速度过慢而失败的情况

npm 下载的时候是从国外的源下载的缘故。所以可以把 npm 的源改成国内的 taobao 的源，这样会加速下载过程。在执行上面的命令之前可以先修改一下 npm 的源：

npm config set registry https://registry.npm.taobao.org

3.配置好上面的环境后就可以进行安装了

npm install -g create-react-app

4.安装好以后就可以直接使用它来构建一个 react 的前端工程：

create-react-app app1

5.等插件加载完毕后你会看到下面的界面

6.按照最后的的提示你可以做以下的操作，

我们就可以启动工程了，进入工程目录然后通过 npm 启动工程：

cd app1
npm start

7.顺利的话会自动弹出如下页面，没有弹出你也可以手动访问

云服务器专线服务 php运行环境搭建 thinkphp运行环境搭建 java运行环境搭建搭建java运行环境

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/33474.html

webstorm+create-react-app搭建react.js运行环境下篇

摘要：上面我们已经安装了现在我们需要一个强大的开发工具安装的第一步在里面访问官网输入再可以看到的压缩包之后再解压之后在查看是否解压好解压后程序就直接安装好了的你只需输入进入到文件目录就可以运行程序了接下来我们就可以进入到安装的向导了我已经上面我们已经安装了create-react-app现在我们需要一个强大的开发工具 1.安装webstorm的第一步：在ubuntu里面访问官网 showI...

Crazy_Coder 2019-07-01 18:30 评论0 收藏0
前端开发环境如何搭建

1、node环境与开发工具准备前端工程化开发，本地启动开发环境都是基于nodejs的，命令行里输入指令node -v可以帮助确认您的电脑上是否安装了node，如果没有安装，则可以去 node官网下载安装包，如下图所示：不管是在windows还是在mac环境下，都是一键傻瓜式安装，甚至连环境变量都不需要手动配置，这里就不过多介绍了。2、开发工具准备前端的开发工具，常见的有VSCode、WebS...

社区管理员 2022-10-08 15:06 评论0 收藏0
【IPFS + 区块链系列】入门篇 - IPFS + Ethereum （上篇）-js-ipfs

作者：黎跃春，孔壹学院创始人，区块链、高可用架构师微信：liyc1215 区块链博客：http://liyuechun.org Ebay项目基于以太坊Ethereum & IPFS的去中心化Ebay区块链项目详情链接 showImg(https://segmentfault.com/img/remote/1460000012138807?w=1022&h=500); 目录 1. 内容简介 ...

VincentFF 2019-06-27 18:12 评论0 收藏0
React.js组件化开发第一步(框架搭建)

摘要：开始前安装安装安装安装完成后将镜像替换成国内的安装查看安装版本项目初始化命令行切到需要创建项目的目录内然后执行是项目的名称也是文件夹的名称命令行切到刚创建的项目运行项目执行以下命令会自动打开浏览器并防问初始化生成开始前安装 node.js; 安装 cnpm; 安装 yarn; 安装完成yarn后, 将镜像替换成国内的: $ yarn config set registry h...

Betta 2019-08-20 18:30 评论0 收藏0
React.js 小书 Lesson5 - React.js 基本环境安装

摘要：工具地址在安装之前要确认你的机器上安装了环境包括。安装好环境以后，只需要按照官网的指引安装即可。所以可以把的源改成国内的的源，这样会加速下载过程。接下来我们会探讨的组件的基本写法小书使用描述信息。 React.js 小书 Lesson5 - React.js 基本环境安装本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson5 ...

zilu 2019-08-21 17:32 评论0 收藏0