valeriia-shur / react-js-course

React JS Course From Zero to Advanced

Course Materials and Projects made within React JS Course

React JS Course From Zero to Advanced.

This repo contains my own code for all sections and projects contained in the course.

👇 This is a description of what I have learned in each section 👇

Course Content

01-what-is-react

• React Introduction
• React Components
• Create React App

02-jsx-syntax

• JSX Basics
• Limits
• Inline styles
• Creating Simple Component
• Showing dynamic data
• Passing parameters
• Passing content

03-react-basics

• Creating and Changing State
• Adding Events
• Paasing parameters to functions
• Working with Input data, lists, and ternary operators
• Dynamic lists

04-styling-components

• Inline Styles
• CSS, dynamic classes, Radium
• SASS/SCSS
• CSS (SCSS) modules

05-react-components

• Passing Parameters to React Components
• State Initialization
• Basic Life Cycle
• Creating Stateful Component
• componentDidMount(), componentWillUnmount(), etc.
• Life Cycles in React 16.3+
• ErrorBoundary
• Fragments
• setState()
• Higher-Order Components Introduction
• Validating Parameters with PropTypes
• Refs and the DOM
• Context API

06-react-components-training

React Quiz App - part 1

• react-create-app
• Creating Layout, Connecting CSS modules
• Creating the Main Page
• Component of the Active Question
• Handling Click Events
• Validating data
• Showing Results
• Button Component
• Menu (Drawer) Toggle Button
• Drawer Component
• Blackdrop Component

07-react-router

• Registering Routes
• Routing and Components
• Pages Navigation
• Routing and Functional Components
• Dynamic Routes
• Redirect and Error 404
• Protecting Routes

08-react-router-training

React Quiz App - part 2

• Setting the Router
• Creating Pages
• Navigation
• Tests Page

09-forms-training

React Quiz App - part 3

• Text Field Component
• Form Validation
• Creating Tests via form
• Select Component
• Adding a Question via form

10-working-with-server-training

React Quiz App - part 4

• Setting the project
• Creating a test, uploading test lists
• Loading Process Component
• Loading Tests
• Authentication

11-redux

• Redux Basics
• React and Redux
• Connecting Components
• Changing State
• Passing Parameters
• Combining Reducers
• Middleware
• Action Creator
• Async State Modification
• Devtools

12-redux-training

React Quiz App - part 5

• Demo app: React Quiz App
• Refactoring the code to work through redux
• Keeping business logic out of UI
• Firebase deploy

13-react-hooks

• useState(): adding effects, states, and links
• useMemo()
• useCallback()
• useContext()
• Redux and useReducer()
• Creating a Hook

14-react-hooks-training

React GitHub users search App

• • Demo app: React GitHub users search App
• Setting navigation
• Creating Main Page
• Search Component
• Github State
• Receiving data from Github
• Setting requiests
• Rendering the main page with a search bar and profiles' pages

15-react-animation

• CSS Animcation in React
• Animation with Transition
• Stages of Animations
• CSSTransition
• Group Transition

16-react-testing

• How to test the code in React

17-higher-order-components

• High-order function
• App optimization