• React(一)


    React:是Facebook内部的一个JavaScript类库,专注于提供清晰、简介的视图层解决方案

    特点:

        1. 高效:虚拟DOM,通过对dom的模拟,最大限度减少对dom的交互

        2. 灵活:可以与已有的框架或库很好的配合

        3. jsx : 直观定义用户界面,react的核心组成部

        4. 组件:构建组件,是代码更容易得到复用

        5. 单项响应数据流 : 变化可预计、可控制

    安装(在安装之前要确认你的机器上安装了node.js环境包括npm):

    npm insatll -g create-react-app   
    create-react-app hello-react //构建一个叫hello-react的工程

    下载完成后就可以启动工程,进入工程目录通过npm启动工程

    cd hello-react  //进入指定文件
    npm start

    启动成功之后就会自动打开浏览器,可以看到React的工程顺利运行效果

     下面通过一个简单的例子讲解React.js描述UI的方式,把src/index.js中的代码改成:

    import React.{Component} from 'react'  //依赖组件Component
    import ReactDOM from 'react-dom'
    import './index.css'
    
    class Header extends Component{
      render(){
        return(  //render里面为JSX语法 JSX其实就是JavaScript对象
          <div>
            <h1>React 小书</h1>
          </div>
          )
        }
    }
    
    ReactDOM.render(  //只有渲染作用
      <Header />,  //渲染组件
        document.getElementById('root')   //构造dom树
    )

     在文件头部从react包中引入了react和react.js的组件父类Component,记住,只要写React.js组件,那么就必须引入这两个东西。

    ReactDOM作用为把React组件渲染到页面上去,并没有其他作用

     

  • 相关阅读:
    #Leetcode# 90. Subsets II
    Linux——网段的划分,子网掩码,ABC类地址的表示法
    Linux——文件目录管理(结构)
    Caffe入门与应用 by GX
    1、概述
    6、多态性-4、抽象类
    6、多态性-3、虚函数
    第二课2、ROS
    第一课1、ROS
    6、多态性-2、运算符重载
  • 原文地址:https://www.cnblogs.com/jrrrrr/p/9448843.html
Copyright © 2020-2023  润新知