React
zhanghl150426
这个作者很懒,什么都没留下…
展开
-
React安装
通过 npm 使用 React 如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程。 我们建议在 React 中使用 CommonJS 模块系统,比如 browserify 或 webpack,本教程使用 webpack。 第一步、安装全局包 $ npm install babel -g $ npm install webpack -g $ np...原创 2018-10-25 11:58:06 · 251 阅读 · 0 评论 -
react开发:从零开始搭建一个react项目
从头开始建立一个React App - 项目基本配置 npm init 生成 package.json 文件. 安装各种需要的依赖: npm install --save react - 安装React. npm install --save react-dom 安装React Dom,这个包是用来处理virtual DOM。这里提一下用React Native的话,这里就是安装react-n...转载 2018-11-08 17:29:03 · 909 阅读 · 0 评论 -
React 表单与事件
本章节我们将讨论如何在 React 中使用表单。 一个简单是实例 在实例中我们设置了输入框 input 值value = {this.state.data}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化,并修改 state。 实例 <!DOCTYPE html> <html> <head&g...原创 2018-11-08 17:29:10 · 181 阅读 · 0 评论 -
React AJAX
React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取,当从服务端获取数据库可以将数据存储在 state 中,再用 this.setState 方法重新渲染 UI。 当使用异步加载数据时,在组件卸载前使用 componentWillUnmount 来取消未完成的请求。 以下实例演示了获取 Github 用户最新 gist 共享描述: 实例 <...原创 2018-10-26 15:35:01 · 492 阅读 · 0 评论 -
React 组件生命周期
在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM 生命周期的方法有: componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount : 在第一次渲染后调用,...原创 2018-10-26 15:34:03 · 116 阅读 · 0 评论 -
React 组件 API
下为关于“React 组件 API”的内容 在本章节中我们将讨论 React 组件 API。我们将讲解以下7个方法: 设置状态:setState 替换状态:replaceState 设置属性setProps 替换属性replaceProps 强制更新:forceUpdate 获取DOM节点:findDOMNode 判断组件挂载状态...原创 2018-10-26 15:33:13 · 354 阅读 · 0 评论 -
React Props
state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。 使用 Props 以下实例演示了如何在组件中使用 props: 实例 <!DOCTYPE html> <html> <head> ...原创 2018-10-26 15:02:56 · 153 阅读 · 0 评论 -
React State(状态)
React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。 React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。 以下实例中创建了 LikeButton 组件,getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this...原创 2018-10-26 15:00:09 · 106 阅读 · 0 评论 -
React 组件
React 组件 本章节我们将讨论如何使用组件使得我们的应用更容易来管理。 接下来我们封住一个输出 "Hello World!" 的组件,组件名为 HelloMessage: 实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g原创 2018-10-26 14:48:26 · 106 阅读 · 0 评论 -
React JSX
React JSX 独立文件 你的 React JSX 代码可以放在一个独立文件上,例如我们创建一个 helloworld_react.js 文件,代码如下: ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); 然后在 HTML 文件中引入该 J...原创 2018-10-26 14:42:09 · 250 阅读 · 0 评论 -
React错误锦集
1、创建项目报错: 解决方法:输入命令:npm install -g create-react-app再执行创建命令原创 2019-05-28 16:44:00 · 133 阅读 · 0 评论