Build Production-Ready Apps in React

Focused View

Sandy Ludosky

4:26:59

216 View

01 - Introduction

01 - Build a stellar single-page application with React.mp4

00:56

02 - 1. Getting Started and Setting Up

01 - What you should know.mp4

02:23

02 - The tools and the exercise files.mp4

03:35

03 - The React CLI and the React Developer Tools.mp4

06:05

04 - Project overview.mp4

03:16

03 - 2. Start a New React Project

01 - Add Bootstrap 5 to your single-page application.mp4

05:01

02 - Build a responsive layout with Bootstrap 5.mp4

04:59

03 - Build the UI and create reusable components.mp4

05:21

04 - Pass props to child components.mp4

02:42

05 - Challenge Thinking in React.mp4

01:32

06 - Solution Breaking up the UI.mp4

04:41

04 - 3. From Stateless to Stateful React Components

01 - Introduction to Hooks API Reference.mp4

02:52

02 - Learn event handling and updating the state.mp4

04:12

03 - Handle conditional rendering.mp4

03:47

04 - Work with forms.mp4

04:01

05 - Submit the form and apply side effects useEffect.mp4

05:32

06 - Validate and submit forms useMemo.mp4

06:11

07 - Handle complex logic with useReducer.mp4

05:34

08 - Create and dispatch actions.mp4

04:37

09 - Compose and update the UI.mp4

06:01

05 - 4. Manage the State of Your App with the Context API

01 - Create a context object.mp4

02:49

02 - Set up a Provider component to encapsulate the application logic.mp4

04:48

03 - Challenge Manage a global state.mp4

03:58

04 - Solution Allow components to subscribe to context changes.mp4

06:25

06 - 5. Add Firebase to Your React Project

01 - Introduction to the Firebase Google console.mp4

01:31

02 - Create a new project and a new application.mp4

03:02

03 - Install the Firebase services SDK.mp4

03:53

07 - 6. Create and Connect to a Database (Firestore)

01 - Get started with the Cloud Firestore.mp4

03:00

02 - Learn to add and manage data.mp4

05:00

03 - Set a new document and store and sync data into the Cloud Firestore.mp4

05:53

04 - Learn to read data from a collection.mp4

05:32

05 - Get documents and display them in the app.mp4

05:18

06 - Define React environment variables.mp4

04:39

08 - 7. Create a Bucket to Store Images (Cloud Storage)

01 - Get started with Cloud Storage on the web.mp4

03:13

02 - Define an async function to send a file to storage.mp4

05:35

03 - Upload a file to the storage.mp4

03:17

04 - Download a file URL from storage.mp4

06:10

05 - Set documents with images Update the UI.mp4

05:27

06 - Set documents with images Set the date.mp4

04:10

09 - 8. Authenticate and Manage Users (Firebase Auth)

01 - Start with Firebase Authentication and select the provider.mp4

02:57

02 - Google Cloud Platform Create new credentials.mp4

03:17

03 - Authenticate and manage users from the application.mp4

05:46

04 - Manage the state with the Context API Component Provider.mp4

05:03

05 - Manage the state with the Context API Custom hook.mp4

05:34

06 - Subscribe components to the context changes User connected.mp4

04:59

07 - Create new documents with the user connected.mp4

05:26

08 - Secure your data in Cloud Firestore and Cloud Storage.mp4

05:43

10 - 9. Client-Side Routing with React-Router V6

01 - Install React router DOM v6.mp4

02:53

02 - Configure the routes and create a navigation component.mp4

02:51

03 - Use Link component to navigate between pages.mp4

04:58

04 - Allow navigation between multiple views.mp4

05:39

05 - Conditional rendering and protected route.mp4

04:45

06 - Use the React router hooks useNavigate.mp4

04:58

07 - Use the React router hooks useLocation.mp4

04:35

08 - Create the routes for NotFound and Profile.mp4

05:15

09 - Display the active link.mp4

03:42

11 - 10. Filtering, Searching, and Learning to Debug

01 - Implement a search and filter function.mp4

03:44

02 - Create a new action to return filtered results.mp4

04:53

03 - Subscribe to the context changes and apply side effects in the UI.mp4

02:40

12 - 11. Deploy Your React App (Firebase Hosting)

01 - Install the Firebase CLI and initialize a new project.mp4

05:11

02 - Create a production build and deploy your site to the cloud.mp4

04:44

13 - Conclusion

01 - Last words and next steps.mp4

00:28

Description

Do you need to build applications with ReactJS, the popular JavaScript front-end framework developed by Meta (formerly Facebook)? In this course, web developer and trainer Sandy Ludosky guides you through the process of building a single-page application efficiently, using built-in utilities and out-of-the-box tools. Learn how to set up the tools and files that you will need for this course, then step through starting a new React project. Explore tools to help you move from stateless to stateful React components, and go over how to use the Context API to manage the state of your app. Find out how to add the Firebase to your React project, then connect to a Cloud Firestore database. Dive into functionality like creating a bucket to store images, authenticating and managing users, and implementing client-side routing with React-Router V6. Learn about filtering, searching, and debugging. Plus, go over how to deploy your React app using Firebase Hosting.

More details

User Reviews

Rating

average 0

Total votes0

Focused display

React

React Native

Sandy Ludosky

Instructor's Courses

HelloI am Sandy, freelance web and mobile Developer based out of Toronto, in Ontario, Canada, I specialize in Front-End development with HTML, CSS, CSS3 Animation, Sass, Javascript and JQuery. I love creating beautiful, professional and user-friendly websites using the Adobe Creative Suite: Photoshop, Illustrator and Flash to name a few. I am also keen on Web marketing, Web analytics, Visual Design, Video Editing, Photography and WordPress development. On top of being a Udemy instructor, I am an avid learner of new technologies and digital stuff. *****************************Bonjour,Je suis Sandy, développeur javascript. Je suis passionnée de développement Front (HTML, CSS, CSS3 Animation, Sass, Javascript et ReactJS...).Mes autres intérêts sont le graphisme et motion design. Je suis également passionnée de conception visuelle, montage vidéo, photographie et gaming.Venez rejoindre ma communauté de 20k+ apprenants. Je publie régulièrement pour enrichir mon catalogue de nouveaux contenus. Depuis 2014, je partage mes connaissances, aussi bien en français qu'en anglais, sur les technologies Front et javascript qui ne cessent d'évoluer et d'offrir de nouvelles fonctionnalités pour faciliter notre réussite dans ce beau métier du développement et de la transformation digitale.Salutations !

Linkedin Learning

View courses Linkedin Learning

LinkedIn Learning is an American online learning provider. It provides video courses taught by industry experts in software, creative, and business skills. It is a subsidiary of LinkedIn. All the courses on LinkedIn fall into four categories: Business, Creative, Technology and Certifications. It was founded in 1995 by Lynda Weinman as Lynda.com before being acquired by LinkedIn in 2015. Microsoft acquired LinkedIn in December 2016.