React 项目教程

[ShannonChenCHN]

2 周内的目标：能够独立使用公司的 h5 框架实现基本的功能
↑
能够运用 React 框架，开发一个简单的网页
↑
快速过一遍 React 的官方文档和教程
↑
能够运用 html、css、js、ajax 等基础知识，开发一个简单的网页
↑
快速过一遍 html、css、js 基础知识和相关教程

程序员鱼皮：前端职业发展的几个阶段
1.作为一名合格的前端开发,首先你要能干活、能通过Vue之类的前端框架完成公司的需求，比如还原设计稿、开发交互、搭建项目的初始框架(架构)、开发内部的组件库(基建)等等，重点是要学会如何和后端系统进行对接(前后端联调)，有时候也需要完成一些简单的服务端开发，比如使用Node搭建中间层/接入层(BFF)。
2.这就需要你除了学习前端基础三件套之外，还要熟练使用一个开发框架Vue/React以及前端工程化的一些工具/轮子，比如打包工具用webpack、性能分析工具、SSR等)，可以帮助你更好地设计项目、开发项目，从而应对需求的变化、使项目更易于维护、可扩展。
3.如果要成为高级前端开发，要了解常用框架/工具的运行原理和机制。最好有一个自己擅长/专攻的领域，比如低代码、Web IDE、可视化、性能优化、Web Assembly等等，并且积极参与开源项目和公开分享。

[ShannonChenCHN]

综合项目

1. 2024最新版Web前端开发精讲视频教程，从入门到精通（87集全）

• react 实战-仿知乎页面框架 https://www.bilibili.com/video/BV1QWH5euEEg?spm_id_from=333.788.videopod.episodes&vd_source=c048dc867cc4c796fd239a2cacacc7f7&p=61
• react实战-知乎细节与高级特性 https://www.bilibili.com/video/BV1QWH5euEEg?spm_id_from=333.788.videopod.episodes&vd_source=c048dc867cc4c796fd239a2cacacc7f7&p=62
• react实战-首页鉴权登录与消息推送 https://www.bilibili.com/video/BV1QWH5euEEg?spm_id_from=333.788.videopod.episodes&vd_source=c048dc867cc4c796fd239a2cacacc7f7&p=63
• react实战-基于 Node 的后台技术 https://www.bilibili.com/video/BV1QWH5euEEg?spm_id_from=333.788.videopod.episodes&vd_source=c048dc867cc4c796fd239a2cacacc7f7&p=64

2. 千锋教育前端React全家桶视频教程_react零基础入门到项目实战完整版

• 使用 React 开发新闻发布管理系统

3. 黑马程序员前端React18入门到实战视频教程，从react+hooks核心基础到企业级项目开发实战（B站评论、极客园项目等）及大厂面试全通关

• 美团外卖 https://www.bilibili.com/video/BV1ZB4y1Z7o8?spm_id_from=333.788.videopod.episodes&vd_source=c048dc867cc4c796fd239a2cacacc7f7&p=44
• 记账本 https://www.bilibili.com/video/BV1ZB4y1Z7o8?spm_id_from=333.788.videopod.episodes&vd_source=c048dc867cc4c796fd239a2cacacc7f7&p=60
• 极客园 PC 端 https://www.bilibili.com/video/BV1ZB4y1Z7o8?spm_id_from=333.788.videopod.episodes&vd_source=c048dc867cc4c796fd239a2cacacc7f7&p=81
• 极客园移动端 https://www.bilibili.com/video/BV1ZB4y1Z7o8?spm_id_from=333.788.player.switch&vd_source=c048dc867cc4c796fd239a2cacacc7f7&p=154

4. 黑马程序员前端React视频教程 - 好客租房移动 web 项目实战（下面2个视频其实是一样的，选一个就行了）

• 黑马程序员React从零基础入门到react好客租房项目实战-pink老师推荐(素材持续更新)-全套视频
  https://www.bilibili.com/video/BV14y4y1g7M4?spm_id_from=333.788.videopod.episodes&vd_source=c048dc867cc4c796fd239a2cacacc7f7&p=100
• 黑马程序员前端React视频教程，react零基础入门原理详解到好客租房项目实战
  https://www.bilibili.com/video/BV1gh411U7JD?spm_id_from=333.788.videopod.episodes&vd_source=c048dc867cc4c796fd239a2cacacc7f7&p=100

