React学习之旅（一）

最新推荐文章于 2024-09-12 17:09:29 发布

格鸰爱童话

最新推荐文章于 2024-09-12 17:09:29 发布

阅读量378

点赞数 6

分类专栏： react 文章标签： react.js 学习前端

本文链接：https://blog.csdn.net/weixin_44253133/article/details/136329053

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

`为什么选择react`

很简单，因为大厂都在用它

什么是react

封装DOM，构建网页

特点：虚拟DOM、声明式、基于组件、支持服务器端渲染、快速

首先需要介绍下使用react时候涉及到的几个库

react.development.js 是react的核心库
react-dom.development.js 是react的dom包
https://unpkg.com/@babel/standalone@7.23.10/babel.min.js 使用jsx时候需要引入

原先javascript操作DOM写法，需要一步步去操作

<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js">
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">

<script>
    // 原先写法
     const div = document.createElement('div')
     // 设置div文本内容
     div.innerText = 'hello gy'
     const root = document.getElementById('root')
     // 渲染
     root.appendChild(div)
</script>

使用react的写法，封装了那些步骤，简化了操作

<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js">
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">

<script>
    
    // react写法 第一个参数表示标签名 第二个参数表示属性id class这些  第三个参数表示内容
    const div = React.createElement('div', {}, 'hello')
    // console.log(div)
    const root = ReactDOM.createRoot(document.getElementById('root'))
    // // 将div渲染到root里
    root.render(div)
</script>

此时完成了react的第一个demo

这时候运行该js如果出现报错

在这里插入图片描述

这是因为引入js的顺序的问题需要先引入react ，而后react-dom

再次运行，如果有提示 createRoot is not a function
在这里插入图片描述
原因react-dom.development.js该文件没有导入成功

解决：

在当前项目下使用npm添加react

在这里插入图片描述
然后使用script导入

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

即可正常运行

JSX使用

jsx: React.createElement()语法糖

需要通过npm来导入
在当前项目下使用npm init -y 初始化项目,就会生成package.json文件
然后安装babel -cli

npm install --save-dev babel-cli

完成安装之后，使用的时候导入babel，同时也需要导入react，并且<script>标签需要添加"text/babel"

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

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

编写demo

<!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>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>

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

<body>
    <div id="root"></div>

</body>

<script type="text/babel">
    const btn = <button>我是按钮</button>
    const root = ReactDOM.createRoot(document.getElementById('root'))
    root.render(btn)
</script>

</html>

在这里插入图片描述
注意事项

使用的时候不要加引号，即 <button>我是按钮</button>这句话并不是一个字符串，并且html标签需要小写
JSX里有且只有一个根标签，不能多个标签并排
在JSX中可以使用{} 嵌入表达式

const name = 'gy'
    const div = <div>
        {name}
    </div>

如果表达式是的值是Null，undefined，布尔值，这些值将不会显示
JSX中的标签需要正常结束
JSX 中属性可以直接在标签中设置，事件也是小驼峰命名 class需要使用className代替

    const btn = <button className='btn' onClick={() => alert('hi')}> click</button>

style中必须使用对象设置并且使用小驼峰命名不是-

const btn = <button className='btn'
        onClick={() => alert('hi')}
        style={{ backgroundColor: "red" , border: "10px solid "}}> click
</button>

以上即完成了第一个react demo和JSX的使用^ _ ^