React18从入门到实战

这篇具有很好参考价值的文章主要介绍了React18从入门到实战。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。



一、React环境的搭建

创建react项目的更多方式

使用npx react-create-app react-basic项目名称创建

react18,react知识点总结,arcgis

启动项目

 npm start

打包项目

 npm run build

启动测试运行项目

npm test

将项目中隐藏的webpack配置释放出

npm run eject

二、项目文件的介绍

(1)package.json,他是项目存放依赖包的地方,里面包括了一些项目核心包及下载的其他插件包

 "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

以上就是package文件中存放项目核心包的地方

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

这个地方是项目中可执行的一些命令

(2)src文件夹是项目源码目录,平时开发页面就在其中

将其中除去index.js和app.js的文件全部删掉并分别进入index和app将其中的引用代码清除,保留一个干净的目录开始练习

index.js文件是整个项目的入口,运行的起点

index.js删除后
//react必要的俩个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';

//导入项目的根组件
import App from './App';

//把app根组件渲染到id为root的节点上(节点在public的index.html中)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

app.js文件是整个项目的根组件

app.js删除后
//app->index.js->public/index.htnl(root)路径
function App() {
  return (
    <div className="App">
          this is app
    </div>
  );
}

export default App;

(3).public文件

favicon.ico

public文件里面通常放着一些静态资源。例如.ico结尾的文件即为我们项目运行成功后,在浏览器页签中所展示的icon图标,但是我们不能将其替换为png或者jpg格式的文件,如果想替换的话就必须替换为ico格式的文件。

index.html

项目的入口文件,引用了第三方类库啊,还可以引入cdn,或者样式,但是其中的div id=“root”>是项目的总容器,所有的内容存储在这个容器中。这个容器有且只能有一个。且在项目的其他地方我们不建议往这个容器中加入我们待渲染的组件和页面,因为在root中我们添加的是APP,如果我们再添加其他元素进去,会将我们添加的APP顶掉

manifest.json

该文件是一个套壳的配置文件,当我们的项目需要在手机端运行时,就需要在这个文件里面进行配置。通过安卓和苹果的应用程序都需要使用专门的开发语言进行开发,因此如果我们想使用html来进行简单的移动端页面的开发,就需要进行套壳。这种就在这里不进行过多的讲解。

Robots.txt

该文件是屏蔽文件,主要是为了防止爬虫来进行页面数据的爬去,可以参考如下网站的简介 https://blog.csdn.net/weixin_30955341/article/details/94896204

(4)node_modules

该目录下所对应的文件时我们所安装的包文件

三. JSX

什么是JSX

JSX是js和xml(html)的缩写1,表示在js代码中能便编写html模板结构,它是react中编写ui模板的方式

react18,react知识点总结,arcgis

本质并不是标准的js语法,它是js语法的扩展,浏览器本身不能直接识别,需要通过解析工具(babel)解析后才能在浏览器运行

react18,react知识点总结,arcgis

jsx优点:

1.html的声明式模板写法
2.js的可编程能力

JSX中使用js表达式

通过大括号语法{}识别js中的表达式,比如常见的变量,函数调用,方法调用等

1. 使用引号传递字符串
2. 使用js变量
3. 函数调用和方法调用
4. 使用js对象
react18,react知识点总结,arcgis

const count  = 100
function getName (){
  return 'zhang'
}
function App() {
  return (
    <div className="App">
          this is app
          {/* {使用引号传递字符串} */}
          {'this is message'}
          {/* 识别js变量 */}
          {count}
          {/* 函数调用和方法调用 */}
          {getName()}
          {new Date().getDate()}
          {/* 使用js对象 */}
          <div style={{color:'red'}}>red div</div>
          
    </div>
  );
}
export default App;

JSX实现列表渲染

react18,react知识点总结,arcgis

const list = [
  {id:0,name:"vue"},
  {id:1,name:"react"},
  {id:2,name:"微信小程序"}
]
function App() {
  return (
    <div className="App">
         <ul>
          {list.map(item=><li key={item.id}>{item.name}</li>)}
         </ul>
    </div>
  );
}

export default App;

JSX实现条件渲染

逻辑运算符&&(只需要根据变量判断是否显示隐藏)

const flag = true
function App() {
  return (
    <div className="App">
         {flag&&<span>flag为true就显示flase不显示</span>}
    </div>
  );
}

export default App;

三元表达式(可以根据变量来显示true的模板内容还是false的模板内容)

const flag = false
function App() {
  return (
    <div className="App">
         {flag?<span>loading...</span>:<span>no loading</span>}
    </div>
  );
}

