react | 易学教程

react基础用法二(组件渲染)

阅读更多关于 react基础用法二(组件渲染)

react基础用法二(组件渲染) 如图所示组件可以是函数格式：function 方法名(){ return <标签>内容</标签>} 渲染格式： <方法名 /> 即可把方法体内的内容渲染到页面如图所示这是像组件内传递渲染元素在react都基本由props来接受传入的参数和react基础一的方法一样传入的都是key:value 这里key是name,value则是cookie 所以在当你要取元素的时候是props.key也就是props.name来获取name里面的value值格式：function 方法名(props接受元素){ return <标签>内容</标签>} 渲染格式： <方法名 key=value /> 即可把方法体内的内容渲染到页面,多个以空格隔开,注意如果要传入的是数字需要用{}包裹如图所示同一个组件也可以多次复用如图所示你也可以使用一个类来当组件但是注意一定要extends Component组件不然会报错提示没法引用一个类来使用格式：class 类名 extends Component { render(){ return ( <标签>内容</标签> );这里的分号也不要忘了养好习惯 } } 渲染格式: <类名称 />即可把类当组件把里面的内容渲染到页面这次简单介绍了组件的渲染方法和属性props的简单使用

[react 基础篇]——React.createClass(）方法同时创建多个组件类

阅读更多关于 [react 基础篇]——React.createClass(）方法同时创建多个组件类

react 组件 React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类一个组件创建 var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="fannieGirl" />, document.getElementById('example') ); 两个组件创建 var HelloMessage1 = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); var HelloMessage2 = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <div> <HelloMessage1 name="fannie" /> <HelloMessage2 name=

React的组件用法

阅读更多关于 React的组件用法

React.createClass() 中文翻译 https://discountry.github.io/react/ 3.4K ( https://doc.react-china.org 868 ) React支持组件的运用React.createClass 方法就用于生成一个组件类下面这是一个用Reac.createClass写的一个DOM页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script type="text/javascript" src="build/browser.min.js"> </script> </head> <div id="esample"> </div> <body> <script type="text/babel"> var Hello=React.createClass({//定义组件的方法，首字母必须大写 render:function(){ return <h1> Hello {this.props.name}//必须只有一个标签 </h1>; } }); ReactDOM

边学边用--使用React下的Material UI框架开发一个简单的仿MetaMask的网页版以太坊钱包（七）

阅读更多关于边学边用--使用React下的Material UI框架开发一个简单的仿MetaMask的网页版以太坊钱包（七）

在前一篇文章里，我们完成了钱包的账号导出功能。这次我们计划开发钱包显示ERC20代币列表的功能。因为我们是仿MetaMask做的，所以目前只能手动添加Erc20代币。一、主要功能演示用户登录钱包后，点击左上角的菜单按钮，会出现我的账号界面：这个界面在MetaMask中是用一个抽屉实现的，也就是有抽屉动画。在Material UI中抽屉动画都是全屏的，再加上我们的钱包在Web页面中只占屏幕中心很小一部分，所以多次尝试之后由于个人能力问题无法使用抽屉实现。于是使用了常用的路由功能进行了跳转，简化这一部分的处理。有兴趣的读者可以自己研究一下Material UI的抽屉动画。界面里点击账号地址可以复制，点击详情按钮就会出现上一篇文章实现的用户详情界面。让我们点击添加代币（这里是ERC20代币），出现如下界面：这里我们和MetaMask界面相比也做了一些简化。在最上方的文本框里输入对应网络的代币合约地址并点击查询，查询结束后会显示该代币的符号、精度和你的代币余额。如果你输入的不是一个有效的代币地址，会提示地址无效。点击添加按钮，就可以将它添加到我们的代币列表里去了，注意这里的列表是可以上下滚动的。如果点击取消，则会回到钱包主界面，如果代币已经添加，会有提示。可以看到我们的列表里已经有GEC代币了，点击GEC代币右边的扩展按钮，会出现一个菜单

art-template模板浅析

阅读更多关于 art-template模板浅析

