React基础

最新推荐文章于 2024-03-28 21:18:12 发布
最新推荐文章于 2024-03-28 21:18:12 发布
阅读量452 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48554873/article/details/117885264
版权

React基础

什么是React
React是一个构建用户界面的JavaScript库，主要用来编写HTML页面或构建Web应用

React的特点

  1. 声明式
  2. 组件化
  3. 一次学习，随处编程

React的基本使用
1.安装命令 npm i react react-dom
react 是核心包，提供创建元素和组件能力
react-dom 负责将元素和组件渲染到界面

2.React使用

<body>
<!-- 创建React元素 -->
    <div id="app"></div>
</body>
<!-- 导入react和react-dom两个js文件 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script>
    console.log(React);
    console.log(ReactDOM);
    //渲染React元素到页面中
    // <h1 id="123">子节点</h1>
    // createElement方法
    // 第一个参数 创建元素
    // 第二参数 元素上面有的属性
    // 第三个参数 子节点
    const title = React.createElement("h1",{
        id:"123"
    },"子节点")
    // render 
    // 函数第一个参数是渲染的元素
    // 函数第二参数是挂载点 document.getElementById("app")
    ReactDOM.render(title,document.getElementById("app"));
</script>

注意：react-devlopment.js要在react-dom.development.js之前导入，否则报错

React JSX
JSX是一个JS的扩展，需要通过babel转换成浏览器能执行的js代码，可以在开发React应用时显示更多有用的错误提示和警告信息，提高开发体验

1.解析器的安装
安装命令：npm i babel-standalone
babel-standalone是JSX语法的解析器，通过它可以将JSX转换成浏览器能够执行的代码

<body>
   <div id="app"></div>
</body>
<!-- 1. 将需要的依赖库引入 react react-dom 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="./node_modules/babel-standalone/babel.min.js"></script>
<!-- 2. 给script 脚本添加一个 type="text/babel"-->
<script type="text/babel">
   const H1 = <h1 id="title" className="demo">我是一个大标题<p>内容</p> {new Date().toString()}</h1>;
   ReactDOM.render(H1,document.getElementById("app"));
</script>

注意：JSX多个元素必须使用一个跟元素包裹起来，不然会报错

React脚手架搭建

1.脚手架的意义

  1. 脚手架是开发现代Web的必备工具
  2. 充分利用Webpack、Babel等工具辅助开发
  3. 关注业务，无需关注繁琐的工具配置
  4. Vue中的Vue-cli,React中的create-react-app都是脚手架

2.使用脚手架初始化React项目（create-react-app）

  1. 初始化项目命令：npx create-react-app my-app
  2. 启动项目步骤：1.cd my-app 2.npm run
    start 或者 yarn start 启动项目

3.npx 命令介绍

  1. npm v5.2.0 引入的一条命令
  2. 目的：提升命令行工具的使用体验
  3. 原来：先安装脚手架全局包，再使用它初始化项目
  4. 现在：无需安装脚手架全局包，就可以直接使用它初始化项目

4.组件导出导入并使用

  1. 创建src/MyFirstReact.js
  2. 编写组件代码，创建想要的界面元素
  3. 导出组件
  4. 在src/App.js中导入并使用组件
MyFirstReact.js
//创建
import MyFirstReact from "./MyFirstReact"
function App() {
 return (
   <div className="App">
       App 内容
       <MyFirstReact></MyFirstReact>
   </div>
 );
}
//暴露
export default App;

App.js
import MyFirsReact from './MyFirsReact'
import './App.css'
function App() {
 return (
   <div className="App">
       app内容
       <MyFirsReact></MyFirsReact>

   </div>
 );
}
export default App;

JSX语法
1.JSX语法
JSX是JavaScript XML的简写，表示在JavaScript代码中编写HTML格式代码
优势：声明式语法更加简洁，与HTML结构相同，提高开发效率

  1. 基本用法
    语法：{JavaScript表达式}
    表达式中的数据存储在JS变量中
  2. JSX中使用JavaScript表达式
