Nanodegree key: nd019
React is completely transforming the Front-End Development landscape. Come master this powerful UI library, and learn career-ready skills with Udacity.
Part 01 : Introduction
The React Nanodegree program is comprised of 3 courses and 3 projects. Each project you build will be an opportunity to demonstrate what you’ve learned in your lessons. Your completed projects become part of a career portfolio that will demonstrate your mastery of React to potential employers.
Module 01: Introduction
Lesson 01: Welcome to the React Nanodegree Program
Welcome! Our goal is to equip you with the skills you'll need to become a professional React developer. Let's get started!
Lesson 02: Get Help with Your Account
What to do if you have questions about your account or general questions about the program.
Lesson 03: Mentor Help, Peer Chat, and Careers
You are starting a challenging but rewarding journey! Take 5 minutes to read how to get help with projects and content.
Part 02 : React Fundamentals
While the modularity of the React ecosystem makes it really powerful for building applications, there is a great deal to learn. In this first course, you will 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.
Module 01: React Fundamentals
Lesson 01: Why React
Lesson 02: Rendering UI with React
You'll learn how React creates and renders elements. You'll also convert manual element creation to JSX, use create-react-app to scaffold projects, and get a brief intro to Components.
Lesson 03: State Management
You'll learn how to pass data into a component, how to create Functional Components, when and how to use PropTypes, and how to create controlled components.
- Concept 01: Introduction
- Concept 02: Pass Data Into Components With Props
- Concept 03: Exercises - Preface
- Concept 04: Exercise 1 - Passing Data
- Concept 05: Exercise 2 - Passing Data
- Concept 06: Functional Components
- Concept 07: Exercise - Functional Components
- Concept 08: Add State To A Component
- Concept 09: Update state with setState
- Concept 10: Exercise - Managing State
- Concept 11: PropTypes
- Concept 12: Controlled Components
- Concept 13: Exercise 1 - Controlled Components
- Concept 14: Exercise 2 - Controlled Components
- Concept 15: Lesson Summary
- Concept 16: Exercise 1 - All Together
- Concept 17: Exercise 2 - All Together
Lesson 04: Lifecycle Events
You'll learn where to fetch remote data in a React application. You'll also learn about the different lifecycle hooks and how to use them.
Lesson 05: React Router
You'll learn how to add routing to a React app by using React Router. You'll learn about the BrowserRouter, Link, and Route components to dynamically render pages.
Lesson 06: MyReads: A Book Tracking App
In the MyReads project, you'll create a web application that allows you to select and categorize books you have read, are currently reading, or want to read.
Project Description - MyReads: A Book Tracking App
Part 03 : Career Support
GitHub and LinkedIn are both widely used by tech recruiters to find and evaluate job candidates. Get personalized feedback on how to improve yours! You may elect to opt-out of these projects.
Module 01: Career Support
Lesson 01: Take 30 Min to Improve your LinkedIn
Find your next job or connect with industry peers on LinkedIn. Ensure your profile attracts relevant leads that will grow your professional network.
Project Description - Improve Your LinkedIn Profile
- Concept 01: Get Opportunities with LinkedIn
- Concept 02: Use Your Story to Stand Out
- Concept 03: Why Use an Elevator Pitch
- Concept 04: Create Your Elevator Pitch
- Concept 05: Use Your Elevator Pitch on LinkedIn
- Concept 06: Create Your Profile With SEO In Mind
- Concept 07: Profile Essentials
- Concept 08: Work Experiences & Accomplishments
- Concept 09: Build and Strengthen Your Network
- Concept 10: Reaching Out on LinkedIn
- Concept 11: Boost Your Visibility
- Concept 12: Up Next
Lesson 02: Optimize Your GitHub Profile
Other professionals are collaborating on GitHub and growing their network. Submit your profile to ensure your profile is on par with leaders in your field.
Project Description - Optimize Your GitHub Profile
- Concept 01: Prove Your Skills With GitHub
- Concept 02: Introduction
- Concept 03: GitHub profile important items
- Concept 04: Good GitHub repository
- Concept 05: Interview with Art - Part 1
- Concept 06: Identify fixes for example “bad” profile
- Concept 07: Quick Fixes #1
- Concept 08: Quick Fixes #2
- Concept 09: Writing READMEs with Walter
- Concept 10: Interview with Art - Part 2
- Concept 11: Commit messages best practices
- Concept 12: Reflect on your commit messages
- Concept 13: Participating in open source projects
- Concept 14: Interview with Art - Part 3
- Concept 15: Participating in open source projects 2
- Concept 16: Starring interesting repositories
- Concept 17: Next Steps
Part 04 : React & 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 are what it’s all about. At the end of this course, you’ll leverage React with Redux to build a “Would You Rather?” game.
Module 01: React & Redux
Lesson 01: Managing State
You’ll learn techniques to make your state more predictable by moving your state to a central location and establishing strict rules for getting, listening, and updating that state.
Lesson 02: UI + Redux
Lesson 03: Redux Middleware
You’ll learn to create custom middleware and add it to your Redux store. This middleware will allow you to enhance your store by hooking into and intercepting actions before they reach any reducers.
Lesson 04: Redux with React
You’ll learn how to add React to a Redux application and have the state of that application be managed by Redux.
Lesson 05: Asynchronous Redux
You’ll learn to better abstract asynchronous events by creating your own custom Thunk middleware and adding it to your store.
Lesson 06: react-redux
You’ll learn to leverage the react-redux bindings in order to leverage the benefits of a UI library like React and a state management library like Redux.
Lesson 07: Real World Redux
You’ll take your knowledge of Redux and utilize it by building a real-world Redux application. You’ll also learn advanced Redux topics like reducer composition and normalization.
- Concept 01: Introduction
- Concept 02: Project Walkthrough
- Concept 03: Planning Stage: Steps 1&2 - Break Down Views and Components
- Concept 04: Planning Stage: Step 3 - Determine Events In The App
- Concept 05: Planning Stage: Step 4 - Data and the Store
- Concept 06: Actions
- Concept 07: Reducers & Middleware
- Concept 08: Initializing the App's Data
- Concept 09: Dashboard Component
- Concept 10: Tweet Component
- Concept 11: Liking a Tweet
- Concept 12: New Tweet Component
- Concept 13: Using React Router
- Concept 14: Lesson Summary
- Concept 15: Course Summary
Lesson 08: Would You Rather?
In the "Would You Rather?" Project, you'll solidify your understanding of Redux by building a web app that lets a user play the “Would You Rather?” game.
Project Description - Would You Rather...?
Part 05 : React Native
In this course, you'll learn how to to develop React applications that run on both iOS and Android devices. We’ll explore everything from setting up a proper development environment, building and styling a cross-platform mobile application. You’ll incorporate native APIs such as geolocation and local notifications, and even learn how to get your app ready for the Google Play Store and the App Store!
Module 01: React Native
Lesson 01: Up and Running with React Native
You’ll learn the ideology behind React Native as well as how it works and how to get started building an iOS and Android application with it.
Lesson 02: React vs React Native
You’ll discover the ideological differences between building for the web and building for native as well as the main differences between the React and the React Native API.
Lesson 03: Styling & Layout
You’ll take a close look at React Native’s Stylesheet API as well as its implementation of flexbox in order to be able to effectively style and layout your application.
Lesson 04: Navigation
You’ll implement React Navigation’s navigators in order to be able to switch between tabs and screens in your application.
Lesson 05: Native Features
You'll extend your application by adding Animations, support for both Geolocation and Local Notifications, how to work with photos, and how to get it prepped for submitting to App stores.
Lesson 06: Mobile Flashcards
Build a mobile flashcard app using React Native.
Project Description - Mobile Flashcards
Lesson 07: Congratulations! What's Next?
Congratulations! You've completed the React Nanodegree program! Check out this overview of all the great things you've learned and some of the next steps available to you.
Part 06 (Elective): Optional: Redux Project
Using your new skills, build an anonymous content and comment application with Redux. Leverage the power of Redux to update the state of your application in a single place.
Module 01: Optional: Redux Project
Lesson 01: Readable
Using your new skills, build an anonymous content and comment application with Redux. Leverage the power of Redux to update the state of your application in a single place.
Project Description - Readable
Part 07 (Elective): ES6
Module 01: ES6
Lesson 01: Syntax
- Concept 01: Harmony, ES6, ES2015...
- Concept 02: Let and Const
- Concept 03: Quiz: Using Let and Const (1-1)
- Concept 04: Template Literals
- Concept 05: Quiz: Build an HTML Fragment (1-2)
- Concept 06: Destructuring
- Concept 07: Quiz: Destructuring Arrays (1-3)
- Concept 08: Object Literal Shorthand
- Concept 09: Lesson 1 Checkup
- Concept 10: Iteration
- Concept 11: Family of For Loops
- Concept 12: For...of Loop
- Concept 13: Quiz: Writing a For...of Loop (1-4)
- Concept 14: Spread... Operator
- Concept 15: ...Rest Parameter
- Concept 16: Quiz: Using the Rest Parameter (1-5)
- Concept 17: Lesson 1 Summary
Lesson 02: Functions
- Concept 01: Updates to Functions
- Concept 02: Arrow Functions
- Concept 03: Using Arrow Functions
- Concept 04: Quiz: Convert Function into an Arrow Function (2-1)
- Concept 05: Arrow Functions Recap
- Concept 06: Arrow Functions and the "this" Keyword
- Concept 07: "this" and Regular Functions
- Concept 08: "this" and Arrow Functions
- Concept 09: Default Function Parameters
- Concept 10: Defaults and Destructuring
- Concept 11: Quiz: Using Default Function Parameters (2-2)
- Concept 12: Class Preview
- Concept 15: Convert a Function to a Class
- Concept 17: Super and Extends
- Concept 18: Extending Classes from ES5 to ES6
- Concept 20: Quiz: Building Classes and Subclasses (2-3)
- Concept 21: Lesson 2 Summary
Lesson 03: Built-ins
- Concept 01: New Built-ins
- Concept 02: Symbols Intro
- Concept 03: Symbols
- Concept 04: Iteration & Iterable Protocols
- Concept 05: Sets
- Concept 06: Modifying Sets
- Concept 07: Working with Sets
- Concept 08: Sets & Iterators
- Concept 09: Quiz: Using Sets
- Concept 10: WeakSets
- Concept 11: Quiz: Working With WeakSets
- Concept 12: Maps
- Concept 13: Creating & Modifying Maps
- Concept 14: Working with Maps
- Concept 15: Looping Through Maps
- Concept 16: WeakMaps
- Concept 17: Promises Intro
- Concept 18: Promises
- Concept 19: More Promises
- Concept 20: Proxies Intro
- Concept 21: Proxies
- Concept 22: Proxies vs. ES5 Getter/Setter
- Concept 23: Proxies Recap
- Concept 24: Generators
- Concept 25: Generators & Iterators
- Concept 26: Sending Data into/out of a Generator
- Concept 27: Lesson 3 Summary
Lesson 04: Professional Developer-fu
- Concept 01: The Web is Growing Up
- Concept 02: Old and New Browsers
- Concept 03: ES6 Specification
- Concept 04: Supported Features
- Concept 05: The Web is Eternal
- Concept 06: Polyfills
- Concept 07: Using Polyfills
- Concept 08: Polyfill Walkthrough
- Concept 09: Other Uses for Polyfills
- Concept 10: Transpiling
- Concept 11: Using Babel
- Concept 12: Transpiling Walkthrough
- Concept 13: Transpiling Recap
- Concept 14: Course Summary
Part 08 (Elective): Client Server Communication
This course will guide you through how a client communicates with a server. You'll learn about HTTP's request and response cycle, dig into HTTP headers and verbs, distinguish HTTP/1 from HTTP/2 capabilities, all while experiencing the importance of security by digging into the details of HTTPS.
Module 01: Client Server Communication
Lesson 01: HTTP's Request/Response Cycle
You'll learn the ins and outs of requests. You'll look at how a page is requested, the headers that are received, HTTP codes, and how data is transferred.
- Concept 01: Intro
- Concept 02: HTTP Requests
- Concept 03: HTTP Requests 2
- Concept 04: Fetching a single request
- Concept 05: Fetching a single request 2
- Concept 06: Getting Multiple Requests
- Concept 07: Exercise Setup
- Concept 08: DevTools Quiz
- Concept 09: Sending data with a POST Request
- Concept 10: From XHR to Fetch
- Concept 11: Fetch Quiz
- Concept 12: Outro
Lesson 02: HTTP/1
You'll take a deep dive into HTTP verbs. You'll dig in deep to the vital headers used in HTTP. You'll also learn how to efficiently structure applications using REST.
- Concept 01: HTTP Intro
- Concept 02: The Netcat Command
- Concept 03: HTTP Verbs
- Concept 04: HTTP Verbs 2
- Concept 05: HTTP Verbs Quiz
- Concept 06: Common Response Headers
- Concept 07: Request Headers Quiz
- Concept 08: REST
- Concept 09: REST Quiz
- Concept 10: Performance Basics
- Concept 11: Performance Details
- Concept 12: Performance Details 2
- Concept 13: Outro
Lesson 03: HTTPS
You'll discover just how important security is to the web. You'll learn about TLS, discover issues with loading mixed content, have a quick primer on cryptography and verify Certificate Authorities.
- Concept 01: HTTPS Intro
- Concept 02: Securing HTTP
- Concept 03: MITM Quiz 1
- Concept 04: MITM Quiz 2
- Concept 05: TLS and Certificate Authorities
- Concept 06: TLS: Cryptography Primer
- Concept 07: TLS: Hashing
- Concept 08: Hashing Quiz
- Concept 09: Certificate Authority Signatures
- Concept 10: The TLS Handshake
- Concept 11: SSL Error Quiz
- Concept 12: Mixed Content
- Concept 13: Mixed Content Quiz
- Concept 14: Outro
Lesson 04: HTTP/2
HTTP/1 is great, but the future is HTTP/2! You'll learn about the changes that HTTP/2 brings. You'll learn the current "best practices" that HTTP/1 extols, but that are now anti-patterns in HTTP/2.
- Concept 01: HTTP/2 Intro
- Concept 02: HTTP/1 Problem: Head of Line Blocking
- Concept 03: HTTP/1 Problem: Uncompressed Headers
- Concept 04: HTTP/1 Problem: Security
- Concept 05: HTTP/2 Improvements
- Concept 06: HTTP/1 vs HTTP/2 Quiz
- Concept 07: Working with HTTP/2
- Concept 08: Development Techniques for HTTP/2 Quiz
- Concept 09: Outro
Lesson 05: Security
Security is vital for every web application! You'll learn about common security pitfalls and how to avoid them. You'll also get a chance to don your white hat and hack into a (sample) bank's website.
- Concept 01: Security Intro
- Concept 02: Origins
- Concept 03: Origins 2
- Concept 04: Overriding Same Origin Policy
- Concept 05: CORS
- Concept 06: Preflight Request with CORS Quiz 1
- Concept 07: Preflight Request with CORS Quiz 2
- Concept 08: Preflight Request with CORS Quiz 3
- Concept 09: Security Exploit - CSRF
- Concept 10: CSRF Quiz
- Concept 11: Security Exploit - XSS
- Concept 12: XSS Quiz
- Concept 13: Security Outro
- Concept 14: Course Outro
This course covers everything a developer needs to know to asynchronously send and receive data in their web applications. You'll dive into how asynchronous requests work by using the XHR object to create and send asynchronous requests for image and news article data. Then, you'll see how you can perform async requests more easily using third-party libraries and APIs like jQuery's Ajax and the Fetch API.
Lesson 01: Ajax with XHR
In this lesson, you''ll learn why you should use asynchronous data requests. Use the
XHRobject to send and receive data asynchronously.
- Concept 01: Course Intro
- Concept 02: Client Server Demonstration
- Concept 03: Ajax Definition & Examples
- Concept 04: APIs
- Concept 05: Create An Async Request with XHR
- Concept 06: The XHR Object
- Concept 07: XHR's .open() method
- Concept 08: XHR's .send() method
- Concept 09: A Full Request
- Concept 10: Project Initial Walkthrough
- Concept 11: Setting a Request Header
- Concept 12: Project Final Walkthrough
- Concept 13: XHR Recap
- Concept 14: XHR Outro
Lesson 02: Ajax with jQuery
In this lesson, you'll compare using
XHRwith using jQuery's Ajax method. You'll send and receive data using jQuery's Ajax methods and learn how jQuery's Ajax works under the hood.
- Concept 01: The jQuery Library & Ajax
- Concept 02: jQuery's `ajax()` Method
- Concept 03: Handling The Returned Data
- Concept 04: Cleaning up the Success Callback
- Concept 05: Code Walkthrough
- Concept 06: Peek inside $.ajax()
- Concept 07: Review the Call Stack
- Concept 08: Walkthrough of .ajaxTransport
- Concept 09: jQuery's Other Async Methods
- Concept 10: Async with jQuery Outro
Lesson 03: Ajax with Fetch
- Concept 01: Ajax call with the Fetch API
- Concept 02: What is Fetch
- Concept 03: Write the Fetch Request
- Concept 04: Handle The Response
- Concept 05: The Response Object
- Concept 06: ES6 Arrow Function
- Concept 07: Display Content & Handling Errors
- Concept 08: Project Wrap-up
- Concept 09: Fetch Outro
- Concept 10: Course Outro
Part 10 (Elective): Git & GitHub
This course covers the essentials of using the version control system Git. You'll be able to create a new Git repo, commit changes, and review the commit history of an existing repo. You'll also learn how to keep your commits organized using tags and branches and you'll master the art of merging changes by crushing those pesky merge conflicts. Oh no! Was a mistake made along the way? Learn how to edit commits, revert changes, or even delete commits.
Module 01: Git & GitHub
Lesson 01: What is Version Control?
Version control is an incredibly important part of a professional programmer's life. In this lesson, you'll learn about the benefits of version control and install the version control tool Git!
Lesson 02: Create A Git Repo
Now that you've learned the benefits of Version Control and gotten Git installed, it's time you learn how to create a repository.
Lesson 03: Review a Repo's History
Knowing how to review an existing Git repository's history of commits is extremely important. You'll learn how to do just that in this lesson.
Lesson 04: Add Commits To A Repo
A repository is nothing without commits. In this lesson, you'll learn how to make commits, write descriptive commit messages, and verify the changes you're about to save to the repository.
Lesson 05: Tagging, Branching, and Merging
Being able to work on your project in isolation from other changes will multiply your productivity. You'll learn how to do this isolated development with Git's branches.
Lesson 06: Undoing Changes
Help! Disaster has struck! You don't have to worry, though, because your project is tracked in version control! You'll learn how to undo and modify changes that have been saved to the repository.
Lesson 07: Working With Remotes
You'll learn how to create remote repositories on GitHub and how to get and send changes to the remote repository.
Lesson 08: Working On Another Developer's Repository
In this lesson, you'll learn how to fork another developer's project. Collaborating with other developers can be a tricky process, so you'll learn how to contribute to a public project.
Lesson 09: Staying In Sync With A Remote Repository
You'll learn how to send suggested changes to another developer by using pull requests. You'll also learn how to use the powerful
git rebasecommand to squash commits together.