The Complete React Bootcamp 2023 (Updated)

Focused View

Arash Ahadzadeh

16:37:24

26 View

434303 001 Introduction.mp4

03:31

434303 002 Requirements.mp4

01:30

434303 003 Introduction to the First Section.mp4

00:14

434303 004 Installing Git + Git Bash.mp4

04:41

434303 005 Installing Node.js.mp4

01:57

434303 006 Installing VSCode.mp4

01:48

434303 007 VSCode Configuration & Extensions.mp4

05:43

434303 008 Client Side Rendering SPA VS. Server Side Rendering dynamic and static.mp4

12:52

434303 009 What are Server, JSON, REST API and GraphQL.mp4

08:03

434303 010 Working With Git Part 1.mp4

19:51

434303 011 Working With Git Part 2.mp4

17:38

434303 012 What are Node.js and NPM.mp4

18:09

434303 013 What are ESLint and Prettier.mp4

10:21

434303 014 VS Code Shortcuts.mp4

02:25

434303 015 Introduction to JavaScript.mp4

00:49

434303 016 Var VS. Let VS. Const.mp4

04:53

434303 017 What is Array.map used for.mp4

03:55

434303 018 What is Array.reducer used for.mp4

04:06

434303 019 Function Declaration VS. Expression.mp4

02:58

434303 020 Arrow Functions and Default Function Arguments.mp4

03:31

434303 021 String Interpolation.mp4

02:23

434303 022 Object and Array Destructuring.mp4

05:57

434303 023 Spread and Rest Operators.mp4

08:07

434303 024 Async and Sync Code Promises and Async Await.mp4

14:48

434303 025 What is React.mp4

02:18

434303 026 Component based Approach.mp4

03:39

434303 027 Functions vs. Classes.mp4

00:51

434303 028 React Under the Hood.mp4

03:31

434303 029 Introduction to the First Project.mp4

00:52

434303 030 Scaffolding a React App With Parcel Installing Development Dependencies..mp4

09:57

434303 031 Installing Dev Dependencies.mp4

04:55

434303 032 Creating New Components & Props.mp4

11:33

434303 033 Children Props.mp4

02:08

434303 034 Styling React Components Our Style Structure.mp4

09:39

434303 035 Creating a Game Board State React States and Events.mp4

17:51

434303 036 Component Lifecycle & Lifecycle Events.mp4

06:07

434303 037 Winner Calculation State Sharing Across Components.mp4

08:02

434303 038 Adding Game History Part 1.mp4

07:05

434303 039 Adding Game History Part 2.mp4

08:56

434303 040 Conditional Rendering.mp4

07:11

434303 041 Highlighting Winning Combination.mp4

06:49

434303 042 Styling The Entire App.mp4

12:55

434303 043 Deployment to Surge.mp4

03:09

434303 044 Summary.mp4

01:05

434303 045 Introduction to the Box Office Project.mp4

02:02

434303 046 Scaffolding the Project.mp4

11:58

434303 047 Creating Pages in React React Router Part 1.mp4

07:14

434303 048 Creating Navigation Bar & Page Components.mp4

06:06

434303 049 Multiple Layout Management Creating Main Layout.mp4

05:10

434303 050 Creating Search Bar Working With an API.mp4

10:18

434303 051 Displaying API Results Custom Render Function.mp4

07:22

434303 052 Adding Actors Search With Radio Buttons.mp4

08:30

434303 053 Creating Preview Cards for Show and Actors.mp4

14:07

434303 054 Styled components An Alternative for Styling.mp4

10:24

434303 055 Creating Show Page UseEffect Hook and Dynamic URLs.mp4

11:57

434303 056 Displaying Loading and Error Messages Part 2.mp4

06:00

434303 057 Reducer Concept for State Management.mp4

02:13

434303 058 Creating Show Page Part 3.mp4

08:18

434303 059 Creating Show Page Part 4.mp4

09:24

434303 060 Styling Show Page Part 5.mp4

06:46

434303 061 Creating Custom Hook For Data Persistence.mp4

09:09

434303 062 Dynamic Styles With Styled Components.mp4

08:26

434303 063 Displaying Starred Shows.mp4

07:01

434303 064 Extract any Logic you want Custom Hook.mp4

07:33

434303 065 Styling The Entire App Part 1.mp4

07:35

434303 066 Styling The Entire App Part 2.mp4

07:20

434303 067 Add Animation to Elements.mp4

02:42

434303 068 Deployment to GitHub Pages.mp4

05:26

434303 069 Component Optimization With Hooks.mp4

17:01

434303 070 Creating a Progressive Web App PWA.mp4

07:16

434303 071 What is Firebase.mp4

01:47

