React
文章平均质量分 52
燃烧FFF
这个作者很懒,什么都没留下…
展开
-
React学习笔记(一)安装和Hellow,world
折腾有一会了,React更新的比较快,许多教程都已经过时了,先把折腾的出来的正确流程记下来,以备以后查询。 React.createClass目前官网版本16.2.0中已废弃 一、安装React 使用的是webstorm和node。 在webstorm中新建项目React。 1. 输出package.json npm init -y 2.安装web原创 2018-01-21 15:09:18 · 217 阅读 · 0 评论 -
React学习笔记(九)列表
列表 使用map()函数让数组中的每一项翻倍,我们得到了一个新的数列doubled const numbers = [1,2,3,4,5]; const doubled = numbers.map((number) => number*2); console.log(doubled); const numbers = [1,2,3,4,5] const listItems = numbers.m原创 2018-01-26 09:37:24 · 232 阅读 · 0 评论 -
React学习笔记(八)元素变量
//元素变量 //登陆 function LoginButton(props) { return( onClick={props.onClick}> Login ) } //注销 function LogoutButton(props) { return( onClick={props.onClick原创 2018-01-24 11:15:01 · 551 阅读 · 0 评论 -
React学习笔记(七)条件渲染
//条件渲染 function UserGreeting(props) { return Welcome back! } function GuestGreeting(props) { return Please sign up } function Greeting(props) { const isLoggedIn = props.isLoggedIn; if原创 2018-01-24 11:13:48 · 494 阅读 · 0 评论 -
React学习笔记(六)事件处理
//事件处理 class Toggle extends React.Component{ constructor(props){ super(props); this.state = {isToggleOn:true}; this.handleClick = this.handleClick.bind(this) } hand原创 2018-01-24 11:12:04 · 242 阅读 · 0 评论 -
React学习笔记(五)封装时钟
//封装时钟 //原时钟代码 function Clock(clock) { return ( Hello, world! It is {clock.date.toLocaleTimeString()}. ); } function tick() { ReactDOM.render(原创 2018-01-23 14:30:33 · 1268 阅读 · 0 评论 -
React学习笔记(四)组件拆分
//提取组件 function formatDate(date) { return date.toLocaleString(); } //提取Avatar组件 function Avatar(props) { return( className="Avatar" src={props.user.avatarUrl}原创 2018-01-23 14:27:57 · 1039 阅读 · 0 评论 -
React学习笔记(三)组件
// 组件&props // 组件可以在它的输出中引用其它组件,这就可以让我们用同一组件来抽象出任意层次的细节。在React应用中,按钮、表单、对话框、整个屏幕的内容等,这些通常都被表示为组件。 // React将{name: 'Sara'}作为props传入并调用Welcome组件。 // Welcome组件将Hello, Sara元素作为结果返回。 function Welcome(props原创 2018-01-22 11:29:47 · 274 阅读 · 0 评论 -
React学习笔记(二)元素渲染
元素是构成 React 应用的最小单位。 元素用来描述你在屏幕上看到的内容。 const element = hello world;//元素element ReactDOM.render( element, document.getElementById('example') ); 在Index中添加id="example"的div id="example原创 2018-01-22 11:25:57 · 361 阅读 · 0 评论 -
React学习笔记(十)受控组件
//受控组件 class NameForm extends React.Component{ constructor(props){ super(props); this.state = {value:''} this.handleChange = this.handleChange.bind(this) this.hand原创 2018-01-26 09:38:30 · 409 阅读 · 0 评论