程序员经验分享-hwhale

react入门，适合新手小白！

2023-11-17

1.1官方网站 

中文官网 React 官方中文文档 – 用于构建用户界面的 JavaScript 库

  1. 2 react简介

1.2.1 React是什么?

主要是帮助咱们操作界面,也就是操作视图呈现页面

1.2.2 为什么要学React?

易于学习

React易于学习，这是选择此库的最重要原因之一。由于学习这项技术不需要太多时间，您可以快速开始用它来构建。

丰富的用户界面

React可让您轻松构建丰富的用户界面。用户界面的质量很重要，因为设计不良的用户界面通常不太方便用户，用户也不喜欢设计不佳的UI。

如果您的网络应用拥有酷炫的高品质用户界面，那么您的用户一定会喜欢使用您的应用。因此，构建高质量的用户界面对于业务成功至关重要。

是的，您也可以使用其他技术构建很酷的接口，但React允许您使用声明性组件轻松完成。

提高工作效率

您可以使用可重用组件和开发工具来提高工作效率

强大的社区支持

你应该选择React进行前端开发的最大原因之一是它拥有非常强大的社区支持。一个庞大的开发者社区正在使React变得更好，因为它是一个开源库，来自世界各地的程序员正在帮助人们以不同的方式学习这项技术。

1.3 React的基本使用

下载并引入文件,注意要按照先后顺序

先引入react核心库

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

在引入react-dom用于支持react操作DOM

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

最后引入 babel用于将jsx转为js

https://unpkg.com/babel-standalone@6/babel.min.js

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="./react.development.js"></script>

    <script src="./react-dom.development.js"></script>

    <script src="./babel.min.js"></script>

</head>

<body>

    <div id='test'></div>

    <script type='text/babel'>/*注意此处要写babel*/

        //1.创建虚拟DOM

        const VDOM = <h2>大华教育</h2> /*此处不要写引号,因为不是字符串*/

        //2.渲染虚拟DOM到页面

        ReactDOM.render(VDOM,document.getElementById('test'))



    </script>

</body>

</html>

 

效果图:

 

1.4 JSX基本语法

由于React里面推荐使用jsx语法,比原生js更简洁方便,因此我先学习一下jsx的基本语法

JSX的全称是:JavaScript XML

React定义的一种类似于XML的JS扩展语法: JS + XML

JSX里面的注释:  {/*被注释掉的内容*/}