export default App;

if else if else(可以根据多种情况来判断显示模板内容)

// 定义文章类型
const articleType = 2
function getArticleType(){
  if(articleType===0){
    return <div>我是无图文章</div>
  }else if(articleType===1){
    return <div>我是单图文章</div>
  }else if(articleType===2){
    return <div>我是双图文章</div>
  }else{
    return <div>我是三图或者更多图的文章</div>
  }
}
function App() {
  return (
    <div className="App">
      {/* 通过调用函数来渲染不同模板 */}
      {getArticleType()}
    </div>
  );
}

export default App;

react18,react知识点总结,arcgis

四. 事件绑定

基础绑定


function App() {
  function handClick(){
    alert('我被点击了')
  }
  return (
    <div className="App">
      <button onClick={handClick}>点我</button>
    </div>
  );
}

export default App;

react18,react知识点总结,arcgis

获取事件对象参数

默认事件参数


function App() {
  const handClick=(e)=>{
    console.log('我被点击了',e)
  }
  return (
    <div className="App">
      <button onClick={handClick}>点我</button>
    </div>
  );
}

export default App;

自定义参数传递

语法:事件绑定的位置改成箭头函数的写法,在执行click函数实际处理业务函数时候传递实参

react18,react知识点总结,arcgis

function App() {
  const handClick=(name)=>{
    console.log('我被点击了',name)
  }
  return (
    <div className="App">
      <button onClick={()=>handClick('掌门')}>点我</button>
    </div>
  );
}

export default App;

五. React的组件

组件是什么

一个组件就是用户界面的一部分,他有自己的逻辑和外观,组件之间可以相互嵌套也可以复用多次

React组件

在react中,一个组件就是首字母大写的函数,内部存放了组建的逻辑和视图,渲染组件只需要将组件当成一个标签书写即可

react18,react知识点总结,arcgis


const Button=()=>{
  //业务组件逻辑
  return <button>click mo</button>
}
function App() {
  
  return (
    <div className="App">
    {/* 自闭合 */}
    <Button/>
    {/* 成对标签 */}
    <Button></Button>
    </div>
  );
}

export default App;

六. useState

基础使用

useState是一个react hook函数,它允许我们向一个组件添加一个状态变量,从而控制组件的渲染效果

const [count setCount] = useState(0)

1. useState是一个函数返回值是一个数组

2. 数组中第一个参数是状态变量,第二个参数是set用来修改状态变量

3. useState的参数做为count的初始值

自增器小例子:


// 实现一个计数器点击自增
import {useState} from 'react'
function App() {
  // 1.调用useState添加一个状态变量
  //count 状态变量
  // setCount修改状态变量的方法
  const [count,setCount]=useState(0)
  // 2.点击事件回调
  const handleClick=()=>{
    //作用:
    // 1.用传入的新值修改count
    // 2.重新使用新的count渲染视图
    setCount(count+1)
  }
  return (
    <div className="App">
        <button onClick={handleClick}>{count}</button>
    </div>
  );
}

export default App;

useState的特点

在react中,状态被认为是只读的,我们应该替换他而不是修改它,直接修改状态不能引起视图更新

修改变量状态

