初始react和使用——事件处理、样式处理和组件

最新推荐文章于 2025-04-19 16:33:14 发布

yoghurt&girl

最新推荐文章于 2025-04-19 16:33:14 发布

阅读量556

点赞数

分类专栏： react web前端开发文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/ywforever/article/details/129044985

版权

一、react官网

1、官网下载

官网分别有中英文两种：

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

英文官网：https://reactjs.org/

2、react简介

react是用于构建用户界面的JavaScript库，起源于Facebook的内部项目

由于react的设计思想十分独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用它，认为它可能是将来web开发的主流工具。

react的好处：

声明式设计: React使创建交互式UI变得轻而易举。为你应用的每一个状态
设计简洁的视图,当数据变动时React能高效更新并渲染合适的组件
组件化:构建管理自身状态的封装组件,然后对其组合以构成夏杂的UI。
高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
灵活:无论你现在使用什么技术栈，在无需重写现有代码的前提下,通过引React来开发新功能。

注：在学习react之间我们所需要掌握的js知识有：es6语法、this发的指向、面向对象【原型、原型链、class类、继承】、模块化、柯里化函数等一些基础的js

3、需使用的JavaScript库

使用方法：

第一种：使用npm安装库

方法二：直接进行引入链接即可

需要值得注意的是建议是用18版本以前的版本，因为18以后的版本语法有一定变化。

二、使用react

1、创建对象

创建虚拟DOM对象，并进行渲染。

<!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>
</head>
<body>
    <!-- 根标签 -->
    <div id="app"></div>

<!-- 引入的顺序不能乱 -1-引入react的核心库-->
    <script src="./js/react.development.js"></script>
    <!-- 引用react-dom，用于支持react操作DOM -->
    <script src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx语法转换成js语法 -->
    <!-- <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> -->
  <!-- <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> -->
    <script src="./js/babel.min.js"></script>

    <script type="text/babel"> 
        /*
        vue：在html标签面写js
        react:大部分在js中写标签
        */

        // 第一个react
        console.log(ReactDOM);
        // 参数一：标签内容
        const VDOM=<div>
            <h1>HELLO WORLD</h1>
            <h2>HELLO WORLD</h2>
            </div>
        // 参数二：
        // ReactDOM.render(
        //     VDOM,
        //         document.getElementById('app')
            
        // );
        // react中是需要把单标签进行闭合，不然会出现报错
        ReactDOM.render(
            <div>
                {/* 单行注释的写法*/}
                {
                    // 
                }
                <h1>2333</h1>
                <h2>test333</h2>
                <