434303 072 Overview of Firebase Services.mp4

05:05

434303 073 Firebase Security.mp4

01:50

434303 074 Firebase Pricing.mp4

01:02

434303 075 Project Overview.mp4

08:47

434303 076 Scaffolding the Project.mp4

07:55

434303 077 Create and Configure the Firebase Project.mp4

11:09

434303 078 Creating Pages Private and Public Routes.mp4

07:56

434303 079 Sign in Page Interaction with Firebase.mp4

21:24

434303 080 Creating Profile Context Context API and Global State Management.mp4

09:27

434303 081 Global Profile State Management With Context.mp4

12:34

434303 082 Start Building the Sidebar and Dashboard.mp4

07:43

434303 083 Responsive Sidebar Using Media Query.mp4

03:16

434303 084 Creating Dashboard Part 1.mp4

05:42

434303 085 Creating Dashboard Reusable and Editable Components Part 2.mp4

12:42

434303 086 Creating Dashboard Update User Nickname Part 3.mp4

04:10

434303 087 Creating Dashboard Link Social Media Providers Part 4.mp4

16:42

434303 088 Creating Dashboard Creating Avatar Part 5.mp4

13:10

434303 089 Creating Dashboard Uploading the Avatar to Firebase Part 6.mp4

12:27

434303 090 Creating Dashboard Displaying User Avatar and Names Initials Part 7.mp4

07:37

434303 091 Add Create Room Button and Functionality.mp4

17:36

434303 092 Creating Chat Rooms Lists Part 1.mp4

08:49

434303 093 Creating Chat Rooms List Rooms context Part 2.mp4

05:47

434303 094 Creating Chat Rooms List Show rooms and use them as links Part 3.mp4

06:11

434303 095 Creating Nested Layout for Homepage.mp4

06:41

434303 096 Creating Chat Page Layout Component.mp4

05:06

434303 097 Context API Problem and a Potential Solution.mp4

02:41

434303 098 Context API Problem in Practice Creating Current Room Context.mp4

07:54

434303 099 Creating Initial Chat Top Part.mp4

06:44

434303 100 Denormalizing Data Creating Chat Bottom.mp4

14:30

434303 101 Display Last Message in Room List.mp4

03:23

434303 102 Working With Denormalized Data.mp4

10:21

434303 103 Displaying Chat Messages.mp4

07:17

434303 104 Display User Profile Data.mp4

04:53

434303 105 Adding Real time Presence Part 1.mp4

08:32

434303 106 Adding Real time Presence Part 2.mp4

07:42

434303 107 Adding Edit Room Drawer.mp4

08:33

434303 108 Role based Access & Security Rules.mp4

09:56

434303 109 Role based Access Management.mp4

08:43

434303 110 Adding Programmatical Hover With Hooks.mp4

02:50

434303 111 Creating IconControl Component Likes Part 1.mp4

06:20

434303 112 Likes Functionality Part 2.mp4

07:20

434303 113 Handle Delete Operation.mp4

06:22

434303 114 Adding the Upload Component Part 1.mp4

12:39

434303 115 Store Uploaded Files in Database Part 2.mp4

04:16

434303 116 Display and Download Uploaded Files Part 3.mp4

06:10

434303 117 Record and Upload Audio Messages Part 4.mp4

08:40

434303 118 Display Audio and Delete File Part 5.mp4

04:50

434303 119 Group Chat Feed by Dates.mp4

06:56

434303 120 Pagination and Control of Scrolled Position.mp4

12:52

434303 121 Deployment to Firebase Hosting.mp4

02:09

434303 122 Firebase Project Plan.mp4

01:15

434303 123 What are Serverless and Containers.mp4

03:31

434303 124 Cloud Messaging How is Everything Connected.mp4

01:28

434303 125 Storing Device Tokens in the Database.mp4

08:06

434303 126 Adding Service Worker.mp4

03:17

434303 127 Setup Cloud Functions and Node Version Manager NVM.mp4

06:35

434303 128 Notifications Flow in our app Types of Cloud Functions.mp4

01:56

434303 129 Creating FCM Cloud Function.mp4

19:55

434303 130 Fix Cloud Function Errors.mp4

01:15

434303 131 Sending and Displaying Notifications Using Cloud Functions.mp4

15:01

434303 132 Managing FCM Users.mp4

11:27

434303 133 Key Features of React.mp4

00:28

434303 134 React Portals.mp4

04:41

434303 135 Error Boundaries.mp4

05:52

434303 136 Code Splitting.mp4

04:40

434303 137 Conclusion.mp4

00:35

434303 138 Summary Knowledge you Have Gained.mp4

02:19

434303 139 Your Future Moves.mp4

03:54

Description