[ShannonChenCHN]

YouTube 视频教程：React Full Course for free ⚛️ (2024)

https://www.youtube.com/watch?v=CgkZ7MvWUAA&ab_channel=BroCode

This is a beginners React JS course that should be enough to get you started using the React Library. There are still many more hooks and concepts that are beyond the scope of the beginner level. This video should at least give you a solid foundation.

1. 00:00:00 React tutorial for beginners ⚛️
2. 00:20:26 card components 🃏
3. 00:32:24 add CSS styles 🎨
4. 00:40:40 props📧
5. 00:52:49 conditional rendering ❓
6. 01:03:04 render lists 📃
7. 01:29:43 click events 👆
8. 01:42:04 useState() hook 🎣
9. 01:58:36 onChange event handler 🚦
10. 02:13:16 color picker app 🖌
11. 02:23:31 updater functions 🔄
12. 02:30:45 update OBJECTS in state 🚗
13. 02:39:55 update ARRAYS in state 🍎
14. 02:48:55 update ARRAY of OBJECTS in state 🚘
15. 03:01:42 to-do list app ☝
16. 03:24:17 useEffect() hook 🌟
17. 03:44:08 digital clock app 🕒
18. 04:00:08 useContext() hook 🧗‍♂️
19. 04:11:44 useRef() hook 🗳️
20. 04:23:01 stopwatch app ⏱

[ShannonChenCHN]

YouTube 视频教程：React Course - Beginner's Tutorial for React JavaScript Library [2022]

https://www.youtube.com/watch?v=bMknfKXIFA8&ab_channel=freeCodeCamp.org

0:00 Introduction
5:27 What we’ll learn
7:03 Fun facts about react link: https://www.figma.com/file/xA1rJVQOor...
9:08 First react
https://reactjs.org/docs/cdn-links.html
17:13 First React Practice
19:04 Local Setup (the quick way)
21:03 Why React?
30:38 JSX
40:19 Goodbye, CDNs!
44:27 Thought Experiment
49:57 Project 1 Part 1 - MarkUp
57:44 Pop Quiz!
59:55 Components
1:33:07 Setup a local React environment w/ Create React App
1:33:53 Babel, Bundler, Build
1:34:47 Create React app: https://create-react-app.dev/
1:35:56 How to install Node.js
1:36:06 Use nvm or nvm-windows
1:36:33 How to install Node.js
1:41:30 Styles and images with CRA
https://create-react-app.dev/docs/add...
https://create-react-app.dev/docs/usi...
1:46:03 Quick Mental Outline of Project
1:50:00 Quick Figma Walkthrough
• Intro to Figma for Developers
1:51:43 Project Setup
https://www.figma.com/file/xA1rJVQOor...
1:59:00 Navbar and Styling
2:06:18 Main Section
2:14:04 Color The Bullets
2:16:30 Add Background Logo
2:20:50 Section 1 Solo Project
2:22:23 Digital Business Card https://scrimba.com/links/figma-digit...
2:24:05 Share your work https://scrimba.com/links/solo-projec... https://scrimba.com/links/discord-i-b...
2:24:45 Section 1 Recap
https://scrimba.com/links/discord-tod...

Build an AirBnb Experiences Clone

2:27:26 Section intro & Figma File
https://scrimba.com/links/figma-airbn...
2:31:40 Project Setup: NavBar & Hero
2:43:11 Project Card Component
2:50:32 Problem - Not Reusable
2:52:29 Props
3:18:42 Prop Quiz (Get it?)
3:23:10 Destructuring Props
3:27:05 Props practice
3:36:12 Passing in non-string Props
3:40:11 Project: Pass props to component
3:47:08 Review - Array.map()
3:55:37 React render array
4:00:10 Mapping Components
4:04:46 Map Quiz
4:08:26 Loading Images from .map()
4:10:02 Projects
4:32:34 Spread objects as props
4:36:30 Section 2 solo project
4:37:14 Travel journal: https://scrimba.com/links/figma-trave...
4:39:24 Share your work
4:39:52 Section 2 recap

Build a Meme Generator

