zoukankan      html  css  js  c++  java
  • React

    官网:https://react.docschina.org/

    React 起源于 Facebook(脸书) 的内部项目,它是一个用于构建用户界面的 javascript 库,Facebook用它来架设公司的Instagram网站,并于2013年5月开源。

    React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。认为它可能是将来 Web 开发的主流工具之一。

    • 声明式

    你只需要描述UI看起来是什么样式,就跟写HTML一样,React负责渲染UI

    • 基于组件

    组件时React最重要的内容,组件表示页面中的部分内容

    • 学习一次,随处使用

    使用React可以开发Web应用(ReactJs),使用React可以开发移动端(react-native),可以开发VR应用(react 360)

    React与传统MVC的关系

    React用于构建用户界面的 JavaScript 库,它不是一个完整的MVC框架,最多可以认为是MVC中的V(View),甚至React并不非常认可MVC开发模式;React 构建页面 UI 的库。可以简单地理解为,React 将将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面。

    浏览器扩展与vscode开发扩展安装

    Chrome 浏览器扩展:https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=zh-CN

    vscode安装react开发扩展

    react开发需要引入多个依赖文件,其中react.js、react-dom.js这两个文件是我们创建react应用程序必须要引入的依赖文件。

    react.js 是核心,提供创建元素,组件等功能

    https://unpkg.com/react@16/umd/react.development.js

    react-dom.js 提供DOM相关功能

    https://unpkg.com/react-dom@16/umd/react-dom.development.js

    下载对应的react.js和react-dom.js的开发版本的js类库文件到本机中后,通过script引入到当前的网页中

    // React 的核心库

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>

    //DOM 相关的功能

    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    html中定义reactjs渲染容器id和进行React实例化相关操作,完成helloworld显示

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hell world</title>
    </head>
    
    <body>
      <!-- 用于内容显示容器 挂载点 -->
      <div id="app"></div>
    
      <!-- react核心类库 -->
      <script src="./js/react.development.js"></script>
      <!-- dom操作 -->
      <script src="./js/react-dom.development.js"></script>
      <script>
        const app = document.querySelector('#app')
    
        // 虚拟dom
        const el = React.createElement
    
        const vnode = el(
          'div',
          null,
          el('h1', { id: 100 }, 'hello world'),
          el('h1', { id: 100 }, 'hello world'),
        )
    
        // 把虚拟dom转为真实的dom并挂载到页面中
        ReactDOM.render(vnode, app)
    
    
      </script>
    
    
    </body>
    
    </html>
    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    BUUCTF-web ZJCTF,不过如此
    BUUCTF-web ikun(Python 反序列化)
    BUUCTF-web web1 (无列名注入)
    求前 n 个正整数的 k 次方和
    增根和失根:解方程的逻辑问题
    斜二测画法的经验公式
    像素转换mm
    正则表达式收集
    (转)mssql sp_addextendedproperty 用法,作用
    (转).net平台下垃圾回收机制
  • 原文地址:https://www.cnblogs.com/ht955/p/14447425.html
Copyright © 2011-2022 走看看