React JavaScript Framework for Beginners – Project-Based Course
By freeCodeCamp.org
Published: Aug 31, 2022“
Learn React in this full course for beginners. React is one of the most popular JavaScript frameworks and this course is the perfect place to start your learning journey. You will learn everything you need to know to get started with React by building three different projects.
We brought together three popular teachers for this course so you can learn from multiple perspectives.
You can code React all in a web browser using Replit. Replit provided a grant that made this course possible.
https://join.replit.com/react-students
Part One
Instructor: Gavin Lon
- Gavin’s channel: https://www.youtube.com/c/GavinLon
- Code from video (using Prop Drilling): https://replit.com/@GavinLon/TeamMemb…
- Code alternate (using Context to avoid prop drilling): https://github.com/GavinLonDigital/Te…
- How to Create a Free Replit Account: https://www.freecodecamp.org/news/how…
- What is a repl and how to create one: https://www.freecodecamp.org/news/how…
- Function component vs class component: https://reactjs.org/docs/components-a…
- JavaScript Arrow Functions: https://www.freecodecamp.org/news/jav…
- Hooks and State in React: https://reactjs.org/docs/hooks-state….
- The Bootstrap Grid System: https://getbootstrap.com/docs/5.0/lay…
- Understanding Props in React: https://www.freecodecamp.org/news/how…
- Using Context in React: https://reactjs.org/docs/context.html
Part Two
- Instructor: John Smilga
- Gavin’s channel: https://www.youtube.com/c/CodingAddict
- Complete App: https://meals-application.john-smilga…
- Source Code: https://replit.com/@john-smilga/meals…
Part Three
- Instructor: Sanjeev Thiyagarajan
- Gavin’s channel: https://www.youtube.com/c/SanjeevThiy…
- Code: https://replit.com/@SanjeevThiyagar/r…
Contents
- (0:00:00) Course Introduction
- (0:02:03) Introduction, part 1
- (0:06:15) What is Replit
- (0:07:50) What is React
- (0:08:23) Create a Repl
- (0:11:29) Create Functional Components
- (0:18:02) Install Bootstrap 5
- (0:22:49) Implement the useState Hook in a Functional Component
- (0:29:16) Upload Image Files to Replit
- (0:33:28) Create JSX Code to Render Bootstrap Cards for Employees
- (0:40:49) Create Teams DropDown List
- (0:45:03) Use JavaScript Events to Set State
- (0:54:26) Move State Related Functionality to the App Component
- (0:56:48) Understanding Props
- (1:04:41) LocalStorage and the useEffect Hook
- (1:11:47) Routing, react-router-dom package, Navigation
- (1:25:25) Create Employee Component
- (1:38:03) Abstract Responsibilities Into Functional Components
- (1:46:14) Implement Media Queries
- (1:47:04) Using Context to Reduce or Avoid Prop Drilling
- (1:48:50) Course Wrap up
- (1:49:15) Introduction, part 2
- (1:53:12) Setup
- (2:08:03) Context API
- (2:30:46) Data Fetching
- (2:42:08) Meals Component
- (3:38:29) Search Component
- (4:10:11) Modal Component
- (4:43:04) Favorites Component
- (5:14:27) Introduction, part 3
- (5:20:32) Initialize Project
- (5:22:48) React Router
- (5:30:23) Fetching Data From API
- (5:49:46) Multiple Requests with Promise.all()
- (5:54:05) Map Method for rendering lists
- (6:04:12) Rendering Table of Stocks
- (6:09:12) Color Coding data
- (6:16:55) Autocomplete Search Component
- (6:39:12) Context API
- (6:59:40) Navigating Between Pages
- (7:03:52) Fetching Historical Data
- (7:25:22) Formatting Data
- (7:31:31) Working with Charts
- (7:44:18) Chart Time Toggle
- (7:58:54) Delete Stock (Event Propagation)
- (8:05:26) Stock Data
- (8:16:52) Local Storage
”
Tag: React
[#Script #Coding] React State Management – Intermediate React Course
React State Management – Intermediate React Course
By freeCodeCamp.org
Published: Nov 15, 2022“
React State Management is half of your React app so it is important for React developers to understand. In this full intermediate React tutorial, you will learn how to implement state management using industry best practices.
Jack Herrington created this course. He is a principal full-stack engineer. Check out his channel: https://www.youtube.com/channel/UC6vRUjYqDuoUsYsku86Lrsw
Code: https://github.com/jherr/fcc-state
- (0:00:00) Introduction
- (0:03:27) useState
- (0:18:37) useReducer
- (0:32:29) useMemo & useCallback
- (0:49:43) useEffect
- (1:05:59) useRef
- (1:13:53) Context and Custom Hooks
- (1:41:48) React Query & React Location
- (1:57:26) Zustand
- (2:06:11) Valtio
- (2:12:44) Jotai
- (2:20:51) Redux
- (2:37:56) The new use hook
- (2:44:26) Recommendations
- (2:46:07) Outroduction
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
”
[#Script #Coding] Apache Cassandra Database – Full Course for Beginners
Apache Cassandra Database – Full Course for Beginners
By freeCodeCamp.org
Published: Jul 21, 2022“
Apache Cassandra is an open source NoSQL distributed database. This beginner’s Cassandra course has four modules. The first three modules will cover the basics of Apache Cassandra data modeling. The final module covers practical applications of Cassandra.
Get Started with Astra DB, built on Apache Cassandra: https://astra.datastax.com/register/a…
Course Contents
- (00:30) Module 1: Cassandra Intro and Background
- (21:53) Module 2: Collections, User Defined Types, and Counters
- (31:29) Module 3: Data Modeling
- (1:04:22) Module 4: Practical Applications
Links
- Build scalable API-based Microservices with Spring Boot and Cassandra
https://astra.dev/3vIUwyx- REST API in AstraDB – Introduction and curl: https://www.youtube.com/watch?v=oSVuP…
- https://astra.dev/3rNnOL5
- Build a Reactive app in Apache Cassandra™ with Spring Framework: https://www.youtube.com/watch?v=1aRbn…
- https://astra.dev/3xSxaZW
- Advanced Data Modeling in Apache Cassandra™: https://astra.dev/3xX5QK7
- Introduction to #MachineLearning with Cassandra and Spark: https://astra.dev/39aPqU5
- NoSQL Course from Anna Kubow: https://www.youtube.com/watch?v=xh4gy…
”
[#Script #Coding] Create an Instagram Clone with React, Tailwind CSS, Firebase – Tutorial
Create an Instagram Clone with React, Tailwind CSS, Firebase – Tutorial
By freeCodeCamp.org
Published: Apr 19, 2021“
Learn how to create an Instagram clone with React and JavaScript! This project uses React (custom hooks, useContext, useState, useEffect, useRef), Firebase (Firestore/auth), Tailwind CSS, LoadTest, Lighthouse, Vercel, React Testing Library and Cypress E2E Testing.
This React project has multiple pages: login, sign up, dashboard (to view/like/comment on photos), and user profiles. The sign-in page connects to Firebase when a user tries to sign in, and when a user signs up, Firebase auth is used to store the user in the Firebase auth database. After the application is built you will learn how to deploy it to Vercel.
Course created by Karl Hadwen. Check out his channel: https://www.youtube.com/c/CognitiveSurge
Code: https://github.com/karlhadwen/instagram
Course Contents
- (0:00:00) Introduction
- (0:05:37) Showcase
- (0:15:28) Create React App (yarn)
- (0:18:22) Project Folder Structure
- (0:20:26) Installing Dependencies
- (0:22:47) Refactoring unnecessary files, refactoring code
- (0:29:18) Install ESLint
- (0:33:06) Creating Folder Structure & Architecture
- (0:43:05) Setup Firebase
- (0:44:22) Firestore
- (0:46:44) Firestore Rules
- (0:48:43) Firestore (Collections & Docs)
- (0:51:00) Firebase Authentication
- (0:53:59) Realtime Database (Explanation)
- (0:54:45) createContext in firebase.js
- (1:02:34) Creating App in Firebase
- (1:09:15) Start working on Login Page
- (1:10:17) Install React Router Dom
- (1:18:15) Create Routes
- (1:21:51) Continue working on Login Page (Part 2)
- (1:26:35) Tailwind.css Introduction
- (1:31:34) Continue working on Login Page (Part 3)
- (1:32:35) Install more dependencies
- (1:36:30) Change how all scripts work
- (1:40:21) yarn add postcss -D
- (1:40:57) Create components folder
- (1:34:19) Tailwind.css setup
- (1:35:51) Completed Tailwind Setup, Continue working on Login Page (Part 4)
- (1:39:28) Interjection: Field Value
- (1:41:56) Continue working on Login Page
- (2:01:47) Tailwind.config
- (2:06:05) Login Functionality (with Firebase)
- (2:11:12) Signup Page
- (2:22:53) Check for user created is a duplicate
- (2:54:49) Not Found & Dashboard Page
- (3:01:11) Created Timeline Component
- (3:01:28) Created Sidebar Component
- (3:01:47) Created Header Component
- (3:04:14) use-auth-listener.js Hook
- (3:11:23) users.js UserContext
- (3:15:38) Back to Header Component
- (3:42:21) Working on Dashboard Page
- (3:45:59) Working on Sidebar Component
- (3:46:15) use-user.js hook
- (4:04:20) In user.js ? Introduction to prop types
- (4:25:03) Created Timeline.js
- (4:25:43) Explanation on useMemo
- (4:27:45) Add WhyDidYouRender
- (4:29:53) Struggling with some issues
- (4:42:42) Finally Figuring out some problems with WhyDidYouRender
- (4:50:41) Working on suggestion.js (sidebar completed)
- (4:59:20) Get suggested profiles
- (5:16:28) Functionality: Remove followed user from suggestion
- (5:23:12) Functionality: Update user’s following & followers
- (5:34:18) Overview on Timeline
- (5:40:47) Creating Post Component
- (5:42:57) Creating more custom hooks (usePhotos)
- (6:04:16) Rendering out the photos (using React skeleton)
- (6:10:55) Start work on Post Component
- (6:15:18) Components within Post
- (6:16:03) Header Component
- (6:20:56) Image & Actions
- (6:27:32) Service call in Firebase
- (6:42:44) Show Comments
- (6:51:13) Add Comments
- (7:12:26) Adding Protected Routes
- (7:27:13) Profile
- (7:30:20) Lazy load explanation
- (7:45:23) Continue working on Profile Page
- (7:58:48) Header Component in Profile Page
- (8:02:14) Profile Specific Header
- (8:18:00) Get User Photos
- (8:37:52) Continue working on header
- (9:20:31) Information in header
- (9:37:09) Photos Component in Profile Page
- (9:50:07) Recap of everything we’ve done
- (9:52:55) Start of Review
- (9:55:33) Not found header
- (9:57:04) Review of usePhotos, useUsers, isUserLoggedIn, ProtectedRoute
- (9:58:35) Review of contexts: firebase.js and user.js
- (9:58:57) Review of Routes & Posts
- (10:01:31) loadtest (Npm install -g loadtest)
- (10:15:27) Create a production build
- (10:38:28) Deployment to Vercel done but with issues
- (10:51:47) Issues fixed
- (10:52:19) Lighthouse
- (11:02:27) Wrapping up
- (11:04:13) Changes and Refactoring (Fixing Bugs)
- (11:48:50) Quick Look at Paid Version
- (11:49:59) Cypress
- (11:54:08) Signing Off
[READ MORE]”
[#Video #Design] React – A Practical Tool Review
React – A Practical Tool Review
By School of Motion
Published: Aug 30, 2022“
There are a lot of tools floating around on the Internet, but it can be kind of tough to pick one. React looked promising so we decided to not only review it but to show how it can practically be used in your workflow!
Find React here: https://aescripts.com/react/?aff=33
Autofill: https://aescripts.com/autofill/?aff=33
AEviewer: https://aescripts.com/aeviewer/?aff=33
Keystone: https://aescripts.com/keystone/?aff=33Take your skills to the next level and learn to animate with School of Motion!
schoolofmotion.com/courses”
[#Script #Coding] Top 30 React Interview Questions and Concepts
Top 30 React Interview Questions and Concepts
By freeCodeCamp.org
Published: Sep 12, 2022“
Prepare for a React interview or improve your React skills by learning about 30 common React JS interview questions and concepts.
Nishant Singh developed this course. Check out his channel: https://www.youtube.com/c/Cybernatico…
Course Contents
- (0:00:00) Introduction
- (0:00:43) Map and Filter
- (0:20:06) States in React
- (0:33:33) Props in React
- (0:40:34) Inline Conditional Expressions
- (0:52:04) Event Handling in React
- (0:57:41) Keys in React
- (1:03:25) Forms in React
- (1:18:04) Dynamic Inputs in React
- (1:26:02) CSS Styling in React
- (1:36:47) Uncontrolled v/s Controlled Components
- (1:44:10) Virtual DOM
- (1:46:05) InnerHTML in React
- (1:55:23) React Fragments
- (2:00:02) Stateless v/s Stateful Components
- (2:01:57) REST API Requests
- (2:27:05) Debouncing in React
- (2:38:43) Context API in React
- (2:49:33) Class v/s ClassNames in React
- (2:52:59) Higher Order Components
- (3:06:18) Lazy Loading in React
- (3:14:34) Helper Functions in React
- (3:24:21) Implementing Recursion in React
- (3:27:10) Running Arrays of Functions
- (3:33:08) Custom Hooks in React
- (3:37:22) Promises and Async/Await
- (3:51:52) Code Splitting in React(Dynamic Imports)
- (3:58:18) Creating a Search Filter in React
- (4:13:10) Adding TypeScript to React
- (4:16:36) React Testing Library
- (4:30:41) Caching an API Response
”
[#Script #Coding] React Testing Course for Beginners – Code and Test 3 Apps
React Testing Course for Beginners – Code and Test 3 Apps
By freeCodeCamp.org
Published: May 23, 2022“
In this React testing course, you will learn how to code, test, and deploy 3 different React apps. You will learn how to use React Testing Library, write end-to-end visual tests, and develop comprehensive test strategies. You will also learn how to use testing tools such as Happo.io, Cypress, and Jest.
GitHub Links:
- https://github.com/nadvolod/react-web-app
- https://github.com/nadvolod/js-code/t…
- https://github.com/nadvolod/js-code/t…
Nikolay Advolodkin created this course. Check out his channel: https://www.youtube.com/ultimateqa
Subscribe to Nikolay’s weekly email on JavaScript testing: https://ultimateqa.ck.page/js-testing…
Nikolay’s blog: https://ultimateqa.com/blogCourse Contents
- (0:00:00) Introduction
- (0:01:47) Creating A React App and Deploy to Microsoft Azure
- (0:42:14) Birthday Reminder React App with Full Testing
- (1:18:29) Build & Test A Portfolio Website
”
[#Script #Coding] Event-Driven Architecture with React and FastAPI – Full Course
Event-Driven Architecture with React and FastAPI – Full Course
By freeCodeCamp.org
Published: Aug 11, 2022“
Learn about event-driven architecture by building a real-world project using FastAPI, React, and Redis.
An event-driven system is a common way to set up the software. In an event-driven architecture, event handlers are registered for specific events. When an event occurs, the handlers are invoked.
Frontend code: https://github.com/scalablescripts/re…
Backend code: https://github.com/scalablescripts/fa…Antonio from Scaleable Scripts created this course. Check out his channel: https://www.youtube.com/watch?v=VkPUB…
Course Contents
- (0:00:00) Intro
- (0:04:30) Redis Database
- (0:07:06) FastAPI Setup
- (0:13:02) Create Delivery Endpoint
- (0:19:39) Building the State
- (0:24:34) State Endpoint
- (0:29:29) Dispatching Multiple Events
- (0:54:26) Building the State without Redis
- (1:04:33) Building the Frontend
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
And subscribe for new videos on technology every day: https://youtube.com/subscription_cent…
”
[#Webdesign #Coding] Learn React State In a Single Video (Context, Reducer, Dispatch, Memo)
Learn React State In a Single Video (Context, Reducer, Dispatch, Memo)
By LearnWebCode
Published: May 16, 2022“
Let’s learn about “state” in React. My premium courses and coupons: https://learnwebcode.com/courses/
GitHub link for this video: https://github.com/LearnWebCode/react…
0:00 Intro
- 2:12 Getting Started (First Example)
- 19:12 Multiple Components
- 33:12 Context
- 48:05 Caveat (Unintentional Renders)
- 1:02:19 Reducer
- 1:24:14 Don’t Make Everything Global
Follow LearnWebCode for updates on new videos or projects:
- Instagram: https://www.instagram.com/javaschiff/
- Twitter: https://twitter.com/learnwebcode
- Facebook: https://www.facebook.com/Brad-Schiff-…
- Twitch: https://www.twitch.tv/learnwebcode
”
[#Script #Coding] Learn React by Building an eCommerce Site – Tutorial
Learn React by Building an eCommerce Site – Tutorial
By freeCodeCamp.org
Published: Oct 27, 2021“
Learn React by building an e-Commerce application with Class Components.
You will learn component basics, rendering various items in components, parent-to-child component communication, lifecycle methods, forms, REST-API calls with JSON server, and basic routing.Source code: https://github.com/webuniversity/react-free-code-camp
This course was developed by Mr. Harsha Vardhan. Check out his Youtube channel: https://www.youtube.com/c/harshaglobal
Complete React course with Hooks and Redux by Harsha Vardhan:
https://www.udemy.com/course/react-fo…Course Contents
- (0:00:00) Introduction
- (0:03:45) What is React
- (0:12:52) Understanding Components
- (0:19:05) Create New React App
- (0:29:41) React React App From Scratch
- (0:44:19) Load Bootstrap
- (0:52:14) Create React Components
- (1:07:55) Add CSS Styles
- (1:11:10) Add Bootstrap NavBar
- (1:18:22) Fix Error – DOM property class
- (1:21:54) Nested Components
- (1:35:35) Render Expressions
- (1:41:31) Handle Events
- (1:47:11) Update Component State
- (1:51:58) Render List
- (2:00:13) Render Conditionally
- (2:05:53) Render Methods
- (2:13:46) Render Images
- (2:18:32) Render CSS Styles
- (2:25:19) Render CSS Classes
- (2:29:36) Pass Event Arguments
- (2:40:57) Render Child Components
- (2:49:58) Props
- (3:02:48) Props vs State
- (3:12:11) Props.Children
- (3:16:15) Handle Child Events
- (3:41:59) Delete Child Components
- (3:52:57) Life Cycle Phases of Components
- (3:57:22) Mounting Phase
- (4:07:45) Updating Phase
- (4:17:16) Unmounting Phase
- (4:22:10) Life Cycle of Child Components
- (4:30:02) Error Handling Phase
- (4:36:16) Basic Form
- (4:45:01) Two-Way Binding
- (4:56:36) Form Submit Button
- (5:04:51) HTTP Requests
- (5:18:09) Async and Await
- (5:25:28) Login Form with HTTP Request
- (5:34:00) Basic Routing
- (5:40:15) “404” Page
- (5:43:51) Switch
- (5:45:20) Link
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
”