React 知识点（一）

最新推荐文章于 2024-08-19 11:30:24 发布
最新推荐文章于 2024-08-19 11:30:24 发布
阅读量1k 收藏 26
点赞数 13
分类专栏： React 文章标签： react.js javascript 前端 es6 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56144469/article/details/140709086
版权

文章目录

前言

React ：官方地址

一、React 脚手架

方法一：

  • 全局安装：npm i create-react-app -g
  • 创建项目：create-react-app project-react

★ 方法二：不需要安装直接复制命令执行（每次使用的时候都是最新的脚手架创建项目）

使用npx安装：npx create-react-app project-react

二、React 使用

  1. 导入react react-dom

    react：规定了 react 的核心语法
    react-dom：规定了 react 如何进行 DOM 操作

    在index.js中：（在vue中相当于main.js文件）

    // 创建react元素
import React from "react";
// 把react元素渲染到页面
import ReactDom from "react-dom";

  2. 使用react 创建 react 元素

    // 例：<h1 id="el">React! </h1>
// React.createElement(标签名,{标签的属性对象},子级元素)
const h1 = React.createElement('h1',{ id:'el' },'你好,React!')

    !](https://i-blog.csdnimg.cn/direct/b4a72c562a7b419090200d2e57119f4d.png)
    在这里插入图片描述

  3. 使用react-dom 渲染 react元素

    // #root 在public/index.html上
// ReactDoM.render(react元素,挂载的节点,回调函数)
ReactDom.render(element,document.getElementById('root'));

    在这里插入图片描述
    在这里插入图片描述

  4. 将src内文件删除 创建 src/index.js

三、React 创建元素练习

<div class="list">
    <h1>水果</h1>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>西瓜</li>
    </ul>
</div>

↓↓↓

const h1 = React.createElement('h1',null,'水果')
const li1 = React.createElement('li',null,'苹果')
const li2 = React.createElement('li',null,'香蕉')
const li3 = React.createElement('li',null,'西瓜')
const ul = React.createElement('ul',null,[li1,li2,li3])
const div = React.createElement('div',{ className:'list' },[h1,ul])
ReactDom.render(div,document.getElementById('root'))

↓↓↓

const div = React.createElement('div',{ className:'list' },[
    React.createElement('h1',null,'水果'),
    React.createElement('ul',null,[
        React.createElement('li',null,'苹果'),
        React.createElement('li',null,'香蕉'),
        React.createElement('li',null,'西瓜')
    ])
])

ReactDom.render(div,document.getElementById('root'))

四、JSX 使用

JSX 是 Javascript XML 的简写，表示了在JavaScript 中书写 XML格式的代码。它是 React 的核心内容，它可以让我们在 React中创建元素更加简单，更加直观，提高开发效率。
JSX 是 Javascript 的语法扩展，它无法在浏览中直接使用，在create-react-app 脚手架中内置了 @babel/plugin-transform-react-jsx 插件来解析它，成为 Javascript 的标准语法。

可以使用 Babel 在线测试

在这里插入图片描述
总结：JSX就是JS的扩展语法，可以在JS中书写XML语法，它可以更加简洁、直观、高效的声明UI界面

在vscode 中加上在react 中使用 ement 语法提示创建标签

"emmet.includeLanguages":{
	"javascript": "javascriptreact"
}

在这里插入图片描述

JSX写法:

  1. 导入react-dom
  2. 使用 JSX创建元素
  3. 使用react-dom渲染
import React from "react";
import ReactDom from "react-dom";
// 属性绑定：key={变量}
const div = (<div class="list">
                <h1>水果</h1>
                <ul>
                    <li key={1}>苹果</li>
                    <li key={2}>香蕉</li>
                    <li key={3}>西瓜</li>
                </ul>
            </div>)
            
ReactDom.render(div,document.getElementById('root'))

在这里插入图片描述
注意事项：
1：class 变成 className；label的 for 属性变成 htmlFor；多个单词组成的属性变成驼峰命名
2：标签的嵌套一定要符合规范
3：标签一定要闭合(特别注意单标签,比如:img,hr,br,input)
4：只有一个根标签，要不然就使用 <React.Fragment></React.Fragment> 或者 <></>
5：建议多行用()包裹

五、JSX 嵌入表达式

在这里插入图片描述

六、JSX 条件渲染方式

const loading = true;
{/* 方法一：if/else 条件渲染 */}
const getContent =()=> {
    if (loading) {
        return (<div>数据正在加载中...</div>)
    } else {
        return (<div>数据加载完成</div>)
    }
}
const div = (
    <>
        { getContent() }
        <hr/>
        {/* 方法二：三元表达式 */}
        { loading ? <div>数据正在加载中...</div> : <div>数据加载完成</div>}
        {/* 方法三：逻辑运算符 */}
        <hr/>
        { loading && <div>数据正在加载中...</div>}
        { loading || <div>数据正在加载中...</div>}
    </>
)

ReactDom.render(div,document.getElementById('root'))

七、JSX 列表渲染

在JSX中可以直接渲染数组，但是对象需要转换一下，数组中的每个元素会被当成React元素去渲染
使用 map()函数 渲染数组
在这里插入图片描述

const list = [
    {id:100,name:'tom',age:15 },
    {id:101,name:'jack',age:18 },
    {id:102,name:'tony',age:20},
]
const div = (
    <>
        <ul>
            {/* 布尔值不会直接展示 react不能直接渲染展示对象 */}
            { list.map(item => {
                return (
                    <li key={item.id}>
                        <p>姓名：{item.name}</p>
                        <p>年龄：{item.age}</p>
                        <p>是否成年：{item.age > 18 ? '是' : '否'}</p>
                    </li>
                    )
                })
            }
        </ul>
    </>
)
ReactDom.render(div,document.getElementById('root'))

八、JSX样式-style 操作

方式1：操作style
方式2：操作className
写法：style=“{ { 样式对象 } }”

在这里插入图片描述

九、JSX样式-className 方式

在这里插入图片描述
插件：vscode: ES7 React/Redux/GraphQL/React-Native snippets；idea: React snippets

十、案例

index.js

import React from "react";

import ReactDom from "react-dom";

import './index.css';

const dpl = (
    <div className="comments">
        <h3 className="comm-head">
            热门评论<sub>(5)</sub>
        </h3>
        <ul className="comm-list">
            <li className="comm-item">
                <div className="avatar"></div>
                <div className="info">
                    <p className="name vip">
                        清风徐来
                        <img src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png" />
                    </p>
                    <p className="time"> 2024-7-29 </p>
                    <p>
                        评论内容
                    </p>
                </div>
            </li>
        </ul>
    </div>
)

ReactDom.render(dpl,document.getElementById('root'))

index.css

body {
  margin: 0;
}
.comments {
  background-color: #121212;
  color: #eee;
  padding: 24px;
  width: 100vw;
  margin: 0 auto;
}
.comm-head {
  color: #eee;
  font-size: 24px;
  line-height: 24px;
  margin-bottom: 24px;
}
.comm-head sub {
  font-size: 14px;
  color: #666;
  margin-left: 6px;
  bottom: 0.2em;
  position: relative;
}
.comm-list {
  list-style: none;
  padding: 0;
}
.comm-item {
  display: flex;
  margin-bottom: 24px;
}
.comm-item .avatar {
  width: 48px;
  height: 48px;
  line-height: 48px;
  border-radius: 24px;
  display: inline-block;
  cursor: pointer;
  background-position: 50%;
  background-size: 100%;
  background-color: #eee;
}
.comm-item .info {
  padding-left: 16px;
}
.comm-item .info p {
  margin: 8px 0;
}
.comm-item .info p.name {
  color: #999;
}
.comm-item .info p.vip {
  color: #ebba73;
}
.comm-item .info p.vip img {
  width: 14px;
  vertical-align: baseline;
  margin-left: 5px;
}
.comm-item .info p.time {
  color: #666;
  font-size: 14px;
}

.comm-item .info .del {
  margin-left: 20px;
  cursor: pointer;
}
.comm-item .info .del:hover {
  color: #ccc;
}

.comm-input {
  border-radius: 6px;
  padding: 18px;
  background-color: #25252b;
}
.comm-input textarea {
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: #999;
  width: 100%;
  font-family: inherit;
  height: auto;
  overflow: auto;
}
.comm-input .foot {
  display: flex;
  justify-content: flex-end;
  justify-items: center;
}
.comm-input .foot .word {
  line-height: 36px;
  margin-right: 10px;
  color: #999;
}
.comm-input .foot .btn {
  background-color: #ff008c;
  font-size: 14px;
  color: #fff;
  line-height: 36px;
  text-align: center;
  border-radius: 18px;
  padding: 0 24px;
  cursor: pointer;
  user-select: none;
}

效果
在这里插入图片描述
数据如下：

const comments = [
    {
        id: 100,
        name: '__RichMan',
        avatar: 'https://r1.ykimg.com/051000005BB36AF28B6EE4050F0E3BA6',
        content: '这阵容我喜欢😍靳东&闫妮，就这俩名字，我就知道是良心剧集...锁了🔒',
        time: '2021/10/12 10:10:23',
        vip: true,
    },
    {
        id: 101,
        name: '糖蜜甜筒颖',
        avatar:
            'https://image.9xsecndns.cn/image/uicon/712b2bbec5b58d6066aff202c9402abc3370674052733b.jpg',
        content:
            '突围神仙阵容 人民的名义第三部来了 靳东陈晓闫妮秦岚等众多优秀演员实力派 守护人民的财产 再现国家企业发展历程',
        time: '2021/09/23 15:12:44',
        vip: false,
    },
    {
        id: 102,
        name: '星星',
        avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png',
        content:
            '第一集看的有点费力，投入不了，闫妮不太适合啊，职场的人哪有那么多表情，一点职场的感觉都没有',
        time: '2021/07/01 00:30:51',
        vip: true,
    },
];

转换后

const dpl = (
    <div className="comments">
        <h3 className="comm-head">
            热门评论<sub>({comments.length})</sub>
        </h3>
        <ul className="comm-list">
            { comments.map(item => {
               return (
                    <li className="comm-item" key={item.id}>
                        <div className="avatar" style={ { backgroundImage: `url(${item.avatar})`} }></div>
                        <div className="info">
                            <p className="name vip">
                                {item.name}
                                {item.vip ? <img src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png" /> : ''}
                            </p>
                            <p className="time"> {item.time} </p>
                            <p>
                                {item.content}
                            </p>
                        </div>
                    </li>
                )
            })}
        </ul>
    </div>
)

效果
在这里插入图片描述

措手不及ya
关注
专栏目录
React 超详细入门教程
m0_60970928的博客
03-27 1万+
React 是一个用于构建用户界面的 JavaScript 库，主要用于构建 UI，而不是一个 MVC 框架，但可以使用 React 作为 MVC 架构的 View 层轻易的在已有项目中使用，它是一个用于构建用户界面的 JavaScript 库，起源于 Facebook 的内部项目，用来架设 Instagram 的网站，于 2013 年 5 月开源。React 是用于动态构建用户界面的 JavaScript 库(只关注于视图)。
React教程（详细版）
热门推荐
Ronychen的博客
03-19 20万+
一、简介（背景） 1.1、概念 它是一个将数据渲染为HTML视图 的js库 1.2、原生js痛点 用dom的API去操作dom，繁琐且效率低 用js直接操作dom，浏览器会进行大量的回流和重绘 原生jjs没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能 1.3、React特点 采用组件化模式，声明式编码，提高开发效率和组件复用性 在React Native中可以用react预发进行安卓、io
React 和库教程（一）
最新发布
龙哥盟
08-19 793
React(也称为 ReactJS)是一个 JavaScript 库，由脸书( https://github.com/facebook/react)开发，用于创建 Web 用户界面。React 是由当时在脸书广告公司工作的乔丹·沃克发明的。与 jQuery、Angular、Vue.js、Svelte 等其他前端开发框架和库竞争。在 2017 年 9 月发布的上一版本 React 16.x 中，React 团队增加了更多的工具和开发支持，并消除了 bug。React 17 于 2020 年 10 月发布。
react快速开始(一)-入门基础
西京刀客
10-09 1万+
react快速开始-入门基础 在前端框架框架方面，其中的佼佼者React和AngularJS均出名门公司，具有非凡的影响力和号召力。尤其是React，它定位于前端组件化、高性能和跨平台，它提出的基于虚拟DOM的理念一出现就获得了广泛的关注和认可，也被AngularJS等其他前端框架所引入。
React学习
panfengblog
09-23 368
React学习 最近课好少啊，芜湖起飞~ 1.React元素渲染 1.1 从官方模板开始 值得注意的是，react启动之后，直接修改代码然后ctrl+s，页面会重新reload，非常的人性化~ 我们从零开始，在刚新建好react项目的中可以看到./public/index.html页面可以看到有个<div id="root"></div>的节点，我们的react组件其实都是渲染在这个里面的。 我们看到./src/index.js，其实就是将一个<App />对象渲染到
import React from react作用
qq1498982270的博客
05-13 6512
因为，babel会将jsx代码转换 转换前 import React, { Component } from 'react'; class Process extends Component { render() { return (<div>哈哈哈</div>) } } 转换后 import React, { Component } f...
react知识点汇总.xmind
04-16
react知识点
liujie2019#Blog#React知识点总结1
07-25
2. 使用 PropTypes 进行类型检查 4. dangerouslySetInnerHTML函数 6. 事件处理
react实战项目总结知识点
08-08
"React 实战项目总结知识点" React 是一个功能强大且灵活的前端框架，能够帮助开发者快速构建用户界面。下面是 React 实战项目中的知识点总结： 1. 创建 React 项目 要创建一个 React 项目，首先需要安装 Node ...
React 基础知识点总结
02-21
React 基础知识点总结
react及react生态知识总结
10-18
对react，react全家桶，react native等的知识点进行汇总
React语法及使用
Yang_lan1的博客
05-17 323
1.使用React渲染一个最基本的页面 //1.导入 import React from "react";//创建组件、虚拟DOM元素，生命周期 import ReactDOM from 'react-dom';//把创建好的组件和虚拟DOM放到页面上去展示的 //2.创建虚拟DOM元素 //参数1：创建的元素的类型 //参数2：是一个对象或null,表示当前这个DOM元素的属性 //参数3：子...
前端框架 React 学习总结
qq_50909707的博客
11-17 7525
（1）创建store仓库，reducers分开管理reducers: 数据开发中type字符串应放入一个常量管理default:}}default:}}count,user}//1、引入redux//引入日志//导入reducers//2、创建仓库//合并多个reducer})（2）导入到src/index.js文件,全局配置(3)组件中的使用return (
React 基础学习
m0_70190404的博客
02-03 623
一、React基本使用 二、面向组件编程 三、组件的三大核心属性 state、props、refs与事件处理 四、受控组件、非受控组件 （收集表单数据） 五、高阶函数和函数的柯里化 六、React新旧、生命周期
从0到1无比流畅的React入门教程
tangdou369098655的博客
05-17 2398
用于构建 Web 和原生交互界面的库React 用组件创建用户界面是一个将数据渲染为HTML视图的开源JS库执行顺序->或者->render->
【React】全面解析：从基础知识到高级应用，掌握现代Web开发利器
lph159的博客
07-24 1904
React 是一个用于构建用户界面的 JavaScript 库。与传统的前端开发框架不同，React 采用了组件化的开发模式，将页面拆分为一个个独立的组件，每个组件只负责自身的状态和渲染。通过这种方式，可以显著提高代码的可复用性和可维护性。React 是一个强大的工具，适用于各种规模的 Web 应用开发。通过本文的介绍，我们从基础知识到高级应用，全面解析了 React 的核心概念和使用方法。希望这篇文章能帮助你更好地理解和掌握 React，进而在实际项目中灵活运用这一现代 Web 开发的利器。
React 官方文档学习
belusoi的博客
09-23 1379
React官方文档部分学习笔记
react学习
u013994400的博客
02-28 824
钩子函数只能在函数组件或者自定义钩子函数中自定义钩子：当我们需要将react中钩子函数提取到一个公共区域时，就可以使用钩子函数自定义钩子是一个普通函数，它的名字需要使用use开头 useFun。
react -错误 Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function
qq_43526329的博客
01-05 3274
【代码】react -错误 Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function。
react 知识点常用的
07-14
以下是React中常用的一些知识点： 1. 组件：React将用户界面拆分为可重用的组件，组件是构建React应用的基本单元。组件可以是函数组件或者类组件。 2. JSX：JSX是一种类似于HTML的语法扩展，可以在JavaScript代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值