react入门

温柔的二斤半

于 2023-07-26 12:01:14 发布

阅读量61

点赞数 1

分类专栏： react 文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/m0_67388537/article/details/131936321

版权

react 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

React入门

React是用于构建用户界面的JavaScript库, 起源于Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
React经历了多个版本的迭代升级,目前(2021年4月7日)最新版本为: v17.0.2 .

react教程

react是用于构建用户界面的 JavaScript 库,react特点如下(摘自runoob):

声明式设计 −为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。
高效 −React采用Virtual DOM(虚拟DOM), 极大的提升了UI渲染(更新)效率。
灵活 −React 允许你结合其他框架或库一起使用。
JSX − JSX 是 JavaScript 语法的扩展。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。
组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流 − React 采用了单向响应的数据流，使组件状态更容易维护, 组件模块化更易于快速开发。

helloWorld

我们来实现第一个react实例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入react依赖库,注意顺序,当前版本: v17.0.2 -->
  <script src="lib/react/react.development.js"></script>
  <script src="lib/react/react-dom.development.js"></script>
  <!-- 引入babel库,用于解析jsx语法
    # https://www.babeljs.cn/setup#installation
  -->
  <script src="lib/react/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  // 这里不是原生的javascript语法,而是特殊的jsx(javascript+xml)语法,需要用babel解析.
  <script type="text/babel">
    var msg = 'hello,world!';
    // 使用es6 class 通过继承可以得到一个react组件的类
    class HelloWorld extends React.Component {
      render(){
        return (
          <div>{msg}</div>
        )
      }
    }
    // 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
    ReactDOM.render(<HelloWorld />,document.getElementById('root'));
  </script>
</body>
</html>

温柔的二斤半

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react入门

React经历了多个版本的迭代升级,目前(2021年4月7日)最新版本为: v17.0.2 .react是用于构建用户界面的 JavaScript 库,react特点如下(摘自。做出来以后，发现这套东西很好用，就在2013年5月开源了。的内部项目，因为该公司对市场上所有 JavaScript。框架，都不满意，就决定自己写一套，用来架设。
复制链接

扫一扫