React 入门实例 学习笔记 目录

已于 2022-03-30 21:33:58 修改
阅读量789 收藏
点赞数
文章标签： react.js 学习 前端
于 2022-03-15 22:05:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/python1639er/article/details/123513776
版权

博主介绍：大爽歌, b站小UP主 ，直播编程+红警三 ，python1对1辅导老师 。

本博客为一个github开源项目的学习笔记（代码编写过程梳理展示+简单说明）。
具体项目为microsoft的的Frontend Bootcamp，其中day1部分的react部分(step4-step7)
博客中，按照个人理解，做了一些梳理调整，简单改动，以及中文的说明。

背景说明：

辅导一位在美国找工作的学生学习前端约半年多了。
他最近一直在学习react，想找个项目来练习一下，
找到了microsoft的Frontend Bootcamp项目, 打算用day1的step4到step7来练手。
不过原项目结构比较混乱，再加上全是英文，新手学习不易。
所以我这里重新梳理了下，
把梳理后的过程代码加简单中文讲解说明，发布到博客。
每一阶段敲代码的详细过程也有录制下来。博客和视频是一一对应的。
希望用博客+视频的方式，提供更全面更立体的展示，方便学生学习与理解。

同时为了让学生熟悉git操作，这里选择在github上使用项目来管理该笔记。
项目的不同阶段都保存到不同的git分支中。

本教程对应视频: 【代码过程】 React 入门实例 TodoApp 学习梳理笔记
本教程对应github仓库: react-todoapp-study

视频中有些地方有手误敲错，建议以博客为主，
以视频作为过程的参考。

目录

一、 Hello World
二、 按钮点击计数器 Button Click Counter
三、 TodoApp 基础界面
四、 TodoApp 功能分步实现
五、 TodoApp最终优化 (Ts与Context)

详细情况补充

原来项目截图如下

请添加图片描述
笔记每个过程的效果截图如下

一、 Hello World

在这里插入图片描述

二、 按钮点击计数器 Button Click Counter

在这里插入图片描述

三、 TodoApp 基础界面

在这里插入图片描述

四、 TodoApp 功能分步实现

在这里插入图片描述

五、 TodoApp最终优化 (Ts与Context)

在这里插入图片描述