// jsx 中表达式
function App() {
 const name = "Jack";
 const sayHi = ()=>{
   return "😀"
 }
 let obj = {
   name:"Thomas"
 }
 let arr = ["1",1,<h1 key="1">123</h1>,"🍎","🍌"];
 return (
   <div>
     你好，我叫：{name}
     {/*数字*/}
     <h1>{1}</h1>
     {/*算术表达式*/}
     <h1>{1+1}</h1>
     {/*字符*/}
     <h1>{"(*^_^*)"}</h1>
     {/*调用函数*/}
     <h1>{sayHi()}</h1>
     {/*另外一个jsx*/}
     <h1>{<p>另外一个jsx</p>}</h1>
     {/*三目运算符*/}
     { 1>0?"真":"假"}
     {/*语句 是不允许的*/}
     {/* <h1>{ if(1>0)}</h1> */}
     {/* <h1>{for(let i=0;i<0;i++){}}</h1> */}
     {/*对象 是不允许的 界面报错
     Error: Objects are not valid as a React child (found: object with keys {name}). 
     If you meant to render a collection of children, use an array instead.
     */}
     {/* {obj} */}
     {/* 数组 */}
     {arr}

   </div>
 );
}

export default App
  1. JSX中的条件渲染
// if else 实现条件的渲染
// let is_login = true;
// function JSX() {
//   if (is_login) {
//     return (<div>
//       <p>欢迎登录</p>
//     </div>);
//   }else{
//     return (<p>请登录</p>)
//   }
// }
// export default JSX;
// 三目运算符 实现 条件渲染
let is_login = false;
function JSX() {
  return <div>
    {is_login?<p>欢迎登录</p>:<p>请登录</p>}
  </div>
}
export default JSX;
  1. JSX中的循环渲染

语法：{ 数组变量.map( item=>( <标签>{item}</标签> ) ) }
注意：map方法前面通常是数组，map方法的箭头函数体内容放到小括号中
key跟Vue中v-for中的key一个道理

function JSX() {
  // let books = ["DOM编程艺术","JS高级编程","React 实战"];
  let books = ["DOM编程艺术", "JS高级编程", "React 实战"];
  // let arr = [<li>{books[0]}</li>, <li>{books[1]}</li>, <li>{books[2]}</li>];
  // [<li>{book}</li>,<li>{book}</li>,<li>{book}</li>]
  // let arr = books.map(book=>{
  //   return <li>{book}</li>
  // })
  // let arr = books.map(book=><li>{book}</li>)
  return <ul>
    {books.map(book=><li key={book}>{book}</li>)}
  </ul>;
}
export default JSX;
  1. JSX中样式处理
  2. 行内样式
// React 中如何生成  行内样式
// style={{color:"red"}}
const App = () => {
 return (
   <div>
     <h1 style={{color:"red",fontSize:"100px"}}>红色</h1>
   </div>
 );
}
export default App;
  1. 类名样式
import "./App.css"
const App = () => {
  return (
    <div>
      {/*class => className */}
      <h1 className="big">big</h1>
    </div>
  );
}
export default App;

注意：JSX中给元素设置css类名是className而非class，因为class是关键字

  1. 空标签
// JSX 表达式必须具有一个父元素
// vue =>template 小程序=>block
// Fragment 空标签
import {Fragment} from "react"
const App = () => {
  return <Fragment>
    <h1>123</h1><h1>123</h1>
  </Fragment>
}
export default App;
  1. 注意点
    JSX中如果有多个元素必须使用一个根元素包裹起来，通常是一个div作为根元素即可
    特殊名称：class->className
    jsx中不能直接使用if，for等语法结构
    jsx中遍历通常使用 map方法，并且使用（）包括起里边的jsx结构，否则会报错
    分支结构通常使用三元表达式来实现

React组件基础
我们学习React其实就是学习组件的使用
组件是用来封装页面中某一部分功能的，例如：轮播图组件、底部tabBar组件、业务组件
多个组件的灵活组合可以实现不同的页面功能展示

  1. 两种创建组件的方式（函数组件和类组件）
    使用JS函数创建组件(function Hello(){}和const Hello = ()=>{})
    函数组件名称的首字母必须大写
    函数组件必须有返回值，通常是返回JSX结构
    如果返回是null，表示不渲染任何内容
// 函数式组件 
// 1.function App(){} 或者是通过 const App=()=>{}
// 2.函数式组件中通常会返回一段 JSX
// 3.组件名通常情况下是大写的
// 4. return null 表示不渲染任何东西
// function App(){
//   // return <div>jsx</div>
//   return null;
// }
const App = ()=>{
  return <div>jsx</div>
}
export default App;

使用类创建组件（类组件）
使用ES6的class创建组件
类组件名称的首字母必须大写
类组件必须继承React.Component父类，因为父类中实现了一些通用的公共属性(state)和生命周期方法
类组件必须有render()方法，并且通常返回一个JSX结构表示要显示的组件页面结构

