React脚手架创建项目

一、使用脚手架创建的Hello React

1.安装依赖库

npm i -g create-react-app

2.使用命令创建项目

create-react-app hello-react

3.进入所创建的项目目录文件夹

cd hello-react

4.启动项目

yarn start // npm start

5.项目目录文件作用

7.简介完整的项目

public index.html
srcApp.jsindex.js

二、父子组件间数据传递

1.父组件向子组件传递数据props

  <Header count={1} />// 子组件通过 this.props获取数据

2.子组件向父组件传递数据

这里利用了，函数在哪里定义，函数的作用域链就在哪里，但子组件调用函数时，就能向父组件传递数据，操作父组件中的数据了，但是将方法传递多层时，比较麻烦

a.先在父组件中定义操作数据的方法

b.父组件定义的方法通过传递props的方式传递给子组件

c.子组件调用通过调用props传递过来的方法，利用给方法传递参数的形式，传递给了父组件

三、任意组件间通信

类似与消息订阅与发布，使用了一个依赖库PubSubJS

1.依赖安装

yarn add pubsub-js

2.使用api

1)import PubSub from 'pubsub-js' //引入
// 消息定越
2)PubSub.subscribe('delete', function(data){ }); //订阅// 取消消息订阅
3)Pubsub.unsubscribe(pubsub) // 取消指定的订阅
4)PubSub.clearAllSubscriptions() //取消全部订阅// 消息发布api
5)PubSub.publish(StationStatisticsID, data) //发布消息
6)PubSub.publishSync(StationStatisticsID, data)

3.在React的使用

a.消息订阅

放在componentDidMount生命钩子上，一般

componentDidMount(){// 这里的token 类似于使用定时器返回的id，在取消特定定时器时需要用到，所以保留到了本组件实例上this.token = PubSub.subscribe('atguigu',(_,stateObj)=>{this.setState(stateObj)});}

b.取消消息订阅

放在componentWillUnmount生命钩子上

componentWillUnmount(){// PubSub.unsubscribe(this.token);PubSub.clearAllSubscriptions() //取消全部订阅}

c.发布消息

凡是需要发布消息的地方都可以使用，我这里展示的是请求成功后的消息发布

axios.get(`http://localhost:3000/api1/search/users?q=${searchEl.value}`).then(response => {PubSub.publish('atguigu', { userList: response.data.items, isLoading: false });},error => {PubSub.publish('atguigu', { isLoading: false, err: error.message });})

四、React 前后端通信

1.axios库的使用

对xhr的封装

a.安装依赖

yarn add axios

b.使用

import axios from 'axios'
axios.get(`http://localhost:3000/api1/search/users?q=${searchEl.value}`).then(response => {console.log(response.data);},error => {console.log(error.message);})

2.fetch使用

使用了关注分离的思想

a.基本使用promise

fetch(`http://localhost:3000/api1/search/users?q=${searchEl.value}`)
.then(response=>response.json()
).then(data=>console.log(data)
).catch(
error=>console.log(error.message)
)

b.配合async语法使用

search = async () => {// 关注分离try {const response = await fetch(`http://localhost:3000/api1/search/users?q=${searchEl.value}`);const data = await response.json();PubSub.publish('atguigu', { userList: data.items, isLoading: false });} catch (error) {PubSub.publish('atguigu', { isLoading: false, err: error.message });}}

五、项目打包

1.打包

npm run build

2.简单运行到服务器

依赖serve库

npm -i serve -g

开启服务器

serve build
// 当在文件夹中时，可直接运行serve,开启服务器

React脚手架创建项目相关推荐

react脚手架创建项目报错，ReactDOM.render is no longer supported in React 18.
react脚手架创建项目报错,ReactDOM.render is no longer supported in React 18. 最近新写一个react的项目,但是发现已经更新到了18.0的版本, ...
【react】使用react 脚手架创建项目
项目一.React(脚手架) 1.1.安装脚手架: cnpm install create-react-app -g //全局安装脚手架 1.2.创建项目 create-react ...
React 脚手架创建项目
意义现代的 Web 应用要考虑的问题很多,除了编写业务代码之外,还要考虑代码规范.预编译.压缩合并.打包上线等工作,需要有一套完整的解决方案来辅助我们快速开发,而 React 脚手架就是这么一套完 ...
React框架创建项目详细流程-项目的基本配置-项目的代码规范
文章目录 React创建项目流程与规范项目规范项目配置目录结构样式重置 Router配置 Redux状态管理 axios配置 React创建项目流程与规范项目规范项目规范: 在项目中都会有 ...
【Vue】—Vue脚手架创建项目时的 linter / formatter config配置选择
[Vue]-Vue脚手架创建项目时的 linter / formatter config配置选择 ESLint with error prevention only 只进行报错提醒 ESLint + ...
图解利用vue-cli 脚手架创建项目
最新图解利用vue-cli 脚手架创建项目首先你的node环境是搭好的 node -v 一.安装vue-cli 首先全局安装vue-cli,这里使用的是cnpm(淘宝镜像)没有就用npm,强烈建立 ...
使用express脚手架创建项目
本篇文章将介绍如何使用express脚手架express-generator快速搭建项目. 全局安装脚手架工具express-generator. cnpm i express-generator - ...
Vue脚手架创建项目流程
Vue脚手架创建项目流程图形化创建在创建文件的文件夹打开cmd, 按住shift右键打开黑窗口,或者直接在文件夹上面路径上面输入cmd 输入vue ui 会自己在浏览器打开点击创建项目项目文件 ...
Vue3 脚手架创建项目
Vue 脚手架创建项目 vue 新建项目 vue create vueadmin 这个命令创建项目会只创建2个文件,这个可以是我没有选择那个安装目录这个,只点了default 模块配置导致的重新创建 ...
vue脚手架创建项目失败，显示vue:无法加载文件
问题描述利用脚手架创建项目时,出现如下报错: 解决方案: 用管理员身份打开PowerShell,输入如下命令,再输入Y即可. 这样,就可以正常创建项目了.

React脚手架创建项目

React脚手架创建项目

一、使用脚手架创建的Hello React

1.安装依赖库

2.使用命令创建项目

3.进入所创建的项目目录文件夹

4.启动项目

5.项目目录文件作用

7.简介完整的项目

二、父子组件间数据传递

1.父组件向子组件传递数据props

2.子组件向父组件传递数据

a.先在父组件中定义操作数据的方法

b.父组件定义的方法通过传递props的方式传递给子组件

c.子组件调用通过调用props传递过来的方法，利用给方法传递参数的形式，传递给了父组件

三、任意组件间通信

1.依赖安装

2.使用api

3.在React的使用

a.消息订阅

b.取消消息订阅

c.发布消息

四、React 前后端通信

1.axios库的使用

a.安装依赖

b.使用

2.fetch使用

a.基本使用promise

b.配合async语法使用

五、项目打包

1.打包

2.简单运行到服务器

React脚手架创建项目相关推荐

最新文章

热门文章