4:41:37 Section into and figma file
https://scrimba.com/links/figma-meme-...
4:45:48 Meme Generator: Header & Form
4:57:13 Project Analysis
4:58:20 Event Listeners
5:04:31 Project: Get random meme
5:10:15 Our current conundrum
5:18:26 Props vs. State
5:32:13 useState
5:37:57 Changing State
5:41:03 useState - Counter Practice
5:45:51 useState - Changing state with a callback Function
5:51:12 hanging State Quiz!
5:53:44 Project: Assign images to the meme generator
5:56:43 Challenge: Ternary Practice & flipping State back and forth
6:06:37 Complex State
6:27:46 Project: Refactor State
6:31:59 Passing state as props
6:37:54 Setting state from child components
6:44:25 Passing data around
6:50:53 Boxes Challenge
7:28:46 Conditional Rendering
7:48:49 React forms intro
7:52:17 Watch for input changes in React
7:56:49 Form inputs practice
7:59:13 Forms state object
8:07:18 Controlled inputs
8:11:35 Forms in React
8:47:04 Project: add text to image
8:51:05 Making API Calls
8:55:08 Intro to useEffect
https://reactjs.org/docs/hooks-effect...
9:00:54 useEffect()
9:24:46 Project:get memes from API
9:33:00 State and Effect Practices
9:40:05 useEffect cleanup function
9:46:00 Using an sync function inside useEffect
9:49:14 Section3 recap

Build a Notes app and Tenzies Game

9:51:34 Section 4 Intro
https://scrimba.com/links/figma-react...
https://scrimba.com/links/figma-tenzi...
9:54:09 Warm-up:Add Dark/Light modes to ReactFacts Site
10:00:50 Notes App Intro
10:10:47 Notes App Development
10:44:17 Tenzies Project Intro
https://scrimba.com/links/figma-tenzi...
10:45:38 Tenzies Setup & Game Development
11:24:35 Hold dice part 3
11:28:39 End game
https://github.com/alampros/react-con...
11:40:31 Tenzies: New Game & Extra Credit ideas
11:44:15 Section 4 Solo Project
11:45:53 quiz https://scrimba.com/links/figma-quizz...
11:47:26 OTDB API https://opentdb.com/api_config.php
Check out the class components crash course: https://scrimba.com/playlist/pBpayAz
11:49:32 Congrats on completing Module 1!

[ShannonChenCHN]

YouTube 视频教程：React Crash Course 2024

https://www.youtube.com/watch?v=LDB4uaJ87e0&ab_channel=TraversyMedia

Learn the basics of React, such as components, props, state, data fetching, and more, while building a job listing frontend.

Code:
https://github.com/bradtraversy/react...

Timestamps:

0:00 - Intro
1:55 - What Is React? (Slide)
3:43 - Why React? (Slide)
7:19 - What Are Components? (Slide)
8:21 - What Is State? (Slide)
10:00 - What Are Hooks? (Slide)
11:17 - What Is JSX? (Slide)
12:42 - SPA, SSR, SSG (Slide)
15:38 - Vite (Slide)
16:30 - Project Demo
19:53 - Setup React With Vite
22:29 - File Explanation
25:11 - Boilerplate Cleanup
26:48 - Tailwind CSS Setup
30:24 - JSX Crash Course
39:37 - Start Homepage
42:00 - Navbar Component
43:56 - Image Import
45:24 - Hero Component
46:17 - Props
48:00 - Default Props
48:51 - Wrapper Components
55:14 - JobListings Component
58:50 - Create Lists With map()
1:03:20 - Single JobListing Component
1:05:49 - Limit Jobs to 3
1:07:50 - useState() Hook & Desc Toggle
1:13:07 - Creating an Event
1:14:20 - Updating Component State
1:16:00 - React Icons Package
1:18:00 - React Router Setup
1:20:21 - Create Routes From Elements
1:21:36 - Router Provider
1:22:36 - Homepage Component/Route
1:24:40 - Layouts
1:29:06 - Jobs Page Component/Route
1:30:50 - Link Component
1:34:20 - Custom 404 Page
1:36:55 - Active Links With NavLink
1:41:00 - Conditional Rendering
1:43:10 - JSON Server Setup
1:47:00 - useEffect() & Data Fetching
1:53:07 - Loading Spinner
1:51:06 - Conditional Fetching
1:59:45 - Proxying
2:03:38 - Single Job Page
2:09:04 - useParams() to Get ID
2:12:25 - Data Loaders
2:16:36 - Single Job Output
2:22:00 - Add Job Page
2:23:40 - Working With Forms
2:30:05 - Form Submission
2:35:27 - Pass Function as Prop
2:39:32 - POST Request to Add Job
2:41:45 - Delete Job Button/function
2:45:12 - DELETE Request to Remove Job
2:46:50 - React Toastify Package
2:50:08 - Edit Job Page/Form
2:56:05 - Update Form Submission
2:58:54 - PUT Request to Update Job
3:02:10 - Build Static Assets For Production

