React 18.2.0入门教程（一）

__illusion

已于 2023-03-03 20:51:41 修改

阅读量611

点赞数 2

分类专栏： React技术栈文章标签： javascript 前端 react react.js Powered by 金山文档

于 2023-03-01 22:21:22 首次发布

本文链接：https://blog.csdn.net/Advanced_C/article/details/129228937

版权

React技术栈专栏收录该内容

4 篇文章 1 订阅

订阅专栏

因为各种原因，需要使用react框架来写一些项目，因此，把自己自学的过程记录下来，也算是一个督促吧，同时，也希望能帮到需要学习和使用react的朋友

文中的所有代码都是经过调试能成功运行的，如有需要可拷贝到编辑器内运行查看，csdn的缩进可能有点乱，如果影响查看的话也可拷贝到编辑器内格式化

在网页中添加并使用react

可通过在线链接将react脚本文件直接引入到HTML文档中，这部分和引入jQuery的方式一样，将其作为静态脚本文件使用，而自身的脚本文件则需要放置到body标签后

注：这里的script脚本携带了一个属性：crossorigin，这是因为浏览器出于安全考虑，会主动隐藏其他域下js抛出的具体错误信息，而统一返回 "Script Error" 错误报告

由于这种情况不利于我们调试代码，所以可以在跨域的脚本文件内添加 crossorign属性来解决这个问题

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></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>React</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</head>
<body>
    <div id="like_button_container"></div>
</body>
<script>
    //  逻辑脚本
</script>
</html>

创建一个 React 组件

react有两种组件创建方式：函数式组件和类式组件，在使用上的区别为

函数式组件通过首字母大写来声明一个react组件，类式组件则是通过继承React.Component

函数式组件没有生命周期函数，后期可使用hooks模拟

函数式组件没有state状态，后期可用useState模拟

函数式组件可以直接返回要组件的内容，类式组件则需要调用内部render方法返回组件内容

函数式组件

函数式组件在声明时需要首字母大写，可以看作成js里的构造函数，并在最后返回组件内容

注：由于这里没有使用到jsx或使用react方式创建元素，因此，函数式组件首字母也可小写

function Container() {
        return '123';
    }
    // 需要使用传统js方式找到挂载点
    const domContainer = document.querySelector('#container');
    // React18采用了新的渲染方式，以前的不推荐使用了
    const root = ReactDOM.createRoot(domContainer);
    /* 
        这里的逻辑是: 通过js找到需要挂载的dom节点
        然后将这个dom节点转换成支持react操作的react节点
        最后通过转换好的节点的内置函数render渲染组件
    */
    root.render(Container());

类式组件

类式组件需要自定义一个类，通过继承React.Component初始化类式组件，并在内部通过render函数返回组件内容

class container extends React.Component {
            render() {
                return '123'
            }
        }

        const domContainer = document.querySelector('#container');
        const root = ReactDOM.createRoot(domContainer);
        root.render((new container).render());

分析

虽然实现了相关效果，但是，如果只能渲染数字或字符串，那意义不是很大。因此，我们需要引出react的另一个API，React.createElement也就是使用react的创建dom元素的方法。经由react创建的dom才能使用react的内置方法，这个机制和jQuery是差不多的

规整

通过使用React内置的createElement API可以实现创建一个react元素，如此则可以使用render函数渲染。但是，这样也存在一个弊端：当一个元素的嵌套层级比较复杂，属性较多的情况下，使用这种创建方式未免有点太麻烦了，因为往往需要在该API的第三个参数内继续调用React.createElement

因此，react便推出了一种更为简便的创建react 元素的方式：JSX

function Container() {
            const child1 = child2 = React.createElement('p', null, 'test');
            // 由于该API的最后一个参数是rest参数形式，因此也可去除中括号
            return React.createElement('div', {id: 'reactDom'}, [child1, child2]);
        }

        const domContainer = document.querySelector('#container');
        const root = ReactDOM.createRoot(domContainer);
        root.render(Container());

使用JSX创建元素支持我们在script标签里面写HTML标签，极大方便了我们对于创建一个复杂的react元素。就像是去掉了``符号的模板字符串，如果你使用过模板字符串的话，那想必会很容易上手JSX

因为react不支持直接识别JSX语法，因此在正式使用JSX之前，我们需要引入下面提供的jsx处理脚本

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

同时，在我们自己的脚本内，需要添加一个属性：type="text/babel"，这个属性表示这个脚本会被babel转换成浏览器可识别的js语法，包括JSX语法。以下为更改后的脚本代码

<script type="text/babel">
        function Container() {
            return <div>JSX内容</div>
        }

        const domContainer = document.querySelector('#container');
        const root = ReactDOM.createRoot(domContainer);
        root.render(<Container />);
    </script>

注：如果使用了JSX语法的话，在root.render函数内的函数式组件首字母必须大写，因为react对于非大写的标签是会识别成HTML标签的，因此通常会抱错为未识别的标签，而首字母大写的标签则会被识别为react组件，这样render方法就可以顺利执行了

扩展

由于这样直接引入JSX解析文件的话可能会使你的网站变慢，并且不适用于生产环境，因此react建议如果在不使用构建工具（脚手架）的情况下，可以使用JSX 预处理器来自动转换所有 <script> 标签的内容

将 JSX 添加到项目

通过使用nmp命令可以将下载并安装JSX预处理器，将 JSX 添加到项目中并不需要诸如打包工具或开发服务器那样复杂的工具。本质上，添加 JSX 就像添加 CSS 预处理器一样。唯一的要求是你在计算机上安装了 Node.js

在终端上跳转到你的项目文件夹，然后粘贴这两个命令：

步骤 1：执行 npm init -y （如果失败，这是修复办法）

步骤 2：执行 npm install babel-cli@6 babel-preset-react-app@3

运行 JSX 预处理器

创建一个名为 src 的文件夹并执行下面这个终端命令

npx babel --watch src --out-dir . --presets react-app/prod

注意：
npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具
如果你看到一个错误消息显示为：“You have mistakenly installed the babel package”，你可能错过了上一步（指安装步骤可能失败）。重复之前的步骤再试一次即可

总结

因为文章过长想必大家也不愿意看下去，所以关于脚手架的教程就留到第二篇教程再详细介绍吧。希望对react有兴趣的朋友能够持续关注我，我会继续推出尽可能容易让人理解和实践的教程文章

那么，期待与各位的下次相遇！

__illusion

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 18.2.0入门教程（一）

关于react基本使用方法的入门教程，本篇文章讲述了如何引入react脚本文件，使用JSX和不使用JSX的区别以及它们的优缺点
复制链接

扫一扫

专栏目录