Created with up-to-date versions of React, React Hooks, Node.js, JavaScript, and Firebase.

------

What is this course all about?

This course is about React - a library that helps developers to create user interfaces on the web. But React is not limited only to user interfaces, there is much more to that.

Have you ever wondered how Facebook, Twitter, or Netflix websites are built and why they don't feel like websites at all? React can answer all of that. In this course, we show how to create mobile-feel-like websites (Single Page Apps) where React is the foundation.

First, we will guide you through the basics of web development before jumping into React. Here we will talk about the latest JavaScript, Node.JS, Git, APIs, and essential tools to make you feel as comfortable as possible at any stage of the development process.

Then we slightly move to React with a small portion of theory. At this point, you will get to know what React is made of and how it works.

Our first project is a Tic-Tac-Toe game. Here you will get to know React basics, hooks and core functionality. By the end of this project, you will be able to create a simple web app that shows off your strong React basics. Here you will experience the development flow of a React app in general.

The second project is a movie search web-app called Box Office. With this project, we move towards more complex React use-cases and we start working with external APIs, dynamic layout and pages combined with different approaches for styling a React app. Here we will work with more advanced and custom React Hooks. At the end of this project we will analyse and optimize the app with React hooks to make it even more faster and reliable. We will even turn it into a Progressive Web App that works offline!

The final project is going to be a Chat app. It will include the following features: social media logins, account management, role-based permissions, real-time data, and lots of others. In this project we will combine React with Firebase - a backend solution in the cloud, powered by NoSQL database. You will master global state management with Context API and sharpen your knowledge of React hooks. At the final stage, we will extend the app with custom backend in form of serverless.

All of our projects will have a user-friendly and well-designed user interface that is responsive and optimized for all devices.

Is this course exactly what are you looking for?

If ...

... you are eager to learn front-end development with React from scratch ...
... you have some experience with React, but you don't feel confident ...
... you only started to learn web development and want to move towards modern tools and technologies ...
... you feel that you stuck doing only HTML, CSS and some JS ...

... then this course is definitely for you!

What do you need to succeed in this course?

HTML and CSS is absolutely required
General/basic understanding of programming or JavaScript
No prior experience with React or JS frameworks
Passion to learn new things :)

After this course, you will have:

Three real-world React projects of different complexity that can be put into your resume
Total React comprehension
Experience with popular React libraries
Knowledge of how to create and deploy React apps
Knowledge of custom serverless backend and Firebase

Topics that will be covered and explained:

React basics (syntax, core concepts, theory)
Scaffolding templates (create-react-app, nano-react-app /w Parcel)
Styling of React apps (CSS, SASS, UI components library, CSS-IN-JS /w Styled components)
Conditional rendering (dynamic content and styles)
State management, local + global (/w React Hooks, Context API)
Components analysis and optimization (/w React hooks)
Complex layout management
Dynamic pages with React Router
Progressive Web Apps and service workers
Real-time subscriptions in React
Using external APIs to fetch remote data
Deployment of React apps
Serverless backend with cloud functions
Latest and modern JavaScript (ES6 - ES2020)

Not part of React, but included:

Git, Node.js, APIs, ESLint and Prettier quick guides
Firebase (/w NoSQL realtime database, cloud functions, cloud messaging, cloud storage)
Serverless cloud computing idea and concept + explanation about docker containers

What if you stuck during the course?

Getting stuck is the worse and inevitable. At the same time it's a common thing for a developer. We understand that and we are always ready to help you out with your questions as quickly as possible.

What are you waiting for? Start the class today!

Who this course is for:

Anyone who wants to develop scalable web-apps with React
Programmers who want to increase their value as web developers
People who are eager to learn how modern web-apps are working and how everything is connected
Anyone who wants to develop applications like Facebook or Twitter
Anyone who wants to become a freelancer or an independent web app developer

What You'll Learn?

Technology
Web Development
CSS
User Experience
Javascript
HTML5
JSLint

More details

User Reviews

Rating

average 0

Total votes0

Focused display

React

Arash Ahadzadeh

Instructor's Courses

I am a UI/UX Designer & an iOS developer with having almost four years of experience in application development and also ten years of graphic design and UI/UX design.
My passion is helping people to learn new skills in a short-term course and achieve their goals. I've been designing for more than ten years and developing iOS apps for four years. It's my honor if I could help you to learn to program in a simple word. I currently am teaching, Figma, Sketch, iOS 15, Swift, Illustrator, Photoshop, Cinema 4d, HTML, CSS, JavaScript, etc.

SkillShare

View courses SkillShare

Skillshare is an online learning community based in the United States for people who want to learn from educational videos. The courses, which are not accredited, are only available through paid subscription.