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. 从头认识java-17.2 线程中断(interrupt)

    这一章节我们来讨论一下线程中断(interrupt). 1.什么是线程中断(interrupt)? 就是在多线程执行的时候,我们给线程贴上一个中断的标记.可是不要求线程终止. 2.样例: 中断的样例: ...

  2. 我是怎么利用微信做兼职月入1W的

    物价上涨.导致非常多人都感觉如今的收入入不敷出,有的是迫于生活压力.有的是为了提高生活质量,等等都想好好利用业余时间来做点兼职,当然我也不例外.正好笔者在微信刚推出一段时间的时候利用微信来做点兼职赚点 ...

  3. POJ 3668 枚举?

    枚举两点,算一下斜率 sort一遍 判个重 输出解 25行 搞定- //By SiriusRen #include <cmath> #include <cstdio> #inc ...

  4. C#篇(一)——字段与属性

    字段和属性有什么区别? class Student { private int age; public int Age { get { return age; } set { age = value; ...

  5. Java类和对象8

    按要求编写Java应用程序. (1)创建一个叫做People的类: 属性:姓名.年龄.性别.身高         行为:说话.计算加法.改名 编写能为所有属性赋值的构造方法: (2)创建主类: 创建一 ...

  6. ScrollView嵌套GridView不显示顶部

    /*     * scrollView中嵌套GridView不能显示头部     *      * 方案①:scrollView.smoothScrollTo(0, 0);     *      * ...

  7. 51Nod 活动安排问题(排序+优先队列)

    有若干个活动,第i个开始时间和结束时间是[Si,fi),同一个教室安排的活动之间不能交叠,求要安排所有活动,最少需要几个教室? Input 第一行一个正整数n (n <= 10000)代表活动的 ...

  8. Mysql 主从主主复制总结(详细)

    环境:Centos 6.9,Mysql 8.0 配置准备:1.为Centos配置好网络,使用远程工具连接. 2.安装mysql,途径不限.mysql8.0和5.7区别不大,8.0在配置主从的时候默认开 ...

  9. uwsgi erro

    Installing collected packages: uwsgi Running setup.py install for uwsgi: started Running setup.py in ...

  10. webStrom的破解以及汉化

    破解方法: 把JetbrainsCrack-3.1-release-enc.jar包放到bin目录下,然后把webstorm64.exe.vmoptions文件用文本打开, 在最后面加上一句-java ...