let [count,setCount] = useState(0)
const handleClick=()=>{
	//直接修改无法引起视图更新
	count++
	console.log(count
}
const handleClick=()=>{
//作用:
    // 1.用传入的新值修改count
    // 2.重新使用新的count渲染视图
    setCount(count+1)
 }

修改对象状态

对于对象类型的状态变量,应该始终传给set方法一个全新的对象进行修改


import {useState} from 'react'
function App() {
  // 1.调用useState添加一个状态变量
  //count 状态变量
  // setCount修改状态变量的方法
  const [form,setForm]=useState({name:"张"})
  // 2.点击事件回调
  const changeForm=()=>{
    //作用:
    // 1.用传入的新值修改count
    // 2.重新使用新的count渲染视图
    setForm({
      ...form,
      name:"赵"
    })
  }
  return (
    <div className="App">
        <button onClick={changeForm}>修改formm{form.name}</button>
    </div>
  );
}

export default App;

react组件样式

命名类名方式需要使用className

import './index.css'
<div className="top"></div>

index.css中
.top{
	width:100px;
	height:100px;
	background:red;
}

行内方式

直接写版本

<div style="width100px;height:100px;">111</div>

简洁版本文章来源地址https://www.toymoban.com/news/detail-848197.html

const style={
	width:"100px",
	height:"100px"
}

<div style={style}>111</div>

B站评论案例

到了这里,关于React18从入门到实战的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 飞天使-k8s知识点18-kubernetes实操3-pod的生命周期

    探针的生命周期 docker 创建:在创建阶段,你需要选择一个镜像来运行你的应用。这个镜像可以是公开的,如 Docker Hub 上的镜像,也可以是你自己创建的自定义镜像。创建自己的镜像通常需要编写一个 Dockerfile,这个文件定义了创建镜像所需的所有步骤,包括基础镜像、需要安

    2024年02月20日
    浏览(60)
  • Vue入门——核心知识点

    Vue是一套用于 构建用户界面 的 渐进式 JS框架。 构建用户界面:就是将后端返回来的数据以不同的形式(例如:列表、按钮等)显示在界面上。 渐进式:就是可以按需加载各种库。简单的应用只需要一个核心库即可,复杂的应用可以按照需求引入各种Vue插件。 采用组件化模式

    2024年02月06日
    浏览(54)
  • Python基础知识点入门

    初学Python时,以下是一些基础知识点和示例,以帮助你建立坚实的编程基础。 1. 变量和数据类型 Python中的变量用于存储数据。以下是一些常见的数据类型和示例: 整数(int) 浮点数(float) 字符串(str) 布尔值(bool) 2. 列表(List) 列表是一种有序的数据结构,可以存储

    2024年02月07日
    浏览(47)
  • Spring入门系列:浅析知识点

    讲解Spring之前,我们首先梳理下Spring有哪些知识点可以进行入手源码分析,比如: Spring IOC依赖注入 Spring AOP切面编程 Spring Bean的声明周期底层原理 Spring 初始化底层原理 Spring Transaction事务底层原理 通过这些知识点,后续我们慢慢在深入Spring的使用及原理剖析,为了更好地理

    2023年04月10日
    浏览(41)
  • 《Windows核心编程》若干知识点实战应用分享

    目录 1、进程的虚拟内存分区与小于0x10000的小地址内存区 1.1、进程的虚拟内存分区 1.2、小于0x10000的小地址内存区 2、保存线程上下文的CONTEXT结构体 3、从汇编代码角度去理解多线程运行过程的典型实例 4、调用TerminateThread强制结束线程会导致线程中的资源没有释放的问题 5、

    2024年01月25日
    浏览(46)
  • 《Windows核心编程》若干知识点应用实战分享

    目录 1、进程的虚拟内存分区与小于0x10000的小地址内存区 1.1、进程的虚拟内存分区 1.2、小于0x10000的小地址内存区 2、保存线程上下文的CONTEXT结构体 3、从汇编代码角度去理解多线程运行过程的典型实例 4、调用TerminateThread强制结束线程会导致线程中的资源没有释放的问题 5、

    2024年01月22日
    浏览(48)
  • React18入门(第二篇)——React18+Ts项目配置husky、eslint、pretttier、commitLint

    我的项目版本如下: React: V18.2.0 Node.js: V16.14.0 TypeScript:最新版 工具: VsCode 本文将采用图文详解的方式,手把手带你快速完成在React项目中配置husky、prettier、commitLint,实现编码规范的统一,git提交规范的统一。 1.1 装包 1.2 ESLint 插件安装 1.3 创建命令并使用 新增命令 执行

    2024年02月08日
    浏览(56)
  • MySQL知识点极速入门

    创建数据库: 创建一个名为emptest的数据库 创建数据表: 设计一张员工信息表,要求如下: 1. 编号(纯数字) 2. 员工工号 (字符串类型,长度不超过10位) 3. 员工姓名(字符串类型,长度不超过10位) 4. 性别(男/女,存储一个汉字) 5. 年龄(正常人年龄,不可能存储负数)

    2024年03月14日
    浏览(49)
  • 单片机----汇编语言入门知识点

    目录 汇编语句的格式 汇编语句的两个基本语句 子程序的调用 查表程序设计 1.x和y均为单字节数的查表程序设计 2.x为单字节数y为双字节数的查表程序设计 3.x和y均为双字节数的查表程序设计 分支转移程序设计 1.单分支选择结构 2.多分支选择结构 循环程序设计 (1) 计数循环控

    2024年04月28日
    浏览(48)
  • zookeeper入门,这些知识点你会吗

    8.Zookeeper集群管理 所谓集群管理无在乎两点:是否有机器退出和加入、选举master。 对于第一点,所有机器约定在父目录GroupMembers下创建临时目录节点,然后监听父目录节点的子节点变化消息。一旦有机器挂掉,该机器与 zookeeper的连接断开,其所创建的临时目录节点被删除,

    2024年04月12日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包