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入门安装的更多相关文章

  1. react入门--------安装react

    创建一个单页面应用 Create React App是开始构建新的React单页应用程序的最佳方式. 它可以帮助您快速集成您的开发环境,以便您可以使用最新的JavaScript功能,它提供了一个很好的 ...

  2. React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  3. React入门 (1)—使用指南(包括ES5和ES6对比)

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

  4. 2015年最热门前端框架React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  5. react 入门教程 阮一峰老师真的是榜样

    -  转自阮一峰老师博客 React 入门实例教程   作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Nati ...

  6. react入门之使用webpack搭配环境(一)

    react入门之搭配环境(一) 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g create-react-app ...

  7. React入门实例教程

    文章转自:阮一峰 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React ...

  8. react入门学习及总结

    前言 不知不觉一年又过去了,新的一年又到来,2019应该要好好思考,好好学点有用的东西,规划下自己今后的学习方向,不要再像以前那样感觉很迷茫. react简单介绍 官网及中文文档 https://re ...

  9. React 入门实例教程(转载)

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

随机推荐

  1. Android Studio生成apk

    1.菜单Build->Generate Signed APK 2.生成android.keystore,能够依据弹框去Create new一个,也可使用命令来生成android.keystore ...

  2. opencv矩阵运算(2)

    简单介绍 本篇承接上一篇.继续opencv下矩阵计算的函数使用. 计算矩阵的逆 注意:矩阵A是可逆矩阵的充分必要条件是行列式detA不等于0. 详细代码 double x[3][3] = {{1, 2 ...

  3. springboot 静态方法注入bean、使用@value给static变量赋值

    首先新建你的方法类:DemoUtil 头部加注解:@Component @Component public class DemoUtil { } 新增静态变量: static DemoService ...

  4. 洛谷P4180 [Beijing2010组队]次小生成树Tree

    题目描述 小C最近学了很多最小生成树的算法,Prim算法.Kurskal算法.消圈算法等等.正当小C洋洋得意之时,小P又来泼小C冷水了.小P说,让小C求出一个无向图的次小生成树,而且这个次小生成树还得 ...

  5. ListView优化-ViewHolder缓存

    安卓开发中ListView控件是一个使用频率相当的高级控件,通常用于展示一系列相似度极高的数据,当数据量极大或布局相当复杂时,ListView的性能优化就显得非常重要.所以在开发中不但功能上要满足,而 ...

  6. manacherO(n)求最长回文子串 hihocoder1032

    原文地址:https://segmentfault.com/a/1190000003914228   http://blog.csdn.net/synapse7/article/details/189 ...

  7. HDU 5223 GCD

    题意:给出一列数a,给出m个区间,再给出每个区间的最小公倍数 还原这列数 因为数组中的每个数至少都为1,而且一定是这个区间的最小公约数ans[i]的倍数,求出它与ans[i]的最小公倍数,如果大于1e ...

  8. Unix版权史

    原文出处: 阮一峰    这几天,我在读<Unix编程艺术>. 书中介绍了Unix的发展历史.我发现,这是一个很好的例子,说明现行版权制度具有阻碍社会发展的负面作用. 2. Unix诞生于 ...

  9. DedeCMS文章编辑不更新时间1970年1月1日

    在修改文章或者后期优化的时候,织梦dedecms5.7版本存在一个问题,修改文章的同时也修改了文章的发布时间,这个功能可能有些人比较需要,但同时也有些站长朋友又不需要,因为我们编辑某个文章的时候,发现 ...

  10. iOS开发——根据数组中的字典中的某一元素排序

    数组中的元素是字典,字典中的某一个元素,比如说姓名,现在需要按照姓名的首字母来排序,怎么搞? 做法很简单,在字典中加一个元素,保存姓名的首字母,然后用下面的方法排序. - (void)sortWifi ...