react的入门安装

1.react的适用方法有两种,其一是依赖在线的cdn地址:

https://reactjs.org/docs/cdn-links.html  官方给的cdn地址如下

  1. <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  2. <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速度很慢建议切换成淘宝镜像方法如下:

  1. npm config set registry https://registry.npm.taobao.org
  1. npm config get registry 可以查看到是否已经配置(命令提示符不显示的重新打开一边命令提示符就在输入命令就可以看到了)

6.安装react及yarn脚手架

  1. npm install -g create-react-app yarn

7.安装合适的IDE编辑器,个人推荐vscode(好用,插件多自行百度安装,免费)

  1. vscode官网: https://code.visualstudio.com/
  1. 老规矩下后安装下一步即可
    打开软件建立一个文件夹专门用来放你联系的react文件,然后打开命令提示行Ctrl+Shift+`(左边tab上面那个键)如下图:

8.创建一个react项目

  1. create-react-app.cmd myapp 然后开始自动安装了,安装完了后如下图:

 这里已经提示怎么去启动这个webapp  根据这两部执行就可以让默认的react模板跑起来

 cd myapp    然后   yarn start 启动成功如下图:

  1. 这个时候其实会自动打开localhost:3000地址看到最终效果也可以手动在浏览器种输入这个地址访问最终效果如下:
  1.  

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. word break相关问题的解法

    https://leetcode.com/problems/word-break/?tab=Description 以及 https://leetcode.com/problems/concatena ...

  2. select多选 multiple的使用

    select多选  multiple的使用 <html> <head> <script type="text/javascript"> func ...

  3. less07 important

    less .foo (@bg: #f5f5f5, @color: #900) { background: @bg; color: @color; font-size: 16px; font-weigh ...

  4. User-defined types

    We have used many of Python’s built-in types; now we are going to define a new type. As an example, ...

  5. js中作用域链的问题

    为什么没有var声明的变量是全局的? 是因为,在js中,如果某个变量没有var声明,会自动到上一层作用域中去找这个变量的声明语句,如果找到,就使用,如果没有找到,继续向上查找,一直查找到全局作用域为止 ...

  6. perl异常处理

    程序脚本在运行过程中,总会碰到这样那样的问题,我们会预知一些问题并为其准备好处理代码,而有一些不能预知.好的程序要能尽可能多的处理可能出现的异常问题,本文就总结了一些方法来解决这些异常,当然perl在 ...

  7. Linux权限管理(用户、组、文件管理)

    一. Linux上的文件管理类命令都有哪些,其常用的使用方法及其相关示例演示. 1. 文件查看类命令cat,tac, head, tail, more, less, ls ,file: -ls : l ...

  8. Testin实验室:陌陌APP通过率为94.92% 基本满足移动社交需求

    Testin实验室:陌陌APP通过率为94.92% 基本满足移动社交需求 2014/11/10 · Testin · 独家评測 11月8日,国内移动社交应用陌陌公开向美国证券交易委员会提交了IPO申请 ...

  9. POJ1833 &amp; POJ3187 &amp; POJ3785 next_permutation应用

    要是没有next_permutation这个函数,这些题认为还不算特别水,只是也不一定,那样可能就会有对应的模板了. 反正正是由于next_permutation这个函数.这些题包含之前的POJ122 ...

  10. 仿小米简约Calculator

    上个星期的时候,我想教我朋友做一个简单的app.想来想去教什么比較好.当时看见小米的计算器认为比較美丽,就想这个简单.然后就開始动手做了.我以为能够一个小时能够搞定.没想到花了快一天的时间. 哎.突然 ...