起步 react 特点 不使用模板 不是一个mvc框架 响应式 轻量级的js库 原理 虚拟dom 将dom抽象成js对象 diff算法 搭建开发环境 react.js 核心文件 react-dom.js 面向web端 渲染页面的dom 依赖于react核心文件 react-native 面向移动端app babel.js 将es6 转换成es5 jsx转化成javascript 脚手架 npm install -g create-react-app create-react-app -versi…

一.前言   webpack是个啥呢?看官网的这段描述. webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)   在我以前做纯html.css.js(jQuery)开发的时候,我看了这句话之后的感受就是 先不管它是个啥了吧,心里把上面的那段描述默念3遍,就开始干活吧 二.准备工作和说明 1.本文档不包含node的安装和配置说明,因此安装webpack时需要确保电脑已正常安装node且可以正常运行npm命令. 2.本次安装和示例均基于webp…

React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick="activateLasers()"> // onClick = "xxxx()" 激活按钮 </button> react 中的写法: <button onClick={activateLasers}> // onclick = { xxxx…

React 组件生命周期 详细参考: react 组件生命周期 组件的生命周期可分为三个状态: 1.Mounting:已经挂载/插入到真实 DOM 树上: 2.Updating:正在被重新渲染: 3.Unmounting:已经移出 DOM 树: 生命周期的钩子函数:(v16之前) 1. componentWillMount  首次渲染之前调用: 2. componentDidMount  第一次渲染后调用: 3. componentWillReceiveProps 在组件接收到一个新的 prop…

componentDidMount :生命周期在react下只调用一次, render:比它先执行 componentWillRecvieProps(newProps) :能取到父组件的值 render(){ return } 下需要返回,不然报错 父组件传值 父组件:index render(){ const {data} = this.state return( <div className="hhd"> <Tiem states={data}></T…

条件渲染和列表渲染 一.条件渲染 条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: function UserGreeting(props) { return <h1>欢迎回来!</h1>; } function GuestGreeting(props) { return <h1>请先注册.</h1>; } function Greeting(props…

React Props props - 参数. 组件类 React.Component 有个 defaultProps 属性,以 class xxx extend React.Component 形式创建的组件够可以通过属性来控制传入组件的参数,如下例: // 创建 HelloMessage 组件 class HelloMessage extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h…

React State 一. state 大致思想:在 react 中,每个组件都是一个状态机,通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致.React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM). class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } re…

一些概念: 1.组件:概念等同于 vue 中的组件,字面意思,不过 vue 中组件是以 .vue 结尾,通过 vue-loader 编译成 js,而 react 组件就是 js. 2.jsx:js 语法扩展,编译器遇到 html 标签按照 html 编译,遇到 js(就是 { xxx }) 按照 js 规则编译,类型安全. 3.单项响应的数据流 - 这点暂时没明白. 一.核心库 import React from 'react'; import ReactDOM from 'react-dom'…

使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一:Helloworld html代码: <div id="app"> {{ message }} </div> js代码: new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) 例二:双向绑定 说明:h…