React.js Bootcamp

Welcome

in this bootcamp you will learn the basics the react.js library for building user interfaces

Getting set up

before starting make sure you have the following tools:

• node/npm
• React Developer Tools for Chrome or Firefox

to do your exercies you should use Create React App or you can just use an online code editor like codesandbox.io to run Your react app.

Each exercise is a small react application containing the following files:

• index.js: represents the entry file for the entire exercise.
• README.md: contains exercise instructions.

Every exercise falls into one or multiple categories of React.js main concepts or others that we think front-end developers should know!

Please take your time of understanding every concept and how it works before writing the answer!

DOM

• adding-style
• event-handling
• ref
• hello-world
• page-layout
• DOM Events
• References
• style attribute

JSX

• hello-jsx
• array-of-objects
• array-of-html
• rendring-object
• user-card
• conditional-rendering
• adding-style
• style prop

Components/props

• function-component
• component-properties
• children
• prop-types
• Children
• Transferring props(not required)
• Property validation / default props

Lifecycle

• Mounting
• Updating

Hooks

• state
• side-effects
• ref
• context
• State Hook
• Effect hook
• useRef
• useContext
• memo hooks(not required)
• useReducer(not required)
• Building your own hooks(not required)

React Router

• Basic
• Nesting
• URL params
• Link
• config
• Navigation

Redux

• store
• Provider
• state
• reducers
• Middleware

TODO:

• finish all react conecpts
• react router
• redux