资讯专栏INFORMATION COLUMN

React Starter Kit 学习笔记

longshengwang / 1901人阅读

摘要:根据页面中中的例子汇总修改而成。代码代码流逝时间计时器按钮点击计数流逝时间计时器写法实时求解一元二次方程调用组件制作动画效果代码仅在例中使用

根据http://reactjs.cn/react/docs/...页面中Starter Kit 15.3.1中的例子汇总修改而成。

HTML代码





    
    React test
    
    
    
    



    

JS代码

const container1 = document.getElementById("container1")
const container2 = document.getElementById("container2")
const container3 = document.getElementById("container3")
const container4 = document.getElementById("container4")
const container5 = document.getElementById("container5")
const container6 = document.getElementById("container6")


//1 "Hello" + name
function Welcome(props) {
    return 

Hello, { props.name } < /h1>; } const element = < Welcome name = "Diary" / > ; ReactDOM.render( element, container1 ); //2 流逝时间计时器 var Elapsed = React.createClass({ render: function () { var elapsed = Math.round(this.props.elapsed / 100); var seconds = elapsed / 10 + (elapsed % 10 ? "" : ".0"); var message = "React has been successfully running for " + seconds + " seconds."; return

{ message } < /p>; } }); var start = new Date().getTime(); setInterval(function () { ReactDOM.render( < Elapsed elapsed = { new Date().getTime() - start } / > , container2 ); }, 50); //3 按钮点击计数 var Counter = React.createClass({ getInitialState: function () { return { count: 2, sum: 100 }; }, handleClick: function () { this.setState({ count: this.state.count * this.state.count, }); }, handleDoubleClick: function () { this.setState({ count: 2, sum: 1000 }) }, render: function () { return ( < button onClick = { this.handleClick } onDoubleClick = { this.handleDoubleClick }> sum - count: { this.state.sum - this.state.count } < /button> ); } }); ReactDOM.render( < Counter / > , container3 ); //4 流逝时间计时器(ES6写法) class ExampleApplication extends React.Component { render() { var elapsed = Math.round(this.props.elapsed / 100); var seconds = elapsed / 10 + (elapsed % 10 ? "" : ".0"); var message = `React has been successfully running for ${seconds} seconds.`; return

{ message } < /p>; } } var start = new Date().getTime(); setInterval(() => { ReactDOM.render( < ExampleApplication elapsed = { new Date().getTime() - start }/>, container4 ); }, 50); //5 实时求解一元二次方程 var QuadraticCalculator = React.createClass({ getInitialState: function() { return { a: 1, b: 3, c: -4 }; }, /** * This function will be re-bound in render multiple times. Each .bind() will * create a new function that calls this with the appropriate key as well as * the event. The key is the key in the state object that the value should be * mapped from. */ handleInputChange: function(key, event) { var partialState = {}; partialState[key] = parseFloat(event.target.value); this.setState(partialState); }, render: function() { var a = this.state.a; var b = this.state.b; var c = this.state.c; var root = Math.sqrt(Math.pow(b, 2) - 4 * a * c); var denominator = 2 * a; var x1 = (-b + root) / denominator; var x2 = (-b - root) / denominator; return (

ax2 + bx + c = 0

Solve for x:




x: {x1}, {x2}

); } }); ReactDOM.render( , container5 ); //6 调用React组件CSSTransitionGroup制作动画效果 var CSSTransitionGroup = React.addons.CSSTransitionGroup; var INTERVAL = 2000; var AnimateDemo = React.createClass({ getInitialState: function() { return {current: 0}; }, componentDidMount: function() { this.interval = setInterval(this.tick, INTERVAL); }, componentWillUnmount: function() { clearInterval(this.interval); }, tick: function() { this.setState({current: this.state.current + 1}); }, render: function() { var children = []; var colors = ["#fac", "#cdc", "#36d", "#ca0", "#0aa"]; for (var i = this.state.current, pos=0; i < this.state.current + colors.length; i++, pos++) { var style = { left: pos * 128, background: colors[i % colors.length] }; children.push(
{i}
); } return ( {children} ); } }); ReactDOM.render( , container6 );

CSS代码(仅在例6中使用)

.example-enter,
.example-leave {
  -webkit-transition: all .25s;
  transition: all .25s;
}

.example-enter,
.example-leave.example-leave-active {
  opacity: 0.01;
}

.example-leave.example-leave-active {
  margin-left: -128px;
}

.example-enter {
  margin-left: 128px;
}

.example-enter.example-enter-active,
.example-leave {
  margin-left: 0;
  opacity: 1;
}

.animateExample {
  display: block;
  height: 128px;
  position: relative;
  width: 384px;
}

.animateItem {
  color: white;
  font-size: 36px;
  font-weight: bold;
  height: 128px;
  line-height: 128px;
  position: absolute;
  text-align: center;
  -webkit-transition: all .25s; /* TODO: make this a move animation */
  transition: all .25s; /* TODO: make this a move animation */
  width: 128px;
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81877.html

相关文章

  • 服务端渲染的React手脚架。完美使用 React, Redux, and React-Router

    摘要:服务端渲染的手脚架这个启动包的设计是为了让你使用一整套最新最酷的前端技术,所有都是可配置,富特性,基于已经提供代码热加载,使用预处理,单元测试,代码覆盖率报告,代码分割等等更多。 Universal React Starter Kit 服务端渲染的React手脚架 这个启动包的设计是为了让你使用一整套最新最酷的前端技术,所有都是可配置,富特性,基于webpack已经提供代码热加载,使用...

    zhouzhou 评论0 收藏0
  • 服务端渲染的React手脚架。完美使用 React, Redux, and React-Router

    摘要:服务端渲染的手脚架这个启动包的设计是为了让你使用一整套最新最酷的前端技术,所有都是可配置,富特性,基于已经提供代码热加载,使用预处理,单元测试,代码覆盖率报告,代码分割等等更多。 Universal React Starter Kit 服务端渲染的React手脚架 这个启动包的设计是为了让你使用一整套最新最酷的前端技术,所有都是可配置,富特性,基于webpack已经提供代码热加载,使用...

    RayKr 评论0 收藏0
  • 服务端渲染的React手脚架。完美使用 React, Redux, and React-Router

    摘要:服务端渲染的手脚架这个启动包的设计是为了让你使用一整套最新最酷的前端技术,所有都是可配置,富特性,基于已经提供代码热加载,使用预处理,单元测试,代码覆盖率报告,代码分割等等更多。 Universal React Starter Kit 服务端渲染的React手脚架 这个启动包的设计是为了让你使用一整套最新最酷的前端技术,所有都是可配置,富特性,基于webpack已经提供代码热加载,使用...

    DC_er 评论0 收藏0
  • 前端相关框架总和

    摘要:前端框架总和有很多小伙伴工作开发需要很多的框架和软件,那么接下来就为大家介绍一下相关的框架和软件设计用于构建用户界面的声明性,高效且灵活的库。为应用程序中的每个状态设计简单视图,当数据发生变化时,将有效地更新和呈现正确的组件。 前端框架总和 有很多小伙伴工作开发需要很多的框架和软件,那么接下来就为大家介绍一下相关的框架和软件 1.UI设计 react    用于构建用户界面的声明性...

    senntyou 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<