React---基本入门知识

最新推荐文章于 2024-09-24 22:48:58 发布

最love酸奶

最新推荐文章于 2024-09-24 22:48:58 发布

阅读量1.2k

点赞数 6

文章标签： react.js 前端 reactjs

本文链接：https://blog.csdn.net/qq_46065861/article/details/121095273

版权

本文是一篇全面的React入门教程，涵盖了React的基本概念、项目的搭建、JSX语法、组件、状态管理、循环、样式、事件处理、高阶组件、Hook的使用、路由、动态传参等内容，旨在帮助开发者快速掌握React开发。

摘要由CSDN通过智能技术生成

自己有道云的文档
 React配置less语言

一、简介

React是目前前端较为流行的框架，是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。
2013年由FaceBook进行开源，我们将React 16以后的版本，称之为React Fiber(使react运行更加的流畅，特别是复杂的动画)
属于MVC设计模式 M model V view C control(即为模型层影响控制层，控制层影响视图层)
相关技术栈：React-Router Redux React Native React VR Hook

二、项目的搭建

前期准备：需要安装node.js,下面的npx才能使用
1.首先新建一个目录
在这里插入图片描述
2.进入该目录所在路径

3.再该路径下输入npx create-react-app安装

在这里插入图片描述
出现了如下表示安装完成

4.cd 项目名进入项目

5.npm start启动项目

6.运行结果

三、几个命令

在这里插入图片描述
npm start：启动这个项目
npm run build:打包
npm test:启动测试运行程序。
npm run eject:暴露出配置文件，移除工具、复制依赖，一旦执行，不能返回

四、项目目录简介

圈了的必须了解
在这里插入图片描述
在React中，这四个文件常用,注意：js文件表示一个组件

五、项目的初始化(删除一些东西)

1.只保留src的如下文件
在这里插入图片描述
此时报错：没有reportWebVitals.js

2.删除index.js中的圈的

此时报错

3.删除app.js的如下图所示

在这里插入图片描述
4.删除app.css中的全部代码
5.删除app.js中的如下代码

6.删除index.css的全部代码
初始化完成了

六、JSX的语法

写的地方写在return里面
在这里插入图片描述

jsx是javascript的语法扩展
花括号{}内嵌任何的javascript表达式，但不支持js的语句
JSX是一种语法糖-React.createElement()
返回ReactElement对象
通过babel尝试JSX的语法：https://www.babeljs.cn/

注意
React.createElement中接收多个参数：
第一个为创建的标签名
第二个为创建的标签的属性
第三个为标签的内容

这个为jsx语法的对应React的渲染方式
在这里插入图片描述

6.1例子

1.在app.js里面的return里面写jsx代码
在这里插入图片描述

七、React组件

无状态组件和状态组件里面事件的使用

7.1 组件的定义

1.创建组件(3种方式)
注意：若组件较多，可以在src创建一个文件目录（如：components）专门存放组件
创建组件的三种方式及其区别：https://www.cnblogs.com/wonyun/p/5930333.html

方式一：创建无状态函数组件
在这里插入图片描述
方式二：React.createClass创建组件(ES5的定义方式)
方式三：React.Component创建组件（ES6的定义方式推荐使用）类组件

7.2、组件的使用

在这里插入图片描述

7.3组件传值的例子

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

1.在src中新建component目录，并且定义组件，在导出
在这里插入图片描述
2.在需要的用该组件的页面使用组件，组件里面写上name=“aaa”

3.通过props.name拿到传过来的值

完整代码
Fun.js

function fun(props){
   
	return (
		<div>
			<h1>纯展示组件{
   props.name}</h1>
		</div>
	)
}
//导出组件
export default fun;

App.js

import './App.css';
import Fun from './components/Fun.js'
import ComponentFun from './components/ComponentFun.js'
// 1.导入
import React,{
   Component} from 'react';

class App extends Component{
   
	constructor(props) {
   
		// 继承父类
	    super(props);
		
		// 定义state
		this.state={
   
		}
	}
	
	// 渲染
	render(){
   
		return(
			<div className="wrap">
				<Fun name="aaa"></Fun>
			</div>
		)
	}
}

export default App;

7.4有状态组件的例子

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

1.在src的component里面创建组件
在这里插入图片描述
2.在组件写下如下代码，步骤为我圈红了的

3.在app.js使用组件，步骤为圈红了

完整代码
ComponentFun.js

// 1.引入React
import React,{
   Component}from 'react';

// 2.定义组件
class ComponentFun extends Component{
   
	
	// 定义属性
	constructor(props) {
   
		// super继承父类
	    super(props);
		
		// 定义数据内容
		this.state={
   
			
		}
	}
	
	render(){
   
		return(
			<div>
				<h1>class类组件有状态组件</h1>
			</div>
		)
	}
}
// 3.导出组件
export default ComponentFun;

app.js

import './App.css';
import ComponentFun from './components/ComponentFun.js'
// 1.导入
import React,{
   Component} from 'react';

class App extends Component{
   
	constructor(props) {
   
		// 继承父类
	    super(props);
		
		// 定义state
		this.state={
   
		}
	}
	
	// 渲染
	render(){
   
		return(
			<div className="wrap">
				<ComponentFun></ComponentFun>
			</div>
		)
	}
}