[ShannonChenCHN]

YouTube 视频教程：React Crash Course for Beginners - Learn ReactJS from Scratch in this 100% Free Tutorial!

https://www.youtube.com/watch?v=Dorf8i6lCuk&ab_channel=Academind

Get Started with React.js and learn how to build amazing websites with ReactJS! Full Project included, 100% free!

Timestamps:
Introduction 00:00
What is React 00:27
First React Code 04:15
Building SPAs 11:40
React Alternatives 13:41
Creating a React Project 16:48
Setting Up a Code Editor 25:03
Diving Into the Created Project 28:07
How React Works & Understanding Components 34:38
More About Components & Styling with CSS Classes 42:15
Building & Reusing Another Component 47:50
Pros & Dynamic Content 55:09
Handling Events 1:00:27
Adding More Components 1:07:07
Introducing State 1:12:48
Event Props 1:21:07
Adding Routing 1:28:15
Adding Links & Navigation 1:45:07
CSS Modules 1:50:28
Outputting Lists 1:56:14
Adding More Components´2:02:04
Props Children 2:11:52
Adding a Form 2:20:31
Getting User Input & Handling Form Submission 2:29:30
Preparing the App for HTTP 2:39:15
Sending a Post Request 2:46:07
Navigating Programmatically 2:51:25
Getting Started with Fetching Data 2:55:07
useEffect 3:04:32
Introducing React Context´3:14:40
Context Logic & Different Ways of Updating State 3:25:43
Using Context in Components 3:31:37
More Context Usage 3:43:48
Summary 3:50:42

---

Code Files & Snapshots:
Vanilla JS vs React Project Code: https://github.com/academind/react-co...
Style Files & Dummy Data: https://github.com/academind/react-co...
Code Snapshots: https://github.com/academind/react-co...

[ShannonChenCHN]

YouTube 视频教程：React JS Full Course | Build an App and Master React in 1 Hour

https://www.youtube.com/watch?v=b9eMGE7QtTk&ab_channel=JavaScriptMastery

After building this simple, half-hour movie application, imagine what a long and comprehensive 20-hour Next.js course would look like! Check it out now - jsmastery.pro/next15

💻JS Mastery Pro - https://jsmastery.pro?discount=youtube
✅ A special YOUTUBE discount code is automatically applied!

📚 Materials/References:
Ultimate React Roadmap - https://resource.jsmastery.pro/reactj...
JS Mastery PRO - https://resource.jsmastery.pro/pro
Movie App Code - https://gist.github.com/adrianhajdin/...
2022 Web Dev Roadmap - • Become a Full Stack Web Developer in ...
JavaScript Course: https://www.completepathtojavascriptm...

Time Stamps 👇
00:00 Overview
00:13:10 React in Practice
00:41:08 Developing a Project

[ShannonChenCHN]

YouTube 视频教程：Learn React With This One Project

https://www.youtube.com/watch?v=Rh3tobg7hEo&ab_channel=WebDevSimplified

Learning React is hard. There are so many concepts to learn and mindsets shifts that you need to do. That is why in this video I will be breaking down all the most important concepts you need to understand in React.

📚 Materials/References:

React Simplified Course: https://reactsimplified.com
GitHub Code: https://github.com/WebDevSimplified/r...
FREE React Hooks Simplified Course: https://courses.webdevsimplified.com/...
ES6 Modules Video: • JavaScript ES6 Modules
ES6 Modules Article: https://blog.webdevsimplified.com/202...
Destructoring Video: • Why Is Array/Object Destructuring So ...
Destructoring Article: https://blog.webdevsimplified.com/202...
Short Circuiting Video: • If You Don’t Understand Short Circuit...
Short Circuiting Article: https://blog.webdevsimplified.com/201...

