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 👇
- React Introduction
- React Components
- Create React App
- JSX Basics
- Limits
- Inline styles
- Creating Simple Component
- Showing dynamic data
- Passing parameters
- Passing content
- Creating and Changing State
- Adding Events
- Paasing parameters to functions
- Working with Input data, lists, and ternary operators
- Dynamic lists
- Inline Styles
- CSS, dynamic classes, Radium
- SASS/SCSS
- CSS (SCSS) modules
- 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
- 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
- Registering Routes
- Routing and Components
- Pages Navigation
- Routing and Functional Components
- Dynamic Routes
- Redirect and Error 404
- Protecting Routes
- Setting the Router
- Creating Pages
- Navigation
- Tests Page
- Text Field Component
- Form Validation
- Creating Tests via form
- Select Component
- Adding a Question via form
- Setting the project
- Creating a test, uploading test lists
- Loading Process Component
- Loading Tests
- Authentication
- Redux Basics
- React and Redux
- Connecting Components
- Changing State
- Passing Parameters
- Combining Reducers
- Middleware
- Action Creator
- Async State Modification
- Devtools
Demo app:React Quiz App- Refactoring the code to work through redux
- Keeping business logic out of UI
- Firebase deploy
- useState(): adding effects, states, and links
- useMemo()
- useCallback()
- useContext()
- Redux and useReducer()
- Creating a Hook
-
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
- CSS Animcation in React
- Animation with Transition
- Stages of Animations
- CSSTransition
- Group Transition
- How to test the code in React
- High-order function
- App optimization