react学习笔记——1. hello react

这篇具有很好参考价值的文章主要介绍了react学习笔记——1. hello react。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

包含的包一共有4个,分别的作用如下:

  • babel.min.js:可以进行ES6到ES5的语法转换;可以用于import;可以用于将jsx转换为js。注意,在开发的时候,这个转换(jsx转换js)不在线上使用,因为转换需要时间,页面可能会出现白屏。
  • react.development.js:react的核心代码库,引入以后,全局多了一个React对象
  • react-dom.development.js:react操作dom的扩展库,引入以后,全局多了一个ReactDOM对象
    • 注意:react-dom.development.js必须要在react.development.js之后引入。
  • 还有一个是prop-types.js:这个包在7. 组件实例三大属性-props中才会用到,是用于对标签属性添加限制的,是react16版本以后才需要单独引入的。引入以后全局多了一个Prop-Types对象。

引入包以后简单的写一些代码,则会出现一下几个问题
react学习笔记——1. hello react,react,react文章来源地址https://www.toymoban.com/news/detail-626506.html

  • 第一个是因为没有下载react的开发者工具
  • 第二个是确保不要在线上使用babel,因为jsx->js耗时,可能会产生白屏之类的。使用脚手架之后,这个问题就没了。
  • 最后一个是页面的偏爱图标,页面刷新以后,最后一个错误会消失,因为他找不到偏爱图标就不找了。这里可以将任意一个图标放在根目录下,即可作为偏爱图标,但是要求名字必须为"favicon.ico"。放在根目录以后,页面强制刷新(shift+F5)一下即可。
<!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>hello react</title>
</head>

<body>
    <!-- 准备一个“容器” -->
    <div id="test"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel,但是线上的时候,不这样用,因为这个转换需要时间,页面会产生白屏 -->
    <script src="../js/babel.min.js"></script>
    <!-- 注意,这里面写的是jsx的语法,所以这里type需要是babel。上面不写,默认就是text/javascript -->
    <script type="text/babel">
        /**
         * 步骤:
         *      1、创建虚拟dom
         *      2、渲染虚拟dom到页面
        */
        // 1、创建虚拟dom,注意这里不需要引号,因为这里的代码是jsx
        let VDOM = <h1>hello,react!</h1>
        // 2、渲染虚拟dom,使用render方法,此方法有两个参数,一个是虚拟dom,第二个是容器,并且此方法是一个追加的过程
        ReactDOM.render(VDOM, document.getElementById("test"))
        /**
         * 注意,只有这里需要document,因为react不需要自己操作dom,这里只是一个demo
        */
    </script>
</body>

</html>

到了这里,关于react学习笔记——1. hello react的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity可视化编程Visual Scripting学习笔记2:说你好(hello world)

    1.在Project面板新建Script Graph 2.给物体挂上该Graph 3.在Graph面板添加On Start事件节点(相当于脚本中的Start生命周期) 从Start绿色箭头出拉出,并创建print方法节点 可以看到print方法节点需要一个Message参数 从print方法节点的Message圆点拉出并选择String     在String数据节点中输入数

    2024年02月13日
    浏览(47)
  • Linux shell编程学习笔记14:编写和运行第一个shell脚本hello world!

     * 20231020 写这篇博文断断续续花了好几天,为了说明不同shell在执行同一脚本文件时的差别,我分别在csdn提供线上Linux环境 (使用的shell是zsh)和自己的电脑上(使用的shell是bash)做测试。功夫不负有心人,在其中一些实例中可以体现出zsh和bash的对脚本文件支持的差别,收

    2024年02月07日
    浏览(54)
  • hello react

    react中文官网 React 是一个由 Facebook 开源的 JavaScript 库,用于构建用户界面。它基于组件化的思想,将界面拆分成多个独立的、可复用的组件,并通过组件之间的交互构建整个用户界面。 React 使用 虚拟DOM ( Virtual DOM )来实现高效的页面更新,通过比对更新前后的虚拟 DOM 树的

    2024年02月08日
    浏览(35)
  • React 学习之 Hello World

    React是一个用于构建用户界面的JavaScript库,由Facebook开发并维护。React通过声明式的方式来构建UI,使得代码更易于理解和测试。React的核心概念包括组件(Component)和虚拟DOM(Virtual DOM)。 组件:在React中,UI被构建为组件的集合。组件是封装了HTML、CSS和JavaScript代码的可重用

    2024年04月08日
    浏览(65)
  • React初体验-Hello React的组件化方式-React入门小案例

    接下来我们通过Hello React的案例, 来体验一下React开发模式, 以及jsx的语法 Hello React案例演练 第一步: 先引入React开发依赖 第二步: 这里我们编写React的script代码中,必须添加 type=\\\"text/babel\\\" ,作用是可以让babel解析jsx的语法 第三步: 创建元素渲染到页面 React18之前的做法: 通过 R

    2023年04月08日
    浏览(61)
  • 02_Hello_React案例

    2024年02月17日
    浏览(34)
  • 03_Hello_React重构

    2024年02月16日
    浏览(27)
  • 创建React Native的第一个hello world工程

    需要安装好node、npm环境 如果之前没有安装过 react-native-cli 脚手架的,可以按照下述步骤直接安装。如果已经安装过的,但是在使用这个脚手架初始化工程的时候遇到下述报错的话 也可以先直接卸载 正常安装过程: 安装 react-native-cli 安装 react-native 安装完成之后,可以用脚手

    2024年02月07日
    浏览(46)
  • 【React Router】React Router学习笔记

    React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。 React Router 知道如何为我们搭建嵌套的 UI,因此我们不用手动找出需要渲染哪些 Child 组件。 获取URL参数。当渲染组件时,React Router 会自动向 Route 组件

    2024年02月08日
    浏览(33)
  • React学习笔记01-React的基本认识

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决 定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源 了。 轻量级的视图层库!A JavaScript library for building user interfaces React不是一个完整的

    2024年02月08日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包