⏱️ Timestamps:

00:00 - Introduction
01:10 - What Is React
02:45 - Thinking In React
06:07 - Todo List Project Setup
10:45 - JSX
15:30 - React State
20:15 - Todos Logic
30:45 - Break App Into Components
38:15 - useEffect Hook

[ShannonChenCHN]

YouTube 视频教程：React.JS Full Course - Build 4 Projects in 5 Hours | Zero to Hero

https://www.youtube.com/watch?v=82PXenL4MGg&ab_channel=Smoljames

Learn everything you need to know to start programming with React.JS. We'll do that by completing 4 projects, where each sequential project is a progression from the last and by the end of the course you'll be a React.JS pro and you'll have some amazing projects to add to your portfolio!

⬇️ Resources
VSCode - https://code.visualstudio.com/
NodeJS - https://nodejs.org/en/download
Vite - https://vitejs.dev/guide/
FontAwesome CDN - https://cdnjs.com/libraries/font-awesome
FontAwesome Icons - https://www.fontawesome.com
GitHub Repo - https://github.com/jamezmca/nasa-reac...
Netlify - https://www.netlify.com

-- Project 1
GitHub Repo - https://github.com/jamezmca/reactjs-t...

-- Project 2
NASA - https://api.nasa.gov/
GitHub Repo - https://github.com/jamezmca/nasa-reac...

-- Project 3
GitHub Repo - https://github.com/jamezmca/swoley-fit
Init React w. TailwindCSS - https://tailwindcss.com/docs/guides/vite

-- Project 4
Github repository - https://github.com/jamezmca/free-scribe
Init React w. TailwindCSS - https://tailwindcss.com/docs/guides/vite

📚 Chapters
00:00 Intro
04:09 Todo List
44:05 Nasa App
01:47:00 Gym App
03:09:16 Machine Learning App

🔖 Topics Covered
Learn React.JS
React.JS Full Course
React.JS Projects

[ShannonChenCHN]

YouTube 视频教程：React.JS Full Course | Build & Deploy 3 Modern Web Apps and Get Hired!

https://www.youtube.com/watch?v=iKpkVKubvKk&ab_channel=Smoljames

In this React.JS full course we learn all about development with the React.JS JavaScript framework from the very beginning where we'll build 3 amazing React.JS apps, and deploy them all live in the internet for the world to see. We also learn how we can style apps using FantaCSS, and add authentication and database to create a Full Stack app with Firebase.

🌼 Resources
VSCode - https://code.visualstudio.com/
VSCode Shortcuts - https://www.vscodeshortcuts.smoljames...
FantaCSS - https://www.fantacss.smoljames.com
NodeJS - https://nodejs.org/en/download
GitHub Repo - https://github.com/jamezmca/reactjs-f...
Notes - https://smoljames.com/notes
Vite - https://v3.vitejs.dev/guide/
Pokedex API - https://pokeapi.co/
Firebase - https://firebase.google.com/
FontAwesome CDN - https://cdnjs.com/libraries/font-awesome
FontAwesome Icons - https://www.fontawesome.com
Netlify - https://www.netlify.com

📚 Chapters
00:00 Intro
11:14 Todo App
02:20:49 Pokedex
04:33:25 Coffee Tracker (Full Stack w. Firebase)

🔖 Topics Covered
Learn Full Stack Development with React.JS
How to build apps with React.JS
How to deploy React.JS Apps
Learn React.JS for Beginners
State, props, hooks, components, lifecycle events, styling, Firebase

[ShannonChenCHN]

YouTube 视频教程：Master ReactJS in 7 Hours with 10 Real-World Projects 2023

https://www.youtube.com/watch?v=XrwsMN2IWnE&ab_channel=HuXnWebDev

This comprehensive course is designed to help you master the fundamentals of ReactJS and build interactive web applications from scratch. With over 7 hours of content and 10 real-world projects, this course will provide you with everything you need to become a ReactJS pro.

