React入门:hello wrold

React是由Facebook开源的一个专注于“前端UI渲染“的JavaScript框架。它的重心是我们一般所说的MVC开发模式中的”V”,而这些得益于React所提供的一种虚拟DOM的概念。

简单的hello wrold

直接上手,看代码:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
    <title>Hello World!</title>
      <script src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
      <script src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
  </head>
  <body>
  <div id="example"></div>
  <script type="text/jsx">
      React.render(
          <h1>Hello World!</h1>,
          document.getElementById("example"),
          function(){
              console.log("OK!")
          }
      )
  </script>
  </body>
</html>

Hello World!

入门点1:

这里引用了JSXTransformer.js,他的作用是将 JSX 语法转为 JavaScript 语法。生产环境中一般这一步放在服务端完成。

入门点2:

React.render()是非常常用的方法,渲染一个 ReactElement 到 DOM 中,放在指定的容器 DOM 元素下,返回一个到该组件的引用。如果 ReactElement 之前就被渲染到了指定的容器 DOM 元素中,该函数将会更新此 ReactElement,仅改变需要改变的 DOM 节点以展示最新的 React 组件。

第一个组件

看代码:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
    <title>Hello World!</title>
      <script src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
      <script src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
  </head>
  <body>
  <div id="example"></div>
  <script type="text/jsx">
      var HelloMessage = React.createClass({
        render: function() {
          return <h1>Hello {this.props.name}</h1>;
        }
      });
      
      React.render(
        <HelloMessage name="" />,
        document.body
      );
  </script>
  </body>
</html>

Hello World!

入门点1:

调用 React.createClass() 来创建一个组件,组件名称(上例中的“HelloMessage”)第一个字母约定大写;

入门点2:

render():通过 React.createClass() 创建的组件,必须包含一个render()方法,具体说明查看https://www.html.cn/react/docs/component-specs.html#render

入门点3:

定义完组件,需要调用React.render()方法,将ReactElement (组件)渲染到对应的DOM元素中(这里我们使用document.body)。

赞(1) 打赏
未经允许不得转载:WEB前端开发 » React入门:hello wrold

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