Welcome to Bootcamp AI
Access the Career Portal
How Do I Find Time for My Nanodegree?
Why React
Mastering React begins with learning your fundamentals, and this can pose a bit of a challenge, because while the modularity of the React ecosystem makes it really powerful for building applications, there is a great deal to learn. So we’ll break everything down, and enable you to learn the foundational parts of the React ecosystem that are necessary to build production-ready apps.
As this is a project-based course, you’re going to start building right away. This gives you an opportunity to get your hands dirty with React, and start mastering the skills you’ll need. Plus, every project you build is reviewed by an expert Project Reviewer, and their detailed feedback will be instrumental in helping you to advance.
04. Unidirectional Data Flow0:45
05. React Is Just JavaScript0:36
05. React Is Just JavaScript (Practice)00:00
05.2 React Is Just JavaScript00:00
05.3 React Is Just JavaScript00:00
05.4 React Is Just JavaScript
06. Lesson Summary0:06
Rendering UI with React
02.2 Creating Elements and JSX00:00
02.2 Quiz
02.3 Creating Elements and JSX00:00
02.3 Quiz
02.4 Creating Elements and JSX00:00
02.5 Creating Elements and JSX00:00
02.6 Creating Elements and JSX00:00
03. Create React App00:00
03.2 Create React App00:00
03.3 Create React App00:00
04. Composing with Components00:00
04.2 Composing with Components00:00
05. Rendering UI Outro00:00
State Management
01. Introduction00:00
02. Pass Data With Props00:00
02.2 Pass Data With Props00:00
02.3 Pass Data With Props00:00
03. Functional Components00:00
04.2 Add State To A Component00:00
05. Update State with setState00:00
06. PropTypes00:00
07. Controlled Components00:00
07.2 Controlled Components00:00
07.4 Controlled Components00:00
08. Lesson Summary
Render UI with External Data
01. Introduction00:00
02. componentDidMount Lifecycle Event00:00
02.2 componentDidMount Lifecycle Event00:00
02.3 componentDidMount Lifecycle Event00:00
03. Lesson summary
Managing App Location with React Router
01. Introduction00:00
02. Dynamically Render Pages00:00
02.2 Dynamically Render Pages00:00
03. The BrowserRouter Component00:00
03.2 The BrowserRouter Component00:00
03.3 The BrowserRouter Component00:00
04. The Link Component00:00
04.2 The Link Component00:00
05. The Route Component00:00
05.2 The Route Component00:00
06. Finishing The Contact Form00:00
06.2 Finishing The Contact Form00:00
06.3 Finishing The Contact Form00:00
07. Lesson Summary00:00
08. Course Outro00:00
MyReads A Book Tracking App
02. Project Overview00:00
03. Project Instructions Rubric
04. Above and Beyond00:00
05. Your Project Workspace00:00
06. MyReads Project Workspace00:00
Project Description – MyReads A Book Tracking App
Project Rubric – MyReads A Book Tracking App
Why Redux
Redux excels at state management, and in this course, you’ll learn how Redux and React work together to make your application’s state bulletproof.
As with the previous course, this is hand-on curriculum, and building projects is what it’s all about. Here, you’ll leverage React with Redux to build “Would You Rather”, a popular party game.
01. Introduction00:00
01.2 Introduction00:00
02. What is ReduxWhy does it exist00:00
03. How Redux Improves Predictability00:00
04. Redux Stores vs Component State00:00
05. Pure Functions00:00
05.2 Pure Functions00:00
06.2 Array’s .reduce() Method1:16
06. Array’s .reduce() Method (Practice1)00:00
06. Array’s .reduce() Method (Practice2)00:00
06. Array’s .reduce() Method (Practice3)00:00
07. Lesson summary00:00
Redux At Its Core
01. Introduction00:00
01.2 Introduction00:00
02. Create Actions00:00
02.2 Create Actions (Practice)00:00
02.3 Create Actions00:00
03. Create Reducers00:00
03. Create Reducers (Practice)00:00
03.2 Create Reducers00:00
03.3 Create Reducers00:00
04. Create A Redux Store00:00
04.2 Create A Redux Store00:00
04.3 Create A Redux Store00:00
05. All Together Now!00:00
05. All Together Now!
06. Lesson summary00:00
React Redux
01. Introduction
02. Provider00:00
02.2 Provider00:00
03. Currying (Practice)00:00
04. Connect00:00
04.2 Connect00:00
04.3 Connect00:00
05. Lesson Summary00:00
Architect A Redux Store
01. Introduction00:00
02. combineReducers00:00
02.2 combineReducers00:00
02.3 combineReducers00:00
03. Normalization00:00
04. Finish the App!00:00
04.2 Finish the App!00:00
04.3 Finish the App!00:00
05. Lesson Summary00:00
Redux Middleware
01. Introduction00:00
02. What is Middleware00:00
03. Implementing Middleware00:00
04. Thunks00:00
05. App Structure Organization
06. Lesson summary00:00
07. Course Outro00:00
Readable
01. Project Overview
02. Project Development Guidelines
03. Project Workspace Info
04. Readable Project Workspace00:00
Project Description – Readable
Project Rubric – Readable
Up and Running with React Native
01. Introduction00:00
02. What is React NativeWhy does it exist00:00
04.2 Dev Environment Setup00:00
05. Using the Debugger00:00
05.2 Using the Debugger00:00
06. Lesson Summary00:00
03. What is React Native/Why does it exist?00:00
React vs React Native
01. Introduction00:00
02. Web vs Native00:00
03. Common React Native Components00:00
03.2 Common React Native Components00:00
03.3 Common React Native Components00:00
03.4 Common React Native Components00:00
03.5 Common React Native Components00:00
03.6 Common React Native Components00:00
03.7 Common React Native Components00:00
03.8 Common React Native Components00:00
03.9 Common React Native Components00:00
03.10 Common React Native Components00:00
03.11 Common React Native Components00:00
03.12 Common React Native Components00:00
03.13 Common React Native Components00:00
03.14 Common React Native Components00:00
03.17 Common React Native Components00:00
03.18 Common React Native Components00:00
04. AsyncStorage
05. Redux and React Native
06. Lesson Summary
Styling Layout
01. Introduction00:00
04. Layout In React Native00:00
05. How Professionals Handle Styling00:00
06. Lesson Summary00:00
04.2 Layout In React Native00:00
04.3 Layout In React Native00:00
04.4 Layout In React Native00:00
04.5 Layout In React Native00:00
04.7 Layout In React Native00:00
04.8 Layout In React Native00:00
04.9 Layout In React Native00:00
04.10 Layout In React Native00:00
04.11 Layout In React Native00:00
05.2 How Professionals Handle Styling00:00
Navigation
01. Introduction00:00
03. Stack Navigator00:00
04. Drawer Navigator00:00
05. Lesson Summary00:00
02.2 Tab Navigator00:00
02.3 Tab Navigator00:00
03.2 Stack Navigator00:00
03.3 Stack Navigator00:00
03.4 Stack Navigator00:00
03.5 Stack Navigator00:00
03.6 Stack Navigator00:00
Native Features
01. Introduction00:00
03. Animations00:00
04. Local Notifications00:00
05. Handling Photos00:00
06. App Store Preparation00:00
07. Lesson Summary00:00
08. Course Outro00:00
01.2 Introduction00:00
02.2 Geolocation00:00
02.3 Geolocation00:00
02.4 Live-Granted00:00
02.5 Live-SetLocation00:00
02.6 Live-AskPermission00:00
03.2 Animations00:00
04.2 Local Notifications00:00
04.3 Local Notifications00:00
05.2 Handling Photos00:00
06.2 App Store Preparation00:00
06.3 App Store Preparation00:00
Mobile Flashcards
01. Project Details00:00
Project Description – Mobile Flashcards
Project Rubric – Mobile Flashcards
Congratulations! What’s Next
01. Leveraging Your Skillset
02. Moving Forward
01. Rendering UI Intro
React uses JavaScript objects to create React elements. We’ll use these React elements to describe what we want the page to look like, and React will be in charge of generating the DOM nodes to achieve the result.
Recall from the previous lesson the difference between imperative and declarative code. The React code that we write is declarative because we aren’t telling React how to do things; instead, we’re writing React elements that describe what the page should look like, and React does all of the implementation work to get it done.
Enough theory, let’s get to it and create some elements!
