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. [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 ...

  2. [MST] Remove Model Instances from the Tree

    In this lesson we will dive a bit more into the tree semantics of MST. In this lesson you will learn ...

  3. c#程序中使用&quot;like“查询access数据库查询为空的问题

    今天,在开发的过程中发现了一个特别奇怪的问题:access中like查询时候.在Access数据库中运行,发现能够查询出结果.这是在数据库上运行.select * from KPProj where ...

  4. Java排序之直接选择排序

    public class SelectSort { public static void selectSort(int [] a){ int min; int temp; if(a==null || ...

  5. 8.解决IntelliJ Idea 集成TortoiseSVN 时找不到svn.exe

    转自:https://blog.csdn.net/beibeijia125/article/details/70183533?utm_source=blogxgwz9 首先我们可以在http://su ...

  6. [-] Failed to load plugin from /usr/share/metasploit-framework/plugins/db_autopwn: No classes were loaded from /usr/share/metasploit-framework/plugins/db_autopwn in the Msf::Plugin namespace.

    问题详情 然后,执行,出现如下问题,则说明大家的这个文件,下载不是完整的或者你上传不完整. msf > load db_autopwn [-] Failed to load plugin fro ...

  7. HikariCP--一款高性能的 JDBC 连接池

    源码地址:https://github.com/brettwooldridge/HikariCP 使用方法: Java 8 maven artifact: <dependency> < ...

  8. 请教如何用 peewee 实现类似 django ORM 的这种查询效果。

    本人新入坑的小白,如有不对的地方请包涵~~~! 在 django 中代码如下:模型定义: class Friends(models.Model): first_id = models.IntegerF ...

  9. ES6中的let、contst

    一 let 1.let 局部变量 不会变量提升,在运用时候要先声明在调用,var 全局变量 会产生变量提升: 2.在块级作用域中纯在let const,他所生命的变量就绑定在这个区域,未经过声明调用会 ...

  10. 洛谷1073 NOIP2009 最优贸易

    题目大意 C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个城市之间最多只有一条道路直接相连.这 m 条道路中有一部分为单向通行的道路,一部分为双向通行的道路,双 ...