大爽歌
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
十分详细的React入门实例
王浴昊
09-26 8万+
学习React不是一蹴而就的事情，入门似乎也没那么简单。但一切都是值得的。今天给大家带来一个详细的React的实例，实例并不难，但对于初学者而言，足够认清React的思考和编写过程。认真完成这个实例的每一个细节会让你受益匪浅。接下来我们开始吧！代码下载预览首先说明一下，本例究竟做了什么。本文实现了一个单页面人员管理系统的前台应用。包括以下功能： 人员基本信息列表； 人员的录入及删除； 人员详细信息的
react教学笔记，从入门到精通
06-06
这份“react教学笔记，从入门到精通”应该会详细解释以上知识点，并通过实例演示如何将它们应用到实际项目中。通过学习这些内容，你将能够熟练掌握React，无论是创建简单的组件还是构建复杂的Web应用。
react学习目录
weixin_34214500的博客
04-14 108
前面的话 　　React是如今热门的两大前端框架之一，它设计思路独特，性能卓越，逻辑简单，受到了大量开发者的喜爱。Vue的基本思路是基于HTML模板的扩展，而React的基本思路是基于JS语言的扩展。由于Vue的写法更接近于传统，所以对于习惯了HTML的开发者更容易接受；而React中的JSX语法需要一定的学习成本。但一旦掌握了，再基于强大的社区力量，就可以使用JS语言来表达一切，使用起来非常流...
React学习目录
我的博客
11-20 841
React学习目录
React-学习目录
qq_34153210的博客
04-10 179
会把我学习过程中的学习流程到这里，供新手入门用 学习资料： 1.React入门-概述和演练教程 https://www.taniarascia.com/getting-started-with-react/ 2.官方示例 https://zh-hans.reactjs.org/docs/getting-started.html#learn-react 环境搭建： 1.安装...
React简单样例
qq_57756904的博客
11-01 328
1、样例1 import { PureComponent } from "react"; import Block from '@/custom/Block'; import { Card, Button } from "antd"; export default class Index extends PureComponent{ render(){ return( <Card> <Block> &l
学习笔记1111111
05-18
总之，“学习笔记1111111”是一份全面的IT学习资源，覆盖了多个领域，适合初学者入门，也对有一定基础的学习者提升技能有所帮助。通过这样的笔记，学习者可以按照自己的节奏和兴趣，深入探索IT世界的各个角落。
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
01-21
本文实例讲述了Vue入门基本概念与使用。分享给大家供大家参考，具体如下： 1. Vue.js是什么? 1). 一位华裔前Google工程师(尤雨溪)开发的前端js库 2). 作用: 动态构建用户界面 3). 特点: * 遵循MVVM模式 * 编码简洁,...
前端主流框架vue学习笔记第一篇
12-10
Vue.js 吸取了其他框架如Knockout、Angular、React以及Avalon等的优点，提供了多种开发模式，使得开发者能够快速上手并构建高性能的应用。 【Vue.js 入门 - Hello World】 Vue.js 的第一个示例通常是从"Hello World...
React入门实例
小周sri的码农
02-15 287
准备开始好好学习react这个框架，每天积累一些知识 React环境搭建 在你终端中全局安装react cnpm install -g create-react-app 最终效果 创建React项目 create-react-app reactDemo //用脚手架创建React项目 cd reactDemo //等创建完成后，进入项目目录 yarn start //预览项目，如果...
React学习手册完整版带目录.zip
06-25
React完整版的学习手册带目录
React前端基础实例教程
chinaxsw的博客
06-03 246
文章目录React前端基础实例教程1.建立项目2.整理项目目录结构3.权限路由配置4.pages页面5.实现全局状态管理6.封装axios7.后台接口8.传值8.整合iconfont阿里图标库9.打包部署10.完结 React前端基础实例教程 1.建立项目 环境搭建 安装node.js（详细安装过程及配置，百度一下） 开始建立项目 # create-react-app建立项目 npx create-react-app react-demo # 运行项目 yarn start # react路由 yarn a
React从零开始——一个详细的范例
欢迎光临
03-13 6295
范例说明 接下来我们要通过一个简单的案例，详细的学习React的内容 如上图所示，两个按钮，点击加号按钮，数字加一，点击减号按钮，数字减一 代码结构 使用create-react-app创建一个工程，将其中的代码结构删减到最简单的模式 修改index.js index.js中的代码就很简单了，只要引入App组件，执行渲染即可 import React from 'react'; import ...
P04:React脚手架生成的项目目录介绍
wgchen
12-07 337
用脚手架生成目录后，需要对目录有个基本的认识。 最起码知道都是作什么用的，否则我们如何编写程序呢？ 所以本文将带你浏览一下React脚手架生成目录和文件的作用。 React16基础项目根目录中的文件public文件夹介绍src文件夹介绍 项目根目录中的文件 先从进入项目根目录说起，也就是第一眼看到的文件(版本不同，可能稍有不同) README.md 这个文件主要作用就是对项目的说明，已经默认写好了一些东西，你可以简单看看。如果是工作中，你可以把文件中的内容删除，自己来写这个文件，编写这个文件可以使用Mar
react框架学习总结（纯干货）
热门推荐
Rookie
04-30 1万+
首先，我先给出我学习react框架的参考教程，以下内容都是我依据此教程的个人总结。react教程 React与JSX: function Square(props) { return ( <button className="square" onClick={props.onClick}> {props.value} &l...
react学习(一)安装以及基本配置学习
banggan6022的博客
07-10 102
一、搭建新工程 参考：https://facebook.github.io/react/docs/installation.html npm install -g create-react-app//npm安装create-react-app create-react-app my-app//使用create-react-app搭建手脚架 cd my-app//进入项目根目录 ...
React学习之路 - 目录结构
Java_1710的博客
06-10 1581
node_modules — 存放项目依赖包public — 存放网站的静态资源文件src — 存放源代码，基于ES6规则的React代码gitignore — git的选择性上传的配置文件package.json — Webpack配置和项目包管理文件包含项目中依赖的第三方包（包的版本）和一些常用命令配置都在这个里边进行配置，当然脚手架已经为我们配置了一些了，目前位置，我们不需要改动。如果你对webpack了解，对这个一定也很熟悉。
React 学习笔记目录
最新发布
qq_33003143的博客
09-09 579
记录React学习笔记的目录
React高阶组件实例应用
少油少盐不要辣
07-12 882
1.为何使用高阶组件 实现逻辑复用，例如：用户对页面按钮操作的权限控制。 2.什么是高阶组件 React官网：具体而言，高阶组件是参数为组件，返回值为新组件的函数。 3.应用场景 鉴权判断 举个栗子： 下面代码是三块：1.页面按钮所在的组件 2.封装了鉴权逻辑的高阶组件 3.公共按钮组件 1.页面按钮所在的组件（假设是学校编辑学生档案的组件） class EditPaper extends React.Component { constructor(props) { super(p
react18学习笔记
07-25
在学习React 18时，你可以关注以下几个方面： 1. React组件：React组件是构建用户界面的基本单元。你可以使用React.createElement()函数或JSX语法来创建React元素和组件。React元素是不可变的，而React组件是可复用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值