第一章 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 ...
随机推荐
- 洛谷 P1383 高级打字机==codevs 3333 高级打字机
P1383 高级打字机 18通过 118提交 题目提供者yeszy 标签倍增图论高级数据结构福建省历届夏令营 难度省选/NOI- 提交该题 讨论 题解 记录 最新讨论 暂时没有讨论 题目描述 早苗入手 ...
- python-----文件自动归类
如何移动文件? → 使用内置模块来实现 归类的规则是什么? → 手动(预设文件夹)/ 自动(创建文件夹) import shutil import os path = './' #由于这里是相对路径 ...
- IDEA中Spark读Hbase中的数据
import org.apache.hadoop.hbase.HBaseConfiguration import org.apache.hadoop.hbase.io.ImmutableBytesWr ...
- 9. Ext基础1 -- Ext中 getDom、get、getCmp的区别
转自:https://blog.csdn.net/huobing123456789/article/details/7982061 要学习及应用好Ext框架,必须需要理解Html DOM.Ext El ...
- matlab绘制曲线对比图
>> clear;>> x1=[0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8];>> y1=[0,0.55,0.69,0.86,0.93,0. ...
- bzoj 1671: [Usaco2005 Dec]Knights of Ni 骑士【bfs】
bfs预处理出每个点s和t的距离d1和d2(无法到达标为inf),然后在若干灌木丛格子(x,y)里取min(d1[x][y]+d2[x][y]) /* 0:贝茜可以通过的空地 1:由于各种原因而不可通 ...
- [Swift]通天遁地Swift
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 列表框、分组列表框、标签(label)、分组框(fieldset)、框架(frameset)
列表框(select) 下拉列表,用户可以从一些可选项中选择. 示例:简单的下拉列表 <select name="country"> <option value= ...
- C#与正则表达式的例子
一个很好的文章,但是并没有测试 连接
- Winform学习知识汇总
引用博客 http://www.cnblogs.com/peterzb/archive/2009/06/14/1502918.html