// 类组件
// 1. es6 class 定义的,组件名必须大写
// 2. 继承 React.Component 或者 React.PureComponent
// 3. 类中，必须实现一个 render 方法，返回一段JSX
import React from "react"
class App extends React.Component{
  render(){
    return <div>
      <h1>这是一个类组件</h1>
    </div>
  }
}
export default App;
  1. React事件处理和this问题
    语法：on+事件名称={事件处理函数} 例如：onClick={()=>{}}
    注意：React事件名称的on是小写，后面跟着的事件描述单词间首字母大写，例如：onChange、onMouseMove
    函数组件中事件绑定
function App(){
  console.log(this);// undefined
  // 2. 定义了一个处理函数
  const handleClick = ()=>{
    console.log(this);
    console.log("点击了");
  }
  return (<div>
    {/*1. 通过onClick 注册一个点击事件*/}
    <button onClick={handleClick}>点击我啊触发</button>
  </div>)
}
export default App;

类组件中事件绑定

// 注册一个 onClick 事件
// 1. 引入 React 核心库
import React from "react"
class App extends React.Component{
  // 2. 定义一个类属性 等于 一个箭头函数
  handleClick = ()=>{
    console.log("点击事件触发了");
  }
  // msg="123"
  // 3. 定义一个render 函数
  render(){
    console.log(this);
    return (<div>
      {/* on+事件的名称 = {处理函数}*/}
      <button onClick={this.handleClick}>点击我啊</button>
      <button onClick={()=>{
        this.handleClick();
      }}>点击我啊(箭头函数)</button>
      {/* <button onClick={this.handleClick()}>点击我啊(错误的例子)</button> */}
    </div>)
  }
}
export default App;

this指向问题

import React from "react"
class App extends React.Component{

  // 1. 定义一个类属性 msg
  msg="我是一个消息";
  // 2. 定义一个类函数 handleClick  
  handleClick(){
    console.log(this);
    // TypeError: Cannot read property 'msg' of undefined
    console.log(this.msg);
  }
  // 3. 定义一个render 函数
  render(){
    return <div>
      {/*4. 定义一个点击事件*/}
      <button onClick={this.handleClick}>点击，获取类属性中的msg</button>
    </div>
  }
}
// 5 导出 App 组件
export default App;

3种解决方案

// this 指向  
// 类 的 事件绑定

