全局安装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. ubuntu 14.04安装octave,及其使用

    从库安装: sudo apt-add-repository ppa:octave/stable sudo apt-get update sudo apt-get install octave 使用:以 ...

  2. Collections.copy

    List<String> names = Arrays.asList(new String[nameList.size()]); Collections.copy(names, nameL ...

  3. 032 Longest Valid Parentheses 最长有效括号

    给一个只包含 '(' 和 ')' 的字符串,找出最长的有效(正确关闭)括号子串的长度.对于 "(()",最长有效括号子串为 "()" ,它的长度是 2.另一个例 ...

  4. C. Glass Carving 正着做或者倒着做都可以

    http://codeforces.com/problemset/problem/527/C 这题总体思路就是,每画一条线,然后就找到x间距的最max值和y间距的最max值,相乘就是当前的ans 那么 ...

  5. js里的数组push用法及append()

    result.result[0].name var arr = new Array();$.each(result.result, function(i, item) {            arr ...

  6. Oracle的表操作,约束

    回顾MySQL创建表语句users(id整型/name字符串/birthday日期型,默认今天)drop table if exists users;create table if not exist ...

  7. [luogu 1660]数位平方和

    题目描述 定义S(n)表示n的各个数位的k次方的和.定义$H(n)=min{n,S(n),H(S(n))}$. 求$$\sum _{i=A} ^{B} {H(i)} \mod 10000007$$ 输 ...

  8. Emgu CV 初试

    Emgu CV 是.NET平台下对OpenCV图像处理库的封装,也就是.NET版.可以运行在C#.VB.VC++等. 安装完成后需要设置环境变量,比如我安装在D:\Emgu\emgucv-window ...

  9. KBEngine warring项目源码阅读(一) 项目简介和注册

    首先介绍下warring项目,是kbe自带的一个演示示例,大部分人了解kbe引擎也是从warring项目开始的. 项目地址:https://github.com/kbengine/kbengine_u ...

  10. 读取java配置文件properties

    java项目里很多参数都是写在配置文件properties上,如果需要读取的话,可以使用jdk里提供的Properties类进行处理. 具体写法如下: public class PropertiesC ...