全局安装react脚手架工具
首先全局进行安装:cnpm install create-react-app -g 查看是否安装完成:create-react-app
创建react项目:create-react-app <项目名>
如果create-react-app出现如下错误时:
1.//换源 npm config set registry https://registry.npm.taobao.org
2.//配置后通过以下方法验证是否成功 npm config get registry
react的render方法:
对于组件而言:
创建时执行
state发生变化
props发生变化执行
forceUpdate
对于整个项目而言:
创建时执行
setState
forceUpdate
1.state props 数据
2.jsx 模板
3.数据+模板结合。生成真实的DOM。显示在页面中
4.setState 发生变化
5.数据+模板结合。生成真实的DOM。替换原有的DOM
缺点:
第一次创建完整的真实的DOM
第二次创建完整的真实的DOM,替换原有的DOM
1.第二次创建真正dom性能消耗非常高
2.替换dom性能消耗非常高
1.state props 数据
2.jsx 模板
3.数据+模板结合。生成真实的DOM。显示在页面中
4.setState 发生变化
5.数据+模板结合。生成真实的DOM。不进行替换原有的DOM
6.新的dom和原来dom进行比对,找到差异。(消耗性能)
7.只替换发生变化的dom。
缺点:
性能提升并不明显
虚拟dom的概念:
1.state props 数据
2.jsx 模板
3.数据+模板结合,生成虚拟dom(js对象)。
jsx模板 <div className="App"><span>hello world</span></div>
createElement
虚拟dom(js对象)['div', {className: 'App'}, ['span', null, 'hello world']]
生成真实DOM
4.生成真实的DOM。显示在页面中
5.setState 发生变化
6.数据+模板结合。生成虚拟dom
['div', {className: 'App'}, ['span', null, 'hello react']]
7.原来的虚拟dom和新的虚拟dom,进行比较找到差异。(diff算法,同级比较)
8.只替换发生变化的dom。
优点:
1.提升了性能
2.可以跨平台,有了React Native
 

package.json配置项

{
"name": "react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

index.html

<link rel="manifest" href="%PUBLIC_URL%/manifest.json"> //有利于搜索引擎搜索,manifest.json配置

<noscript>没有引入js</noscript>当项目没有引入js文件时显示页面上

react安装极其了解的更多相关文章

  1. npm+webpack+babel+react安装

    npm+webpack+babel+react安装 1.首先要安装 Node.js, Node.js 自带了软件包管理器 npm 2.在项目文件目录下生成package.json # 进入项目目录$ ...

  2. react安装 项目构建

    1.nodejs安装 下载安装包,解压.如果是已编译文件,在/etc/profile中设置PATH(/etc/profile文件中的变量设置,所有用户可用,但需求重启服务器),并source /etc ...

  3. React 安装

    1.安装 node  8.0以上 node -v npm -v 2.安装淘宝镜像 cnpm npm install -g cnpm --registry=https://registry.npm.ta ...

  4. React安装React Devtools调试工具

    在运行一个React项目的时候浏览器控制台会提醒你去安装react devtools调试工具. Download the React DevTools for a better development ...

  5. React安装 脚手架create-react-app安装步骤及问题

    create-react-app 是来自于 Facebook的脚手架,通过该命令我们无需配置就能快速构建 React 开发环境. 安装步骤: 1.先装脚手架     PS:第一次装直接在打开CMD默认 ...

  6. React安装及使用

    学习React之前.你可能需要学习: Html5.Css3.React.Antd.js. Html5的学习网站:http://www.w3school.com.cn/ Css3学习网站:http:// ...

  7. react安装

    1. npm install -g create-react-app 2. create-react-app my-app 3. cd my-app npm start 4.浏览器打开  http:/ ...

  8. React&Webpack 环境安装

    react的安装依赖nodejs,nodejs安装下载可从http://nodejs.org/en/下载 1.   环境安装 1.1      创建lib目录 cd E:\ReactLib 1.2   ...

  9. React组件安装使用和生命周期函数

    React安装在使用react时 需要安装 两个模块 react react-dom 初始化时 需要用到react-dom中的render方法 具体如下: import ReactDOM from & ...

随机推荐

  1. 提升Exadata 计算节点本地IO性能

    1.问题概述 某客户有一台Exadata X2-2,每个计算节点是4块普通的本地SAS硬盘做成的RAID5,然后在RAID5的本地硬盘上创建了一个文件系统来存放DSG数据同步软件,在后续的运维过程中, ...

  2. JMETER CSS JQUERY EXTRACTOR

    我想如果你在这里,你可能已经访问了我们关于变量提取的JMeter系列: XPath Extractor:使用XPath Expressions从XML响应中提取内容, Regexp Extractor ...

  3. JMeter - 后处理器/脚本语言 - 比较

    当我们使用JMeter / Response数据处理进行密集负载测试时,我们可能会非常小心我们选择的后处理器/脚本语言的类型.在这篇文章中,我想说明这些后处理器/脚本语言如何影响测试的整体性能. 我们 ...

  4. Stars(树状数组)

    算法学习:http://www.cnblogs.com/George1994/p/7710886.html 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid ...

  5. POJ 1556 E - The Doors

    题意:给定n堵墙,现在要你从(0,5)走去(10,5)的最短距离 思路:刚开始还想模拟,就是从(0,5)走,每次x向右一格,然后判断有没和线段相交就可以.但是它的们有可能是小数形式给出的,这样就GG了 ...

  6. JAVA多线程之Volatiles

    Java 语言中的 volatile 变量可以被看作是一种 “轻量级的 synchronized”:与 synchronized 块相比,volatile 变量所需的编码较少,并且运行时开销也较少,但 ...

  7. CentOS-7.5 解决ifconfig报错

    1.报错信息:-bash: ifconfig: command not found   2.检查IP地址是否设置正常 ip addr 以上说明ip设置正常,如果没有获取到IP地址则设置一个即可,设置i ...

  8. java中key值可以重复的map:IdentityHashMap

    在Java中,有一种key值可以重复的map,就是IdentityHashMap.在IdentityHashMap中,判断两个键值k1和 k2相等的条件是 k1 == k2 .在正常的Map 实现(如 ...

  9. windows 2012 r2 x64 安装IIS注意事项

    详细安装可以参考下面; https://jingyan.baidu.com/article/93f9803f234eade0e46f559f.html 下面只说一些注意事项,如果项目要用到wcf 的话 ...

  10. Ionic 解决gradle下载慢的问题

    问题 使用Ioinc添加安卓平台或者编译的时候,提示gradle-XXX-all.zip下载,此进度缓慢. 解决 下载gradle对应的zip文件. 参考资源:http://services.grad ...