zoukankan      html  css  js  c++  java
  • React——React简介和基本使用【一】

    前言

    记录下react的学习过程

    内容

    React简介

    英语官网 : https://reactjs.org/

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

    React

    React是由Facebook开源的,用于动态构建用户界面的 JavaScript 库(只关注于视图)。

    特点

    1. 采用组件化模式、声明式编码,提高开发效率和组件复用率。

    2. React Native 中使用React语法进行移动端开发。

    3. 使用虚拟DOM和Diffing算法,尽量减少与真实DOM的交互。

    React基本使用

    hello react

    目录结构

    ├─01_hello_react
    │      hello_react.html
    │
    └─js
            babel.min.js  #将JSX语法转JS代码的库
            react-dom.development.js #react扩展库
            react.development.js #react核心库
    

    hello_react.html

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    <!--创建"容器"-->
     <div id="test">
    
     </div>
    <!--引入react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--引入react-dom,用于支持react操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转js-->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">/*一定要以text/babel来声明*/
        //1. 创建虚拟DOM
        const VDOM = <h1>Hello, React</h1>/*此处一定不要写引号*/
        //2. 渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
    </body>
    </html>
    

    学无止境,谦卑而行.
  • 相关阅读:
    Android如何实现超级棒的沉浸式体验
    这次聊聊Promise对象
    svn add文件名包含@符号的解决方案
    证明3|n(n+1)(2n+1)
    Xcode迁移工程常见问题
    Multiple build commands for output file
    python中descriptor的应用
    xcode快捷键
    Cycript
    令assignment操作符返回一个reference to *this
  • 原文地址:https://www.cnblogs.com/wangyang0210/p/14387610.html
Copyright © 2011-2022 走看看