从零开始学习react-01

最新推荐文章于 2024-04-23 13:38:37 发布

麦票

最新推荐文章于 2024-04-23 13:38:37 发布

阅读量226

点赞数

分类专栏：从零开始学习react

本文链接：https://blog.csdn.net/weixin_39057358/article/details/80905822

版权

从零开始学习react 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

第一节 React简介：

React起源于Facebook的内部项目，该公司积极尝试引入HTML5技术用来架设Instagram网站，开发中发现HTML5的性能下降明显，达不到预期的效果。他们就自己开发了React框架。

ReactJS官方地址：https://facebook.github.io/react/

GitHub地址：https://github.com/facebook/react

react特点：

虚拟DOM: React也是以数据驱动的，每次数据变化React都会扫码整个虚拟DOM树，自动计算与上次虚拟DOM的差异变化，然后针对需要变化的部分进行实际的浏览器DOM更新。
组件化： React可以从功能角度横向划分，将UI分解成不同组件，各组件都独立封装，整个UI是由一个个小组件构成的一个大组件，每个组件只关系自身的逻辑，彼此独立。
单项数据流： React设计者认为数据双向绑定虽然便捷，但在复杂场景下副作用也是很明显，所以React更倾向于单向的数据流动-从父节点传递到子节点。（使用ReactLink也可以实现双向绑定，但不建议使用）

编写自己第一个react程序

首先需要先引入两个核心文件:

react.js：实现React核心逻辑，且于具体的渲染引擎无关，从而可以跨平台公用。如果应用要迁移到React Native，这一部分逻辑是不需要改变的。
react-dom.js：包含了具体的DOM渲染更新逻辑，以及服务端渲染的逻辑，这部分就是与浏览器相关的部分了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>第一个React程序</title>
</head>
<body>
  <div id="reactContainer"></div>
  <script src="./common/react.js"></script>
  <script src="./common/react-dom.js"></script>
  <script>
    /**
      它的作用是注册一个组件类HelloComponent,
      这个组件类只包含一个render函数，
      该函数通过调用React.createElement实现了以下HTML内容：
    */
    var HellowComponent = React.createClass({ //声明一个组件
      render: function() { //必须有的方法 render
        return React.createElement('h1', null, 'Hello world')
      }
    });

    // 渲染  
    // ReactDOM.render是React的最基本方法，用于将模板转为HTML语言，并插入指定的DOM节点。
    ReactDOM.render(
      React.createElement(HellowComponent,null),
      document.getElementById('reactContainer')
      )
  </script>
</body>
</html>

React.createClass

它的作用是注册一个组件类HelloComponent,这个组件类只包含一个render函数，该函数通过调用React.createElement实现了以下HTML内容：

<h1>Hello world</h1>

ReactDOM.render()

ReactDOM.render是React的最基本方法，用于将模板转为HTML语言，并插入指定的DOM节点。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>练习2</title>
</head>
<body>
  <div id="reactContainer"></div>
  <script src="./common/react.js"></script>
  <script src="./common/react-dom.js"></script>
  <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
  <!-- <script type="text/babel"> //练习使用,不建议项目使用
    var HellowComponent = React.createClass({ //声明一个组件
      render: function() { //必须有的方法 render
        return <h1>Hello {this.props.name?this.props.name:'world'}</h1>
        // 支持三元表达式 以及 || && 
      }
    });

    // 渲染
    ReactDOM.render(
      <HellowComponent name="张二狗"/>,
      document.getElementById('reactContainer')
      )
  </script> -->

  <script type="text/babel">
    var HellowComponent = React.createClass({
      render: function(){
        return <h1>Hellow world</h1>
      }
    })
    ReactDOM.render(
      <HellowComponent />,
      document.getElementById('reactContainer')
    )
  </script>
</body>
</html>

麦票

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始学习react-01

第一节 React简介：React起源于Facebook的内部项目，该公司积极尝试引入HTML5技术用来架设Instagram网站，开发中发现HTML5的性能下降明显，达不到预期的效果。他们就自己开发了React框架。ReactJS官方地址：https://facebook.github.io/react/GitHub地址：https://github.com/facebook/re...
复制链接

扫一扫

专栏目录