Awesome

Table of contents

• Overview

• 1-class-components-challenges

  • Challenge 1: Convert functional components to class components
  • Challenge 2: Convert a class component with state
  • Challenge 3: Constructor Method
  • Challenge 4: Updating Complex State with this.setState()
  • Challenge 5: Lifecycle Methods

• 2-code-reuse-in-react

  • Challenge 1: React Children
  • Challenge 2: Higher Order Components
  • Challenge 3: Render Props

• 3-performance

  • Challenge 1: React.memo()
  • Challenge 2: shouldComponentUpdate()
  • Challenge 3: React.PureComponent

• 4-react-context

  • Challenge 1: Context Practice 1
  • Challenge 2: Context Practice 2
  • Challenge 3: Context Practice 3
  • Challenge 4: Context Practice 4

• 5-react-hooks

  • Challenge 1: Speed Typing Game Part 1
  • Challenge 2: Speed Typing Game Part 2
  • Challenge 3: Refactor "Challenge 3 on 4-react-context"
  • Challenge 4: Speed Typing Game Part 3

• 6-react-router

  • Challenge 1: React Router
  • Challenge 2: Nested Routes
  • Challenge 3: React Router Practice Part 1
  • Challenge 4: React Router Practice Part 2

• 7-capstone-project

• 8-react-redux

  Overview

  Completed these challenges that are parts of Scrimba's Advanced React Course. I learned fundamentals of advanced React topics with these challenges. You can see the visual representations of the each app below.

  1-class-components-challenges

  These challenges include class components and lifecycle methods.

  Challenge 1: Convert functional components to class components

  Visualization of the app;

  

  Challenge 2: Convert a class component with state

  Visualization of the app;

  

  Challenge 3: Constructor Method

  Description: Added constructor method on Challenge 2 practice above

  Visualization of the app;

  

  Challenge 4: Updating Complex State with this.setState()

  Visualization of the app;

  

  Challenge 5: Lifecycle Methods

  Visualization of the app;

  

  2-code-reuse-in-react

  These challenges include code reuse in React

  Challenge 1: React Children

  Visualization of the app;

  

  Challenge 2: Higher Order Components

  Writing a higher-order component that passes a new prop to the given componentcalled "favoriteNumber" and includes a favorite number. Then, in App.js, rendered that favorite number to the screen. It is written just 42.

  Challenge 3: Render Props

  Visualization of the app;

  

  3-performance

  These challenges include performance optimization methods in React

  Challenge 1: React.memo()

  Visualization of the app;

  

  Challenge 2: shouldComponentUpdate()

  Implied performance optimization with shouldComponentUpdate() on the same project on Challenge 1

  Challenge 3: React.PureComponent

  Implied performance optimization with React.PureComponent on the same project on Challenge 2

  4-react-context

  These challenges include react context practices in React

  Challenge 1: Context Practice with createContext() and contextType

  Visualization of the app;

  

  Challenge 2: Context.Consumer

  Converted functional components and used <UserContext.Consumer> for the above practice

  Challenge 3: Changing Context

  Visualization of the app;

  

  Challenge 4: Adding form

  Changing userContext into a component that has state and providing the ability to change the user's username on Challenge 3

  Visualization of the app;

  

  5-react-hooks

  These challenges include react hooks practices in React

  Challenge 1: Speed Typing Game Part 1

  useState(), useEffect() hooks are used in this project

  Visualization of the app;

  

  Challenge 2: Speed Typing Game Part 2

  useRef() hook added to focus textarea on Challenge 2

  Challenge 3: Refactor "Challenge 3: Changing Context on 4-react-context"

  Adding useContext() hook added to Challenge 3 on 4-react-context

  Challenge 4: : Speed Typing Game Part 3

  useWordGame() custom hook added to Speed Typing Game Part 2 on Challenge 2

  6-react-router

  These challenges include React Router methods in React

  Challenge 1: React Router

  BrowserRouter, Link, Switch and Route components are used to practice

  Visualization of the app;

  

  Challenge 2: Nested Routes

  Nested routes added for profile info and profile settings

  Visualization of the app;

  

  Challenge 3: React Router Practice Part 1

  BrowserRouter, Link, Switch and Route components are used to practice

  Visualization of the app;

  

  Challenge 4: React Router Practice Part 2

  useParams() added to Product Details page

  Visualization of the app;

  

7-capstone-project

It is an eCommerce site that pulls all my new React knowledge together. You can access the random photos with the detail. I used the React context to provide and distribute photos. The photos is taken from the Scrimba Images.

Check The Live Website ➡️ Live Website

- User can see the list of photos at the main page.
- User can toggle favorite pics
- User can see favorited pics
- User can add image to cart
- User can remove image from cart
- Total cost is automatically calculated
- User can place order

Animation of the Website

Technologies 💻

- React
- React Router Dom
- React Context
- Custom Hover Hook
- [Scrimba Images](https://raw.githubusercontent.com/bobziroll/scrimba-react-bootcamp-images/master/images.json)

8-react-redux

The basic counter app is created using react-redux, useSelector() and useDispatch() hooks.

Visualization of the app;