course content

Course Content

Expert React

1. React Key Concepts

Course OverviewReact ComponentApproaches to Styling in React AppsReact HooksReact ContextLocal Development Environment

2. React Router

Fundamentals of RoutingGet Started with React RouterBasic RoutingLazy LoadingNavigationRoutes Basic Concepts Sum UpChallenge: Route Basic ConceptsQuery StringModify Query StringReact Router Section Sum Up

3. Redux Toolkit

Introduction to ReduxGetting Started with Redux ToolkitReal DealStoreActionsReducerInvolve Redux into ReactChallenge TimeChallenge: StoreChallenge: ActionsChallenge: ReducerChallenge: Involve Redux into ReactRedux Toolkit Section Sum Up

4. Formik

Powerful Form Library for ReactGet Started with FormikCustom Formik HookInvolve Formik into React componentAdd Initial ValuesForm SubmissionForm ValidationChallenge OverviewChallenge: useFormik HookChallenge: Binding Formik with React ComponentChallenge: Add Initial ValuesChallenge: Form SubmissionChallenge: ValidationFormik Section Sum Up

5. Jest

Introduction to Testing in ReactGet Started with JestCreate the Jest Test FileFirst Test CaseSecond Test CaseChallenge: Third Test CaseJest Section Sum Up

6. Next Steps

What is next?

Expert React

Challenge: Involve Redux into ReactChallenge: Involve Redux into React

Step 4: Involve Redux logic into React app

Focus on involving Redux logic in a React app. Connect React components and the Redux store to enable state management and actions.

Example

Here is the code from the recording: GitHub

Ship Tracker App

Challenge

Form.jsx:

  1. Open the Form.jsx file.
  2. Import the useDispatch hook from the react-redux package. This hook will be used to dispatch actions to the Redux store.
  3. Import the addGoal action from the goalAction.js file. This action is responsible for adding a goal to the Redux store.
  4. Initialize the dispatch variable inside the component by calling the useDispatch hook.
  5. Complete the handleFormSubmit function by dispatching the addGoal action. Use the dispatch function and pass in an object with the goal details: { id: Date.now(), text: goal }. The Date.now() generates a unique ID for each goal.
  6. Reset the form after submission by calling the resetForm function.

GoalList.jsx:

  1. Open the GoalList.jsx file.
  2. Import the useDispatch and useSelector hooks from the react-redux package. These hooks will be used to access the Redux store and dispatch actions.
  3. Import the removeGoal action from the goalAction.js file. This action is responsible for removing a goal from the Redux store.
  4. Initialize the goals variable using the useSelector hook and access the goals state from the Redux store.
  5. Initialize the dispatch variable by calling the useDispatch hook.
  6. Complete the handleRemoveGoal function by dispatching the removeGoal action. Pass in the goal as a parameter.
  7. Finish the logic of rendering the array of goals by mapping over the goals array and rendering each goal.
  8. Display the text of each goal and add a button with an onClick event that calls the handleRemoveGoal function and passes in the respective goal.
Hint
1. Use the useDispatch and useSelector hooks to access the Redux store and dispatch actions.

2. Work with the removeGoal and addGoal actions from goalAction.js to handle actions related to goals.

3.Ensure the payload of the addGoal action includes a unique id generated using Date.now() and the text value from the input field.

4. Implement the handleRemoveGoal function to dispatch the removeGoal action with the corresponding goal.

5. Utilize the map function to iterate over the goals array and render each goal, displaying its text.

Everything was clear?

Section 3. Chapter 12