关于art-template模板，收藏了两篇文章，讲的比较系统，简单来说就是一个数据和页面的拼接渲染模板。具体跟 Vue、React 这些前端主流框架比较的性能，官方并未给出数据，但是我认为只比较页面渲染能力的话，应该相差不多， Vue、React 是一整套的前端解决方案，而 art-template 只是一个 js模板引擎，二者定位和功能不同，不做详细比较，猜测 art-template 同样是使用虚拟 DOM 的方式进行页面渲染，否则能达到这样的性能，着实不容易。就学习而言，如果学习过 Vue、React，学这个非常简单，反过来学会 art-template 对学习 Vue、React也有一定帮助。简单使用： 1.写模板 < script id = "art-template" type = "text/html" > < table > /******/ < tbody > { { each classInfoList } } < tr > < td > { { $index + 1 } } < / td > < td > { { $value . Id } } < / td > < td > { { $value . Name } } < / td > < td > { { $value . Teacher } } < / td > < td > { { $value

【React源码解读】react-component

阅读更多关于【React源码解读】react-component

源码在线地址： https://github.com/facebook/react/blob/master/packages/react/src/ReactBaseClasses.js // BaseReactClasses.js function Component(props, context, updater) { this.props = props; this.context = context; // If a component has string refs, we will assign a different object later. this.refs = emptyObject; // We initialize the default updater but the real one gets injected by the // renderer. this.updater = updater || ReactNoopUpdateQueue; } /** props:， context， refs: 挂载节点在上面 updater: 我们可能并没有在react component使用到过，承载了实际的component更新操作 */ Component.prototype.setState = function(partialState,

React入门基础（学习笔记）

阅读更多关于 React入门基础（学习笔记）

这篇博客是我通过阅读React官方文档的教程总结的学习笔记，翻译可能存在误差，如有疑问请参见 http://reactjs.cn/react/docs/tutorial.html 。一.所需文件在编写react代码前需要在html文件中引入三个文件我通过bower把react.js和react-dom.js下载在本地，这样在刷新浏览器时，浏览器加载会更快。第三个文件是react解码器，由于react用到的语法是jsx，浏览器是不能直接执行jsx语法的，要想你写的react代码在浏览器中运行，就必须将jsx转换为js代码，第三个文件可以达到将jsx转换为js的目的，当然这并不是唯一一个将jsx转换为js的方法。你还可以使用创建工具gulp或者grunt来将jsx转化为jsx。二.开始学习代码　　1.编写第一个react程序　　　　html文件的核心代码如下（html文件很简单）　　　　　　<body> 　　　　　<div id="contentOther"></div> 　　　　　<script type="text/babel" src="index.js"></script>　　　　　　</body>　　　　html文件代码解释：　　　　a:由于react并不是真正的js代码，所有script标签的type属性不能是text/js，而应该是text/babel　　　

React 学习笔记

阅读更多关于 React 学习笔记

1、react 使用JSX语法来描述html，位于花括号的值会被当做一个JavaScript表达式进行求值 2、props是组件的不可变属性，有个重要属性：children，可以使用props.children来引用位于前置标签和后置标签之间的内容 3、state 组件所有可变的属性存储在state中。当state被修改时，组件会触发响应式渲染，组件自身及其子组件都会被重新渲染 4、react中的事件：react为了高效，将事件处理从节点拿出来，统一放在文档根节点进行处理，当事件发生时会将事件映射到对应的组件去渲染。 5、react中的属性采用驼峰式大小写原则（“onClick” 而非"onclick"） 6、JSX是react对JavaScript的扩展，用于在js中编写声明式XML风格语法，JSX有一组类似HTML的XML标签，转义后JSX会被转换为针对Reat库的调用。例如 <h1> hello world </h1> 会被转义为 React.createElement("h1", null, "Hello world") 7、JSX与HTML的不同之处： 1）标签名采取驼峰式命名规范 2）所有元素必须闭合 3）标签名基于DOM api，而不是html语言规范，其中一个例子是class vs className 普通的html: <div class="some-class

React 学习笔记（学习地址汇总）

阅读更多关于 React 学习笔记（学习地址汇总）

好的博文地址： http://www.ruanyifeng.com/blog/2015/03/react.html 官网学习地址： http://facebook.github.io/react/docs/getting-started.html React中文网站： http://reactjs.cn/react/docs/tutorial.html JSX语法地址： http://facebook.github.io/react/docs/displaying-data.html#jsx-syntax React.Children方法文档： https://facebook.github.io/react/docs/top-level-api.html#react.children PropTypes设置文档： http://facebook.github.io/react/docs/reusable-components.html DOM diff文档： http://calendar.perfplanet.com/2013/diff/ 事件清单： http://facebook.github.io/react/docs/events.html#supported-events 具体元素的参考文档： http://facebook.github.io/react/docs

React Hooks 你不来了解下？

阅读更多关于 React Hooks 你不来了解下？

前言最近在看 React 的新语法—— React Hooks ，只能一句话概括：React 语法真的是越来越强大，越写代码越少。强烈推荐还没看 React Hooks 的同学去学习下，这会让你写react 项目变得非常爽！以前 React 组件可以看成是：无状态组件（function定义）和有状态组件（class 定义），React Hooks 出现之后，我们基本所有的组件都可以用function定义，包括有组态组件，基本废除了写 class 语法的复杂性，让我们写代码真正变成了函数式编程。状态 Hooks(useState) 这里说明一点，react中所有的Hooks都是一种函数，函数都是用来实现特定功能的。 useState 提供了创建组件state的功能，用法： const [count, setCount] = useState(0) useState() 接受唯一一个状态初始值参数，返回包含状态和改变状态对应的函数的数组，这里采用数组解构方法获得状态变量 count ，改变状态方法 setCount。强调一点： useState() 传入的初始值不一定非要是个对象，可以为普通数据类型，比如：Number，String等，初始值用作组件初次渲染。 setCount() 接受一个全新的state状态，react会直接全部替换掉原来的state状态，这点和

订阅 react