React 核心入门 (学习第一天)

一.React 简介

1 .React 是什么?

一个用于构建用户界面的 JavaScript 库
中文手册:https://react.docschina.org/

2.官网

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

3.介绍描述

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

二.声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据变动时 React 能高效更新并渲染合适的组件。
以声明式编写 UI,可以让你的代码更加可靠,且方便调试。

三.组件化

构建管理自身状态的封装组件,然后对其组合以构成复杂的 UI。
由于组件逻辑使用 JavaScript 编写而非模板,因此你可以轻松地在应用中传递数据,并保持状态与 DOM 分离。

四.React的特点

1.声明式编码
2.组件化编码
3.React Native 编写原生应用
4.高效(优秀的Diffing算法)

五.React高效的原因

1.使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
2.DOM Diffing算法, 最小化页面重绘。

六.如何使用 React

基于浏览器的模式
  • React.js 提供 React.js 核心功能代码,如:虚拟 dom,组件
    • React.createElement(type,props,children);
  • ReactDOM 提供了与浏览器交互的 DOM 功能,如:dom 渲染
    • ReactDOM.render(element, container[, callback])
      • element:要渲染的内容
      • container:要渲染的内容存放容器
      • callback:渲染后的回调函数

七.React基本使用

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
第一种使用
<!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>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        ReactDOM.render(
            React.createElement("h1",null,"哈哈哈"),
            document.querySelector("#root"),
            ()=>{
   
                console.log("渲染成功")
            }
        )
    </script>
</body>
</html>
第二种React创建视图
<script>
        let h1 = React.createElement("h1",null,"我是一个标题")
        let p = React.createElement("h1",null,"我是一个标签")
        let el = React.createElement(
            "header",
            {
   id:"header"},
            h1,
            p
        )
        ReactDOM.render(
            el,
            document.querySelector("#root"),
            ()=>{
   
                console.log("渲染成功")
            }
        )
    </script>

八.babel

babel-standalone.js:在浏览器中处理 JSX
https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js

九.JSX

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值