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

时间：2022-03-25 08:49:34

摘要

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>

相关文章