export default App;

八、state的定义与使用

8.1state定义(`有两种方式`)

在这里插入图片描述

8.2state的使用

在JSX中采用this.state进行访问

九、map循环

必须写key
在这里插入图片描述

十、例子

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

app.js里写如下代码

import './App.css';

// 1.导入
import React,{
   Component} from 'react';

class App extends Component{
   
	constructor(props) {
   
		// 继承父类
	    super(props);
		
		// 定义state
		this.state={
   
			arr:['张三','李四','王麻子']
		}
	}
	
	// 渲染
	render(){
   
		return(
			<div className="wrap">
				<div>hello</div>
				<div>{
   (3>2)?'正确':'错误'}</div>
				<ul>
					{
   
						this.state.arr.map((value,index)=>{
   
							return (
								<li key={
   index}>下标:{
   index},值：{
   value}</li>
							)
						})
					}
				</ul>
			</div>
		)
	}
}

export default App;

index.js里面写

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  // 挂载到主页面
  document.getElementById('root')
);

十一、React样式

方式一：行内样式
方式二:class样式

在这里插入图片描述

十二、{}里面写的值

1.state数据

<div>{
   this.state.arr}</div>

2.js表达式

<div>{
   (3>2)?'正确':'错误'}</div>

3.js语句（map遍历）

{
   
	this.state.arr.map((value,index)=>{
   
		return (
			<li key={
   index}>下标:{
   index},值：{
   value}</li>
		)
	})
}

4.传的值

<h1>纯展示组件{
   props.name}</h1>

十三、state的定义与使用

1.state的定义

在这里插入图片描述

2.state的使用

在这里插入图片描述

3.例子

class App extends Component{
   
	constructor(props) {
   
		// 继承父类
	    super(props);
		
		// 定义state
		this.state={
   
			arr:['张三','李四','王麻子']
		}
	}
	// 渲染
	render(){
   
		return(
			<div className="wrap">
				<ul>
					{
   
						this.state.arr.map((value,index)=>{
   
							return (
								<li key={
   index}>下标:{
   index},值：{
   value}</li>
							)
						})
					}
				</ul>
			</div>
		)
	}
}

在这里插入图片描述

十四、父子组件间的传值

1.父传子

1.在父组件的子组件里面定义属性
2.在子组件里面获取父组件的值
若子组件为类组件
方式一子组件通过this.props.属性名获取值

在这里插入图片描述
方式二通过结构赋值获取

若子组件为函数组件
直接通过形参props直接获取属性的值

2.父传子例子

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

App.js

import './App.css';
import Fun from './components/Fun.js'
import ComponentFun from './components/ComponentFun.js'
// 1.导入
import React,{
   Component} from 'react';

class App extends Component{
   
	constructor(props) {
   
		// 继承父类
	    super(props);
		
		// 定义state
		this.state={
   
			
		}
	}
	// 渲染
	render(){
   
		return(
			<div className="wrap">
				
				{
   /* 1.父组件里面定义属性 */}
				<ComponentFun name="bbb" getData="我是父亲" father="我是你爸爸"></ComponentFun>
			</div>
		)
	}
}

export default App;

ComponentFun.js

// 1.引入React
import React,{
   Component}from 'react';

// 2.定义组件
class ComponentFun extends Component{
   
	
	// 定义属性
	constructor(props) {
   
		// super继承父类
	    super(props);
		
		// 定义数据内容
		this.state={
   
			
		}
	}
	
	render(){
   
		// 接收props传递的参数
		
		const father1=this.props.father;
		
		// this.props为一个对象,props接收父组件传递的所有属性
		const {
   father}=this.props;
		return(
			<div>
				<h1>class类组件有状态组件</h1>
				
				{
   /* 变量名接收父亲传的值 */}
				<h2>{
   father1}</h2>
				<h2>{
   father}</h2>
				
				{
   /* this.props.name接收父亲传的值 */}
				<h2>{
   this.props.father}</h2>
				
			</div>
		)
	}
}
// 3.导出组件
export default ComponentFun;

3.子传父亲

1.在父组件定义函数
在这里插入图片描述
2.在子组件里定义属性,通过props将已经定义好的函数方法名传递到子组件

注意bind(this)为了在函数内仍然能够正确的拿到this

3.在子组件内调用父组件方法
在这里插入图片描述

4.子传父例子

在这里插入图片描述
完整代码
app.js

import './App.css';
import Fun from './components/Fun.js'
import ComponentFun from './components/ComponentFun.js'
// 1.导入
import React,{
   Component} from 'react';

class App extends Component{
   
	constructor(props) {
   
		// 继承父类
	    super(props);
		
		// 定义state
		this.state={
   
		
		}
	}
	

	// 在父组件定义函数
	getValue(val){
   
		//val接收子组件传的值
		console.log(val)
	}
	
	// 渲染
	render(){
   
		return(
			<div className="wrap">
				{
   /* 在子组件里定义属性,通过props将已经定义好的函数方法名传递到子组件 */}
				{
   /* bind(this)为了在函数内仍然能够正确的拿到this */}
				<ComponentFun getData={
   this.getValue.bind(this)}></ComponentFun>