akwasiasamoah / react-odyssey

Documenting my journey through React on this repository

react-odyssey

This repository is meant for documenting my journey through React.

Chapter 1

In Chapter 1, the following was learnt:

• React at a glance
• Prerequisite required to before getting into react
• Environment setup VisualStudioCode
• Extensions required

Chapter 2

In Chapter 2, the following was learnt:

• Using React CDN and Babel CDN
• Making a React Component and rendering it the DOM
• Understanding the difference between JSX and HTML
• How to add dynamic values(variables) into our template
• Basics of Click events

Chapter 3

In Chapter 3, the following was learnt:

• Making a react site using create-react-app
• Understanding the project structure thus the node_modules, public and files contained in the src.
• How to use images and stylesheets in our react app.

Chapter 4

In Chapter 4, the following was learnt:

• Why we need State
• How to use useState hook
• How to output list
• Conditional templates

Chapter 5

In Chapter 5, the following was learnt:

• Using Multiple Components
• Introduction to Props and how to use them
• React fragments in their important in our html structure
• Children Props. How to transfer a whole template from parent to child
• Functions as Prop
• Portals. How to output our template elsewhere in our html
• Differences between Class Components and Functional Components

Chapter 6

In Chapter 6, the following was learnt:

• Using global stylesheets
• Component stylesheets
• Using inline styles
• Dynamic Inline styles
• Conditional CSS Classes
• CSS Modules

Chapter 7

This was intense chapter on forms and events:

• Forms and labels in React
• The onChange Event
• Controlled inputs
• Submitting forms
• Adding Events to the event list
• Using the useRef Hook
• Select boxes in react

Chapter 8

Very interesting chapter and will read more on it. The following was learnt:

• Why we need the useEffect hook
• Fetching data with useEffect
• The useEffect Dependency Array
• useCallback hook and its purpose for function dependencies
• Creating a custom fetch hook
• handling errors
• Why we need a cleanup function
• Aborting fetch requests when the component using the useEffect is done using it

Chapter 9

Chapter 9 was a mini project that details a magic memory game