Starting with the basics of JSX syntax, components, and props, you'll quickly move on to more advanced topics such as state management, advance hooks, and great way to design your state. Along the way, you'll learn how to use popular tools like create-react-app & build dynamic and responsive web applications.

Each section of the course is accompanied by hands-on projects that allow you to apply what you've learned in a practical context. By the end of the course, you'll have built a variety of projects, including a E-Commerce Advance Filtering Project.

Whether you're a complete beginner or have some experience with ReactJS, this course is perfect for anyone looking to level up their skills and build impressive web applications. Start mastering ReactJS today!

Chapters:
00:00:00 - Intro
00:00:18 - What Is React
00:03:47 - Course Requirements
00:05:05 - Installation
00:12:44 - React Structure
00:23:45 - Components
00:32:46 - JSX
00:37:44 - JSX Rules
00:45:46 - Multiple Components
00:50:36 - React Fragments
00:53:56 - Expressions In JSX
1:01:08 - Lists
1:08:47 - Props
1:18:40 - Props Children
1:20:52 - Conditional Rendering
1:31:11 - 5 Ways To Style Components
1:48:00 - React Icons
1:49:20 - Events
1:59:41 - State
2:11:15 - Updating String Values In State
2:13:02 - Updating Arrays Values In State
2:20:01 - Updating Object Values In State
2:23:57 - Updating Arrays Of Objects In State
2:27:31 - Forms In React
2:32:50 - useEffect Hook
2:44:23 - Prop Drilling
2:50:51 - Context API
3:00:35 - useContext Hook
3:03:03 - useReducer Hook
3:10:56 - useRef Hook
3:15:04 - Custom Hooks
3:21:06 - Counter Project
3:28:36 - Todo List Project
3:42:25 - Meal API Project
3:54:11 - Calculator Project
4:08:52 - Toggle Color Project
4:20:01 - Hidden Search Project
4:27:40 - Testimonials Project
4:37:15 - Accordions Project
4:46:53 - Basic Form Validation
5:07:59 - E-Commerce Advance Filtering Project
6:57:29 - Outro

[ShannonChenCHN]

YouTube 视频教程：Build 25 React Projects – Tutorial

https://www.youtube.com/watch?v=5ZdHfJVAY-s&ab_channel=freeCodeCamp.org

Master React by building 25 different projects. If you follow along, you'll be ready to interview for a job as a React developer.

Code:
🔗 20 React JS Simple Projects Link : https://github.com/sangammukherjee/25...
🔗 Weather App : https://github.com/sangammukherjee/we...
🔗 Food Recipe App : https://github.com/sangammukherjee/fo...
🔗 Shopping cart App : https://github.com/sangammukherjee/fo...
🔗 Expense Tracker App : https://github.com/sangammukherjee/ex...
🔗 Mern stack Notes App : https://github.com/sangammukherjee/me...

⭐️ Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:08:02) Accordion
⌨️ (0:31:22) Random Color Generator
⌨️ (0:45:22) Star Rating
⌨️ (0:57:22) Image Slider
⌨️ (1:21:10) Load More Button
⌨️ (1:38:30) Tree View / Menu UI / Recursive Navigation Menu
⌨️ (2:01:52) QR Code Generator
⌨️ (2:09:12) Light and Dark Mode / Theme Switch / Dark Theme
⌨️ (2:26:11) Scroll Indicator
⌨️ (2:43:30) Tabs
⌨️ (2:57:02) Modal Popup
⌨️ (3:13:17) Github Profile Finder
⌨️ (3:36:18) Search Autocomplete with API implementation
⌨️ (3:53:42) Tic Tac Toe
⌨️ (4:16:45) Feature Flag Implementation
⌨️ (4:35:22) useFetch Custom Hook
⌨️ (4:47:15) useOnclickOutside Custom Hook
⌨️ (4:56:42) useWindowResize / useResponsive Custom Hook
⌨️ (5:02:37) Scroll to Top and Bottom
⌨️ (5:11:27) Scroll to Particular Section
⌨️ (5:19:12) Weather App
⌨️ (5:48:24) Food Recipe App
⌨️ (6:45:12) Shopping Cart App
⌨️ (7:37:25) Expense Tracker App
⌨️ (8:29:52) Mern Stack Blog App