作用:用来简化创建虚拟DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsx基本语法</title>
    <style>
        .col{
            color:red;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div id='test'></div>
    <!-- 引入react核心库 -->
    <script src="./react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script src="./react-dom.development.js"></script>
    <!-- 引入babel 用于将jsx转为js -->
    <script src="./babel.min.js"></script>
    <script type='text/babel'>
        var myName = '张三';
        var myId = 'Abc';
        var ss = '40px';
        // 1.创建虚拟DOM
        var VDOM=(
            <div id='box'>
                <h1 id={myId.toLocaleLowerCase()}>
                    <i className='col' style={{fontSize:"20px"}}>{myName}</i>
                    <p style={{fontSize:ss}}>你好!</p>
                </h1>
            </div>
        )
        //2.渲染虚拟dom到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
      
    </script>
</body>

</html>

jsx的语法规则：
                1.定义虚拟dom时,不要写引号.
                2.多行虚拟dom可以使用()包裹起来
                3.标签中混入js表达式,想要能解析使用{}包裹起来
                    {}内只能使用js表达式,不能写js语句
                    什么是js表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
                    比如: 一个变量  myName
                        函数调用 fun() 
                        运算 a+b
                        arr.map()
                        定义一个函数 function.aa(){}
                            
                4.样式的类名指定不要用class,要使用className,注意N要大写驼峰命名法
                5.内联样式要使用说话括号包裹起来{{}},里面采用小驼峰命名法比如font-size要写成fontSize
                fontSize:后面的值要加引号,如果不加引号会把这个值当做变量解析
                6.虚拟dom只能有一个根标签,上面代码 id为box的div就是艮标签,他不能有多个同级标签
                7.标签首字母
                    如果是小写字母开头,则将标签转为html中同名元素,如果html中没有此标签则报错
                    若大写字母开头,react就去渲染对应的组件,若组件没有定义则报错(后面课程会讲到组件)

 

 

1.5 元素渲染

元素描述了你在屏幕上想看到的内容

const element = <h1>大华教育</h1>;

与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致

将一个元素渲染为 DOM

假设你的 HTML 文件某处有一个 <div>：

<div id='test'></div>

我们将其称为“根” DOM 节点，因为该节点内的所有内容都将由 React DOM 管理。

想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()：

 const element = <h1>大华教育</h1>;

 ReactDOM.render(element,document.getElementById('test'));

在页面上就会展示出”大华教育”

完整代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id='test'></div>

    <script src="./react.development.js"></script>

    <script src="./react-dom.development.js"></script>

    <script src="./babel.min.js"></script>

    <script type='text/babel'>

        const element = <h1>大华教育</h1>;

        ReactDOM.render(element,document.getElementById('test'));

    </script>

</body>

</html>

1.5.1 更新已渲染的元素

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

一个计时器的例子:

<body>

    <div id='test'></div>

    <script src="./react.development.js"></script>

    <script src="./react-dom.development.js"></script>

    <script src="./babel.min.js"></script>

    <script type='text/babel'>

        function tick() {

            const element = (

                <div>

                    <h1>大华教育</h1>

                    <h2>当前时间是 {new Date().toLocaleTimeString()}.</h2>

                </div>

            );

            ReactDOM.render(element, document.getElementById('test'));

        }

        setInterval(tick, 1000);

    </script>

</body>

 

这个例子会在 setInterval() 回调函数，每秒都调用 ReactDOM.render()

React 只更新它需要更新的部分

React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ReactJS

react入门，适合新手小白！ 的相关文章

随机推荐

  • windows 平台的python语言 PCL 安装包

    之前很多人找我要点云数据处理的 PCL 的python语言PCL 的 whl 安装包 我统一放到百度网盘 就不一一回复了 目前仅支持python 3 6 3 7 版本 python pcl 0 3 0rc1 cp37 cp37m win a

  • ssm框架下的文件上传和下载

    ssm下的文件上传和下载 1 文件上传 1 1 文件上传需要的依赖 文件上传需要使用到 commons fileupload 和 commons io 两个 jar 包

  • C++ 继承同一个的基类的所有派生类使用同一个全局变量的三种方式

    定义全局变量类型 ifndef D HPP define D HPP include

  • 壁画修复项目

    2020年8月11日 开始制作壁画数据集 2020年8月13日 完成了196张壁画数据集的制作

  • 中文转换为完整拼音算法原理分析

    最近由于项目需要 对简体中文转拼音的算法作了一些了解 然而在google找到的大多是获得简体中文拼音首字母的算法 好不容易让我找到了一个sunrise spell的类 专门用于中文转完整拼音 觉得的确做得不错 于是对它的算法作了一些分析 总

  • Linux中安装软件到指定文件夹

    一丶编译安装make install方式 一般来说都是先用tx zxvf解压tar gz再make编译之后直接make install安装 但是这会直接安装到默认路径下 想要指定位置安装 则需在make install加入 make PRE

  • golang-bufio 缓冲写

    1 缓冲写 在阅读这篇博客之前 请先阅读上一篇 golang bufio 缓冲读 buffered output Writer implements buffering for an io Writer object If an error

  • Go语言的中“...”省略号总结

    1 数组中的 省略号 在数组的定义中 如果在数组长度的位置出现 省略号 则表示数组的长度是根据初始化值的个数来计算 因此 q int 1 2 3 等同于var q 3 int 3 int 1 2 3 按我目前获得的信息来看 q int 1

  • 静态链表系列操作

    静态链表 include

  • Qt调用外部程序

    一 调用系统默认应用打开文件 使用QDesktopServices的openUrl 成员 这个函数是跨平台的 Qt会根据不同的系统平台调用默认的程序打开指定文件 QUrl存放制定的路径 使用非常简便 示例代码如下 QString fileN

  • Linux系统查看磁盘空间占用情况的几个常用命令

    Linux系统下 需要使用命令查看磁盘空间占用情况 下面将这些常用命令进行整理 以作备忘 一 查看磁盘物理分区信息 使用如下命令查看磁盘分区信息 cat proc partitions 二 查看磁盘分区占用情况 使用如下命令查看磁盘分区占用

  • 代码检查与代码走查

    代码检查与代码走查是基于人工测试的白盒测试方法 目的 找出错误 而不是改正错误 是测试而不是调试 优点 能够精确地定位的错误 降低调试成本 可以成批的发现错误 而计算机测试往往是逐个发现错误并改正 注意 代码检查 代码走查 基于计算机的测试

  • 算法工程师福利：超实用技术路线图

    对于不同级别的算法工程师技能要求 我们大致可以分成以下几个层级 初级 可以在一些指导和协助下独立完成开发任务 具体到算法方面 需要你对于工具框架 建模技术 业务特性等方面有一定的了解 可以独立实现一些算法项目上的需求 中级 可以基本独立完成

  • USB+HOST+FATFS

    转载https blog csdn net zcshoucsdn article details 78944536

  • Mysql 5.6 双主配置 自动同步脚本

    最近有项目应用到了 mysql 双主结构 现在贴出来共享 mysql 版本 5 6 11 操作系统版本 rhel 6 2 Master 的 my cnf 配置 只贴M M 结构部分 log bin fabian server id 1 bi

  • 【Deep Learning】Hinton. Reducing the Dimensionality of Data with Neural Networks Reading Note

    2006年 机器学习泰斗 多伦多大学计算机系教授Geoffery Hinton在Science发表文章 提出基于深度信念网络 Deep Belief Networks DBN 可使用非监督的逐层贪心训练算法 为训练深度神经网络带来了希望 如

  • Houdini中全景摄像机shader立体左右眼成像方法

    熟悉Houdini Shader部分的同学应该多多少少也了解camera自身也可以设定自己的shader 其中polar panoramic shader 能够非常方便的为艺术家渲染360全景视角的cg画面 但是这样渲染出来的画面只是单眼所

  • md5加密

    crypto模块 crypto模块 封装了一系列密码学相关的功能 下载该模块 npm install save crypto 使用 crypto createHash md5 update 加密数据 digest hex 示例

  • 线程的状态与切换

    Java中的线程的生命周期大体可分为5种状态 1 新建 初始化 NEW 新创建了一个线程对象 2 可运行 RUNNABLE 线程对象创建后 其他线程 比如main线程 调用了该对象的start 方法 该状态的线程位于可运行线程池中 等待被线

  • react入门，适合新手小白！

    1 1官方网站 中文官网 React 官方中文文档 用于构建用户界面的 JavaScript 库 2 react简介 1 2 1 React是什么 主要是帮助咱们操作界面 也就是操作视图呈现页面 1 2 2 为什么要学React 易于学习

热门标签