React入门：hello wrold-WEB前端开发

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)。

WEB前端开发

React入门：hello wrold

简单的hello wrold

第一个组件

相关推荐

评论抢沙发

置顶推荐

最近文章

热门标签

最新评论

分类目录

热门文章

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

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

支付宝扫一扫打赏

微信扫一扫打赏

简单的hello wrold

第一个组件

相关推荐

评论 抢沙发

置顶推荐

最近文章

热门标签

最新评论

分类目录

热门文章

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

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

支付宝扫一扫打赏

微信扫一扫打赏

评论抢沙发

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