search

ShannonChenCHN / FontEndDevTour

0 stars 0 forks source link

React 项目教程 #1

Open ShannonChenCHN opened 2 weeks ago

ShannonChenCHN commented 2 weeks ago

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 commented 1 week ago

综合项目

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

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

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

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

ShannonChenCHN commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

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