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 ...
随机推荐
- HDOJ 题目1520 Anniversary party(树形dp)
Anniversary party Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- Linux 文件系统初步
在Linux系统中,假设我们想要知道一个文件的详细信息,那么最简便的方法自然就是ls命令了.例如以下图所看到的:当在shell输入命令"ls -l old"时,在下方就会 ...
- Mono源码学习笔记:Console类(四)
NullStream 类 (internal class) 以下就是 mcs/class/corlib/System.IO/NullStream.cs: 01: namespace System.IO ...
- 自己封装js组件 - 中级中高级
接着做关于alert组件的笔记 怎么又出来个中高级呢 对没错 就是出一个中高级来刷流量呵呵呵,但是中高级也不是白叫的 这次主要是增加了widget类,增加了自己绑定的事件和触发事件的方法!这么做是为什 ...
- 英语音乐---三、Cry on my shoulder
英语音乐---三.Cry on my shoulder 一.总结 一句话总结:Cry on my shoulder 在我的肩膀上哭泣 1.If the hero never comes to you. ...
- hdoj--5256--序列变换(lis变形)
序列变换 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- 84.Node.js -Mongoose 方法
转自:https://www.cnblogs.com/chris-oil/p/9136534.html Mongoose 参考手册 标签(空格分隔): MongoDB Mongoose 是什么? 一般 ...
- django 笔记15 ajax系列
参考 http://www.cnblogs.com/wupeiqi/articles/5703697.html # 原生操作# jQuery操作# 伪Ajax操作# XMLHttpReques 伪aj ...
- POJ 3668 枚举?
枚举两点,算一下斜率 sort一遍 判个重 输出解 25行 搞定- //By SiriusRen #include <cmath> #include <cstdio> #inc ...
- ubuntu14.04下snort的安装(官方文档安装)(图文详解)
不多说,直接上干货! 最近为了科研,需要安装和使用Snort. snort的官网 https://www.snort.org/ Snort作为一款优秀的开源主机入侵检测系统,在windows和Linu ...