react入门安装
react的入门安装
1.react的适用方法有两种,其一是依赖在线的cdn地址:
https://reactjs.org/docs/cdn-links.html 官方给的cdn地址如下
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
2.另一种本地安装配置react的环境,首先得安装node.js用npm去装react很方便
node.js中文网站:http://nodejs.cn/download/
node.js得安装步骤:
windows安装包exe直接轻松得下一步下一步即可。
安装过程种有一处地方需要确认一下如下图:

这里Add to PATH的意思就是添加npm到环境变量,这样省了后面自己手动配置的麻烦。
3.安装完成后按住win+R 输入cmd进入命令提示符

4.在命令提示符种输入npm -version如果显示出版本就证明安装成功了如下图(如果报错提示没有百度添加环境变量):

5.设置npm的镜像地址,类似linux yum或者ubuntu apt-get的软件仓库地址,如果在国内使用npm速度很慢建议切换成淘宝镜像方法如下:
npm config set registry https://registry.npm.taobao.org
npm config get registry 可以查看到是否已经配置(命令提示符不显示的重新打开一边命令提示符就在输入命令就可以看到了)
6.安装react及yarn脚手架
npm install -g create-react-app yarn
7.安装合适的IDE编辑器,个人推荐vscode(好用,插件多自行百度安装,免费)
vscode官网: https://code.visualstudio.com/
老规矩下后安装下一步即可
打开软件建立一个文件夹专门用来放你联系的react文件,然后打开命令提示行Ctrl+Shift+`(左边tab上面那个键)如下图:
8.创建一个react项目
create-react-app.cmd myapp 然后开始自动安装了,安装完了后如下图:
这里已经提示怎么去启动这个webapp 根据这两部执行就可以让默认的react模板跑起来
cd myapp 然后 yarn start 启动成功如下图:

这个时候其实会自动打开localhost:3000地址看到最终效果也可以手动在浏览器种输入这个地址访问最终效果如下:
react入门安装的更多相关文章
- react入门--------安装react
创建一个单页面应用 Create React App是开始构建新的React单页应用程序的最佳方式. 它可以帮助您快速集成您的开发环境,以便您可以使用最新的JavaScript功能,它提供了一个很好的 ...
- React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门 (1)—使用指南(包括ES5和ES6对比)
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- 2015年最热门前端框架React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- react 入门教程 阮一峰老师真的是榜样
- 转自阮一峰老师博客 React 入门实例教程 作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Nati ...
- react入门之使用webpack搭配环境(一)
react入门之搭配环境(一) 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g create-react-app ...
- React入门实例教程
文章转自:阮一峰 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React ...
- react入门学习及总结
前言 不知不觉一年又过去了,新的一年又到来,2019应该要好好思考,好好学点有用的东西,规划下自己今后的学习方向,不要再像以前那样感觉很迷茫. react简单介绍 官网及中文文档 https://re ...
- React 入门实例教程(转载)
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
随机推荐
- [MST] Restore the Model Tree State using Hot Module Reloading when Model Definitions Change
n this lesson, we will set up Hot Module Reloading(HMR), making it possible to load new definitions ...
- 从一次生产事故说起——linux的单用户模式,救援模式等等
伴随着今年linux上面最大一个安全漏洞bash漏洞的出现,我们公司也開始了风风火火的漏洞修复工作,机器一多,也就easy出问题,有台64位的linuxserver一不小心就升级了32位 bash 的 ...
- 用Go语言写了一个电脑搜索文件的小东西
package main import ( "bytes" "fmt" "os" "os/exec" "pat ...
- orale 中创建定时任务
--添加变量 variable job1 number; --创建JOB begin dbms_job.submit(:job1,'testjob;',sysdate, 'TRUNC(sysdat ...
- Linux下安装过程中编译PHP时报错:configure: error: libjpeg.(a|so) not found
在Linux下安装PHP过程中,编译时出现configure: error: libjpeg.(a|so) not found 错误的解决的方法: 检查之后发现已经安装libjpeg.可是/usr/l ...
- 拥抱PBO(基于项目的组织)聚焦核心价值创造
近年来.PBO(Project-Based Organizations)作为一种新兴的整合各类专业智力资源和专业知识的组织结构,受到越来越多的关注,第五版PMBOK出现的新词汇.三种组织(职能型.矩阵 ...
- [HNOI2008] GT考试(DP+矩阵快速幂+KMP)
题目链接:https://www.luogu.org/problemnew/show/P3193#sub 题目描述 阿申准备报名参加 GT 考试,准考证号为 N 位数 X1,X2…Xn(0 <= ...
- Linux-php7安装redis
Linux-php7安装redis 标签(空格分隔): 未分类 安装redis服务 1 下载redis cd /usr/local/ 进入安装目录 wget http://download.redis ...
- Hadoop框架基础(二)
** Hadoop框架基础(二) 上一节我们讨论了如何对hadoop进行基础配置已经运行一个简单的实例,接下来我们尝试使用eclipse开发. ** maven安装 简单介绍:maven是一个项目管理 ...
- ELK到底是什么?那么多公司用!__转载
Sina.饿了么.携程.华为.美团.freewheel.畅捷通 .新浪微博.大讲台.魅族.IBM...... 这些公司都在使用ELK!ELK!ELK! ELK竟然重复了三遍,是个什么? 一.ELK ...