// 解决this指向的问题 三种方法
import React from "react"
class App extends React.Component{
  // constructor(props){
  //   // 1. 修正this 指向的第一种方式 在构造函数中通过 bind 改变 this 的指向
  //   super(props)
  //   this.handlClick = this.handlClick.bind(this)
  // }
  name='jack'
  // handlClick(){
  //   // TypeError: Cannot read property 'name' of undefined
  //   console.log(this.name);
  // }
  // 第三把事件该为箭头函数 也是推荐用法
  handlClick=()=>{
    console.log(this.name);
  }
  render(){
    // return <div><button onClick={this.handlClick}>类中的事件绑定</button></div>
    //  修正 this 指向第二中方式 定义的时候 通过 bind 绑定 this
    // return <div><button onClick={this.handlClick.bind(this)}>点击获取name的值(bind改变this指向)</button></div>
    // return <div><button onClick={()=>{this.handlClick()}}>点击获取name的值</button></div>
    return <div><button onClick={this.handlClick}>点击获取name的值（箭头函数改变this指向）</button></div>

  }
}
export default App;
店长.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
回顾Javascript React基础
10-16
主要介绍了Javascript React基础，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的同学可以参考一下
typescript 错误码大全
ispaomoya博客
03-15 8492
typescript错误码大全，ts错误码
前端需要理解的 TypeScript 知识
薛定谔的猫-前端领域
08-24 661
Typescript是添加了类型系统的JavaScript，属于弱类型（即允许隐式类型转换）、静态类型语言，适应于任何规模的项目，支持 ES6，由微软开发并开源。Typescript增加的功能包括：类型批注和编译时类型检查、类型推断、类型擦除、接口、枚举、Mixin、泛型编程、名字空间、元组、Await。TypeScript 区分大小写，TypeScirpt 和JavaScript 一样没有整数类型；TypeScript 继承关键字为extends，允许接口继承多个接口；因此，现有的 JavaScript
javaScript | 报错：JSX expressions must have one parent element
最新发布
ZM20170703的博客
03-28 459
React的核心概念是虚拟DOM（Document Object Model），它允许开发者通过声明式编程来描述用户界面，然后React会高效地更新和渲染界面。这个规则的原因是JSX最终会被编译成调用React.createElement()的普通JavaScript代码，而React.createElement()一次只能返回单个React节点。在JSX中，你可以将HTML标签和JavaScript表达式结合在一起，从而使代码更加清晰和模块化。在React和JSX中，每个JSX表达式都必须有一个父元素。
react 也就这么回事 03 —— JSX 的注意点
qq_38650754的博客
02-24 1697
1 JSX 是一个表达式 JSX 是 JavaScript 的语法扩展，本质上是 React.createElement()方法的语法糖。 Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用，所以它被看作一个表达式。 这意味着你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX： function getGreeting(user) { if (user) { retur
解决react报错“JSX 表达式必须具有一个父元素“
jiaohuizhuang6019的博客
09-20 1123
解决react报错"JSX 表达式必须具有一个父元素"
003-react中的jsx的基本使用
杨勇博客之家
09-06 215
历史文章目录连接：https://blog.csdn.net/yy763496668/article/details/113117040此链接为CSDN连接，目的为方便大家一览博客目录！内...
使用 JSX 语法的两个注意点
luzhaopan的博客
10-15 4498
在使用react开发项目的时候，机会都会使用到JSX 语法，它的主要特点就是，凡是使用 到JavaScript 的值的地方，都可以插入这种类似 HTML 的语法。 const lut= &lt;h1&gt;love u, tiantian!&lt;/h1&gt;; 在使用的时候需要有两个注意的点： 所有 HTML 标签必须是闭合的，如果写成&lt;h1&gt;love就会报错。如果是那种没...
react基础文件.zip
06-04
react基础文件
json2jsx:一个将JSON内容转换为一组React组件的Node JS库
05-03
Json2jsx 一个NodeJs库，它将json视图模型（一个普通的.json文件）转换为一组有状态或无状态组件。 如何使用 步骤1： 为React JS创建一个空项目（例如，使用 ） 第2步： 创建或下载任何json文件（在本自述文件的底部，您可以找到不同的示例）。 即nasa.open.api.json 第三步： 运行json2jsx并将此json文件作为参数传递。 这将根据json结构创建一个包含任何匹配的React组件的文件夹。 json2jsx nasa.open.api.json 第四步： 编辑指向新创建的App.js的默认index.js（根组件默认文件名，可以通过修改选项进行更改）。 此时，您已经可以运行npm start并在本地节点Web服务器上查看结果（通常在localhost端口3000上运行） 步骤5（可选）： 此步骤完全是可选步骤，但可以显示此
react 基础学习
01-15
react初学者
react基础用法总结
01-03
一份自己总结的react知识点梳理PPT，这是自己讲解时的配套内容。
React基础.docx
08-19
React基础学习
React基础视频
01-12
值得一看的进阶视频，用React做模仿大众点评的app。。。
React之JSX语法
张培跃的个人博客
08-19 767
JSX 即Javascript XML，它是对JavaScript 语法扩展。React 使用 JSX 来替代常规的 JavaScript。你也可以认为JSX其实就是JavaScript JSX的优点： 快，执行速度更快，因为它在编译为JavaScript代码后进行了优化。 可以使用熟悉的语法仿照HTML来定义虚拟DOM。从而编写模板更加简单快速。 使用JSX 如果要使...
TS错误信息列表
热门推荐
Jinmy的博客
07-11 9万+
错误信息列表code类型英文描述中文描述1002错误Unterminated string literal.未终止的字符串文本。1003错误Identifier expected.应为标识符。1005错误'{0}' expected.应为“{0}”。1006错误A file cannot have a reference to itself.文件不能引用自身。1009错误Trailing comm...
JSX语法详解
王浴昊
12-02 8万+
JSX语法详解 本文在官方文档的基础上，进行了扩展扩展补充和一些解读。基本涵盖了JSX语法的细枝末节，JSX语法本身并不复杂，也容易掌握。本文供学习参考使用。 一、基础1、JSX是什么JSX是一种像下面这样的语法：const element = <h1>Hello, world!</h1>;它是一种JavaScript语法扩展，在React中可以方便地用来描述UI。本质上，JSX为我们提
react基础面试题
08-29
React基础面试题通常包括以下几个方面： 1. React中函数组件和类组件的区别是什么？ 函数组件是一个简单的JavaScript函数，接受props作为参数并返回一个React元素。它通常用于展示静态内容或处理简单的交互逻辑。类...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值