react入门，适合新手小白！

最新推荐文章于 2025-11-04 17:14:31 发布

原创最新推荐文章于 2025-11-04 17:14:31 发布 · 456 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

本文介绍了React的核心概念，为何选择React，如何通过官网下载并引入库，以及JSX的基本语法。重点讲解了元素渲染和其更新机制，展示了React在构建动态界面方面的优势。

1.1官方网站

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

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>