【JAVASCRIPT】React入门学习-文本渲染

摘要

react 学习包括几个部分：

  • 文本渲染
  • JSX 语法
  • 组件化思想
  • 数据流

文本渲染

1. 纯文本渲染

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8" />
    <title>页面无变量渲染模板</title>
</head>
<body>
    <div id="container"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script type="text/jsx">
    var ExampleApplication = React.createClass({
        render: function() {
            return (
                <div className="test">
                    猴赛雷，我的第一个react demo 啊。
                </div>
            );
        }
    });

    var ExampleApplication1 = React.createClass({
        render: function () {
            return (<div>hello word</div>);
        }
    });
    React.render(
        <ExampleApplication1 />,
        document.getElementById('container')
    );
</script>
</html>

2. 普通变量渲染及按时间循环渲染

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>普通变量渲染及按时间循环渲染</title>
</head>
<body>
    <div id="HelloWorld"></div>
    <div id="HelloWorldTime"></div>
    <div id="HelloWorldIndex"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script type="text/jsx">
    var HelloWorldTime = React.createClass({
        render: function() {
            return (
            <p>
                It is {this.props.date.toTimeString()}
            </p>
            );
        }
    });

    var HelloWorldIndex = React.createClass({
        render: function() {
          return (
            <p>
                index: {this.props.index}
            </p>
          );
        }
    });

    var HelloWorld = React.createClass({
        render: function() {
            return (
                <p>
                    你好，{this.props.name}, 欢迎大驾光临！
                </p>
            );
        }
    });

    React.render(
        <HelloWorld name={'huxiaoyun'} />,
        document.getElementById('HelloWorld')
    );

    var index = 0;
    setInterval(function() {
        React.render(
            <HelloWorldTime date={new Date()} />,
            document.getElementById('HelloWorldTime')
        );
        React.render(
            <HelloWorldIndex index={index ++} />,
            document.getElementById('HelloWorldIndex')
        );
    }, 500);
</script>
</html>

3. 没有 JSX 的 React

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>没有 JSX 的 React</title>
</head>
<body>
    <div id="example"></div>
    <div id="example1"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script>
    React.render(
        React.createElement('div', null,
            React.createElement('div', null,
                React.createElement('div', null, 'content')
            )
        ),
        document.getElementById('example')
    );

    var child = React.createElement('li', null, 'Text Content');
    var root = React.createElement('ul', { className: 'my-list' }, child);
    React.render(root, document.getElementById('example1'));
</script>
</html>
posted @ 2015-09-05 18:36  空城夕  阅读(457)  评论(0)  编辑  收藏  举报