masterwok/udemy-react

The primary goal of this repository is to serve as a future reference when building applications with ReactJS and Redux.

Overview

This repository contains the projects built during, React the Complete Guide Including Redux course available on Udemy. This is a personal project created while following along with the course and is not affiliated with the actual course in any way. The primary goal of this repository is to serve as a future reference when building applications with ReactJS and Redux.

This repository is structured to have each course section within its own branch. Once a section is complete, then it will be merged back down into master. Because sections 1-3 focus on bootstraping the application, they will not have their own branch.

Sections

Section 3: Understanding the Base Features & Syntax

• Bootstrapped application using create-react-app
• Functional and class based Components
• Nesting child elements with the children property
• State management within class components
• Passing event callbacks
• Defining inline and stylesheet styles
• Two-way data binding
• Practice assignment
• Helpful links:
  • create-react-app
  • Introducing JSX
  • Rendering Elements
  • Components & Props
  • Listenable Events

Section 4: Working with Lists and Conditionals

• Rendering dynamic content conditionally in JSX
• Handling dynamic content using "The JavaScript Way" in JSX
• Rendering lists using JavaScript in JSX
• Providing state to list items (callbacks, properties, etc.)
• The importance of updating state immutably
• How to provide keys to list components to optimize rendering state updates
• Practice assignment
• Helpful links:
  • Conditional Rendering
  • Lists & Keys

Section 5: Styling React Components & Elements

• Setting styles dynamically
• Settings Class Names Dynamically
• Adding and Using Radium
• Using Radium for media queries
• Enabiling & Using CSS Modules
• Adding psuedo selectors
• Working with media queries
• Helpful links:
  • Enabling CSS Modules (without eject) in create-react-app Projects
  • Using CSS Modules in create-react-app Projects
  • More Information on CSS Modules)

Section 6: Debugging React Apps

• Overview of error boundary components to catch failing components
• Debugging react applications using React Dev Tools
• Helpful links:
  • Error Boundaries
  • Chrome DevTool Debugging
  • Debugging create-react-app Applications with WebStorm

Section 7: Diving Deeper into Components & React Internals

• Component lifecycles
• Stateless vs Stateful components
• Performance gains using PureComponents and React.memo()
• How React updates the component tree
• Creating higher order components (HOCs) to wrap components
• The empty <></> tag for returning non-nested elements in JSX
• How to use setState() correctly when referencing previous state (avoid race conditions)
• Validation props using prop-types
• Using component references both externally and internally
• Using React.createRef() to create a reference that can be set using the ref attribute on a component
• Using the Context API for global state to avoid the number of properties to pass down (should be used sparingly)
• Helpful links:
  • State & Lifecycle
  • PropTypes
  • Higher Order Components
  • Refs

Section 8: A Real App: The Burger Builder (Basic Version)

• How to plan the layout of a React application
• How to plan the state of a React application
• How to structure a React application
• Implementing sidebards, backdrops, toolbars, dynamic components, controls, etc.