第一章 React新的前端思维方式
---恢复内容开始---
第一章 React新的前端思维方式
1.1 初始化一个React项目
1、安装create-react-app
npm install --global create-react-app
2、创建一个react项目
create-react-app 项目名称
3、进入项目目录
cd 项目名
4、启动项目
npm start
1.2 增加一个新的React组件
创建一个显示点击次数的组件
第一步:
找到入口文件src/index.js,修改index.js文件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import ClickCounter from './ClickCounter'
// import * as serviceWorker from './serviceWorker'; // ReactDOM.render(<App />, document.getElementById('root')); ReactDOM.render(<ClickCounter />, document.getElementById('root'))
第二步:
创建一个ClickCounter.js文件
import React, {Component} from 'react'
class ClickCounter extends Component{
constructor(props){
super(props)
this.onClickButton = this.onClickButton.bind(this)
this.state = {count:0}
} onClickButton(){
this.setState({count:this.state.count + 1})
} render() {
return (
<div>
<button onClick={this.onClickButton}>Click Me</button>
<div>
Click Count: {this.state.count}
</div>
</div>
)
}
} export default ClickCounter
1.2.1 JSX
JSX是JavaScript的语法扩展(eXtension),让我们在JavaScript中可以编写像HTML一样的代码。
webpack.config.dev文件中会我了一部分关于babel的定义。
并不是所有 的浏览器都支持所有 ES6语法,但是有了 babel,我们就可 以不用顾忌 太多,因为 babel会把 ES6语法的 JavaScript代码转译( transpile) 成浏览器普遍支持的 JavaScript代码
1.4 React的工作方式
1.4.1 参考另一篇jquery和React比较
1.4.2 Virtual Dom
React的实现方式,看起来像每次reander函数被调用,都要把整个组件重新绘制一次,有点浪费,但事实不是这样,React利用Virtual DOM,让每次渲染都只重新渲染最少的DOM元素。
有关DOM的渲染请参考此文章,个人觉得还不错,都是干货:https://mp.weixin.qq.com/s/OErtV9FBxIJszxYbGUL3Vg
Virtual Dom之所以称之为虚拟DOM,是因为不会触及浏览器部分,只存在于javascript空间的树形结构,自上而下渲染React组件时,会对比这一次产生的Virtual DOM和上一次渲染的Virtual DOM,然后修改真正的DOM树时只需要触及差别中的部分就行。
第一章 React新的前端思维方式的更多相关文章
- web前端学习python之第一章_基础语法(二)
web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
- web前端学习python之第一章_基础语法(一)
web前端学习python之第一章_基础语法(一) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
- React开发实时聊天招聘工具 -第一章
第一章 课程道学 6个页面 弱化css Antd-mobile作为组件库 Redux 状态管理 React-Router 路由 Axios异步请求 后端Express框架 Socket.io 数据库: ...
- 第一章、前端之html
目录 第一章.前端之html 一. html介绍 第一章.前端之html 一. html介绍 web服务本质 import socket sk = socket.socket() sk.bind((& ...
- Android群英传》读书笔记 (1) 第一章 Android体系与系统架构 + 第二章 Android开发工具新接触
第一章 Android体系与系统架构 1.Dalvik 和 ARTDalvik好比是一辆可折叠的自行车,平时是折叠的,只有骑的时候,才需要组装起来用.ART好比是一辆组装好了的自行车,装好就可以骑了. ...
- WEBGL 2D游戏引擎研发系列 第一章 <新的开始>
WEBGL 2D游戏引擎研发系列 第一章 <新的开始> ~\(≥▽≤)/~HTML5游戏开发者社区(群号:326492427) 转载请注明出处:http://html5gamedev.or ...
- 萌新接触前端的第一课——HTML
HTML web服务本质(好吧这个先不用知道也可以) import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOC ...
- (转)iOS Wow体验 - 第一章 - iOS人机界面设计规范纵览
本文是<iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad>第一章译文精选,其余章节将陆续放出. 关于本套译文 ...
- 《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介
前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...
随机推荐
- aarch64-linux-gnu交叉编译Qt4.7.3
到 Qt 官网下载合适的 Qt 版本,地址:http://download.qt-project.org/archive/qt/ 1.环境搭建: 1.安装automake.libtool 和主机上的 ...
- ubuntu14安装docker-ce
先卸载旧的docker sudo apt-get remove docker docker-engine docker.io docker-ce 通过HTTPS使用存储库(repository) su ...
- luogu 3958 奶酪
noip2017 D2T1 奶酪 某zz选手没有想到可以用并查集来做,直接用了dijskstra,结果被ccf老爷机卡成了70分 题目大意: 现有一块大奶酪,它的高度为 h,它的长度和宽度我们可以认为 ...
- go语言---slice
go语言---slice https://blog.csdn.net/cyk2396/article/details/78893420 一.数组切片的使用: //1.基于数组创建数组切片 var ar ...
- bzoj1537
dp+树状数组 一维排序,一维离散化,然后跑lis,其实就是一个二维偏序 #include<bits/stdc++.h> using namespace std; ; int dp[N], ...
- 使用WinSXS进行系统盘瘦身Windows 7/2008/10/2012不断变大的C盘(Windows 更新清理)
这是一款非常给力的国产良心小工具,用阿里云ECS的时候,一个C盘没多久就被坑爹的微软更新沉余文件塞满.此工具简单好用一下搞定! 操作系统: 所有 NT 6.X 内核的操作系统.比如 Windows V ...
- bzoj 1666: [Usaco2006 Oct]Another Cow Number Game 奶牛的数字游戏【模拟】
模拟 #include<iostream> #include<cstdio> using namespace std; int n,ans; int main() { scan ...
- Final关键字解析
final 在 Java 中是一个保留的关键字,可以声明变量.方法.类. 什么是final变量 / 类 / 方法? 任何变量前被 final 修饰就是 final 变量,定义的类前被 final 修饰 ...
- hdu2032
http://acm.hdu.edu.cn/showproblem.php?pid=2032 #include<stdio.h> #include<math.h> #inclu ...
- E - A^B mod C (大数乘方取模)
Description Given A,B,C, You should quickly calculate the result of A^B mod C. (1<=A,B,C<2^63) ...