React imooc

构建用于界面的JavaScript库

初识React
React首次被提出是在2014年

React-JSX-Style

JSX : JS XML

React最简单的实例：

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script src="react-15.0.2/build/react.min.js"></script>
 7     <script src="react-15.0.2/build/react-dom.min.js"></script>
 8     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
 9 </head>
10 <body>
11
12 <div id="container"></div>
13
14 <script type="text/babel">
15     //创建Hello,world节点，并添加到id为container的元素中去
16     ReactDOM.render(
17             <h1>Hello, world!</h1>,
18             document.getElementById(‘container‘)
19     );
20 </script>
21
22 </body>
23 </html>

/****************************************/

React组件的生命周期和事件处理

React-Components-Lifecycle

React-Event-Listener

时间： 2024-10-07 00:42:17

React imooc的相关文章

React的理解-入门指导

React核心包含两大类 1．组件式开发:所有页面由组件构成 2．状态机:每次state改变或者接受的props改变都会重新渲染组件第1点:(1)组件之间引用 (2)组件之间通信:①父组件向子组件传值 ②子组件向父组件传值(通过回调函数改变值[父组件需要绑定原因]) ③兄弟组件通信第2点:组件的渲染主要通过render函数进行渲染. ① 每次setState都会重新渲染 ② 父组件传递到子组件的值改变重新渲染项目的搭建:推荐链接http://www.imooc.com/ar

通过npm使用React

要想使用npm,请先安装nodejs. 第一步.安装全局包$ npm install babel -g$ npm install webpack -g$ npm install webpack-dev-server -g第二步.创建根目录创建一个根目录,目录名为:reactApp,再使用 npm init 初始化,生成 package.json 文件: $ mkdir reactApp$ cd reactApp/$ npm initname: (reactApp) runoob-react-te

学习react

推荐资源: 一位react的最初构建者写的学习react的建议,这是翻译过的http://www.360doc.com/content/16/0129/07/13518188_531384175.shtml 官网上面的文档组织的确是有点乱,但还是要通过官网学习,建议从认真跟着官网上这篇教程做 http://reactjs.cn/react/docs/tutorial.html ,之后可以选择性看其他部分内容慕课网上面关于react的视频 http://www.imooc.com/index

React 使用路由

react-router 基础知识安装安装 react-router npm install react-router --save,完成之后可查看package.json的变化.这里我使用的是3.0.5的版本,4.x之后会有变化本章节演示 react-router 的一些基本用法,为了能让大家快速了解.接下来的项目开发中,可能会有另外的用法(应该不多),到时候遇到再讲.当然也欢迎大家去官网文档自己提前学习. 创建页面创建以下几个页面,用于演示 ./app/containers/App.

【共享单车】—— React后台管理系统开发手记：UI菜单各个组件使用（Andt UI组件）

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.按钮Button pages->ui->button.js:对应路由/admin/ui/buttons import React from 'react'; import {Card, Button, Radio} from 'antd' import './ui.less' class B

【共享单车】—— React后台管理系统开发手记：AntD Form基础组件

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.使用Form组件开发登录页面 pages->form->login.js:对应路由/admin/form/login import React from 'react' import {Card, Form, Input, Button, message, Icon, Checkbox} f

谈谈APP架构选型：React Native还是HBuilder

原文链接导读:最近公司的一款新产品APP要进行研发,老大的意思想用H5来做混合APP以达到高效敏捷开发的目的.我自然就开始进行各种技术选型的调研,这里重点想说的是我最后挑选出的2款hybrid app开发技术方案:RN(react native),HBuilder.React Native是大名鼎鼎的Facebook的开源技术框架,而HBuilder是国内的H5工具开发公司DCLOUD的产品.我自己先总结下吧:这两个技术框架在开发效率上基本上可以媲美WEB开发的速度,RN强调的是“Learn

React学习—组件

一.定义组件就像JavaScript的函数.组件可以接收任意输入(称为"props"), 并返回 React 元素,用以描述屏幕显示内容. 二.组件的分类 1.函数式组件(无状态组件) 它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到要state状态的操作.在大部分React代码中,大多数组件被写成无状态的组件,通过简单组合可以构建成其他的组件等:这种通过多个简单然后合并成一个大应用的设计模式被提倡. function Welcome(props) { re

如何写好react组件

react 组件方面: 总结 React 组件的三种写法及最佳实践 [涨经验] React组件编写思路(一) 使用react-router实现单页面应用时设置页面间过渡的两种方式 [翻译]基于 Create React App路由4.0的异步组件加载(Code Splitting) React进阶--使用高阶组件(Higher-order Components)优化你的代码 Higher-order Components 高阶组件 redux方面: Redux-saga 中文文档 https: