Introduction to Reactjs Online Training

Syllabus of Reactjs Certification Course

HTML – Syllabus

HTML – Introduction – 2 Hours

• HTML – Elements
• HTML – Tags
• HTML – Text
• HTML – Formatting
• HTML – Attributes
• HTML – Font
• HTML – Text Links
• HTML – Comments
• HTML – Lists
• HTML – Images
• HTML – Image Links
• HTML – Tables
• HTML – Color Codes

Web Forms – 1 Hour

• HTML – Forms
• HTML – Input
• HTML – Text Fields
• HTML – Password
• HTML – Reset
• HTML – Submit
• HTML – Checkboxes
• HTML – Radio
• HTML – Select
• HTML – Hidden Fields
• HTML – Upload
• HTML – Textarea

Special Tags – 30 Mints

• HTML – Body
• HTML – Meta
• HTML – Style
• HTML – Div
• HTML – Layouts

Formatting Tags – 30 Mints

• HTML – Bold
• HTML – Paragraphs
• HTML – Headings
• HTML – Line Breaks
• HTML – Horizontal Rule
• HTML – Email
• HTML – Italic

HTML5 – Syllabus – 30 Mints

• <footer>
• <header>
• <nav>
• <progress>
• <section>
• Date
• Datetime
• Datetime-local
• Email
• Month
• Number
• Search
• Time

Form Attributes – 30 Mints

• autocomplete
• form
• formaction
• formenctype
• formmethod
• height and width
• min and max

Css – Syllabus

CSS Introduction – 1 Hour

• CSS Syntax
• CSS Selectors (ID, Class, Tags, Attributes)
• CSS Styling

• Styling Backgrounds

• Styling Text
• Styling Fonts
• Styling Links
• Styling Lists
• Styling Tables

CSS Box Model – 1 Hour

• CSS Border
• CSS Outline
• CSS Margin
• CSS Padding
• CSS Dimension
• CSS Display
• CSS Positioning
• CSS Floating
• CSS Navigation Bar
• CSS Image Gallery
• CSS Image Opacity
• CSS Align

CSS3 Introduction – 1 Hour

• Borders
• border-radius
• Border Images
• Backgrounds
• Background Size
• background-origin
• Text Effects
• text-shadow
• box-shadow
• Text
• text-overflow
• word-wrap
• word-break
• Fonts

JavaScript – Syllabus

What is JavaScript? – 1 Hour

• Understanding objects
• Understanding variables
• Making comparisons
• Understanding events

Starting to Code

• Writing your first script

Using comments in scripts

Interacting with Users

• Creating alert dialogs
• Understanding conditional statements
• Getting confirmations from users
• Creating prompts for users
• Understanding functions
• Using switch/case statements

JavaScript Language Essentials – 1 Hour

• Creating loops
• Passing values to functions
• Detecting objects
• Reading arrays
• Returning values from functions
• Writing arrays
• Building do and while loops

Working with Dates and Times – 3 Hours

• Displaying dates
• Displaying times
• Creating a countdown

Building Smarter Forms

• Getting started
• Requiring fields
• Cross-checking fields
• Verifying radio button selections
• Doing Form Validations
• Displaying more informative errors
• Verifying email addresses

Handling Events – 1 Hour

• Responding to window events
• Responding to mouse movements
• Responding to mouse clicks
• Responding to onBlur form events
• Responding to onFocus form events
• Responding to keyboard events

The DOM, Nodes, and Objects – 1 Hour

• Understanding the DOM
• Adding nodes to the DOM
• Deleting nodes from the DOM
• Deleting specific nodes
• Inserting nodes into the DOM
• Replacing nodes in the DOM

JavaScript Refresher – 1 Hour

• Module Introduction
• Data Types
• Understanding Classes
• Classes, Properties and Methods
• The Spread & Rest Operator
• Reference and Primitive Types Refresher
• Refreshing Array Functions
• JS simple assignment

Setting up your environment – 1 Hour

• Installing Visual Studio Code
• Installing Node JS / NPM
• Git Basic and uses

React Basics & Working With Components – 8 Hours

• What Are Components? And Why Is React All About Them?
• A Note About New React Projects & NodeJS
• Creating a new React Project
• Analyzing a Standard React Project
• Introducing JSX
• How React Works
• Building a First Custom Component
• Adding Basic CSS Styling
• Outputting Dynamic Data
• Passing Data via “props”
• Splitting Components Into Multiple Components
• The Concept of “Composition” (“children props”)
• Organizing Component Files
• An Alternative Function Syntax
• Learning Check: React Basics, Components, Props, Router
• Time to Practice: React & Component Basics

React State and Working with events – 4 Hours

• Listening to Events & Working with Event Handlers
• How Component Functions Are Executed
• Working with “State”
• A Closer Look at the “useState” Hook
• State can be updated in many ways!
• Adding Form Inputs
• Listening to User Input
• Working with Multiple States
• Using One State Instead (And What’s Better)
• Updating State That Depends On The Previous State
• Handling Form Submission
• Adding Two-Way Binding
• Child-to-Parent Component Communication (Bottom-up)
• Lifting The State Up
• Time to Practice: Working with Events & State
• Controlled vs Uncontrolled Components & Stateless vs Stateful Components

Styling React Components – 1 Hour

• Setting Dynamic Inline Styles
• Setting CSS Classes Dynamically
• Introducing Styled Components
• Styled Components & Dynamic Props
• Styled Components & Media Queries
• Dynamic Styles with CSS Modules

Debugging React Apps – 1 Hour

• Understanding React Error Messages
• Analyzing Code Flow & Warnings
• Working with Breakpoints
• Using the React DevTools

Advanced: Handling Hooks – 2 Hours

• What are “Side Effects” & Introducing useEffect
• Using the useEffect() Hook
• What to add & Not to add as Dependencies
• Introducing useReducer & Reducers In General
• Using the useReducer() Hook
• useReducer & useEffect
• Adding Nested Properties As Dependencies To useEffect
• useReducer vs useState for State Management
• Introducing React Context (Context API)
• Using the React Context API
• Making Context Dynamic
• Building & Using a Custom Context Provider Component
• React Context Limitations
• Learning the “Rules of Hooks”

Sending HTTP Requests (Connecting Database) – 2 Hours

• How To Connect To A Databas
e
• Our Starting App & Backend
Sending a GET Request
• Using async / await
Handling Loading & Data States
• Handling Http Errors
• Using useEffect() For Requests
• Sending a POST Request
• JSON

Working with forms and User Input – 2 Hours

• What’s So Complex About Forms?
• Dealing With Form Submission & Getting User Input Values
• Adding Basic Validations
• Providing Validation Feedback
• Handling the “was touched” State
• Time to Practice: Forms

Redux: 4 Hours

• Redux uses
• How Redux Works
• creating a Redux Store for React
• More Redux Basics
• Creating a Redux Store for React
• Providing the Store
• Using Redux Data in React Components
• Dispatching Actions From Inside Components
• Redux with Class-based Components
• Attaching Payloads to Actions
• Working with Multiple State Properties
• How To Work With Redux State Correctly
• Redux Challenges & Introducing Redux Toolkit
• Time to Practice: Redux

Replacing Redux with React Hooks – 1 Hour

• Starting Project & Why You Would Replace Redux
• Alternative: Using the Context API
• Toggling Favorites with the Context API
• Getting Started with a Custom Hook as a Store
• Finishing the Store Hook
• Creating a Concrete Store
• Using the Custom Store

Time to Practice: New Project – 2 Hours

Testing React Apps: 2 Hours

• What & Why?
• Understanding Different Kinds Of Tests
• What To Test & How To Test
• Understanding the Technical Setup & Involved Tools
• Running a First Test
• Writing Our First Test
• Grouping Tests Together With Test Suites
• Testing User Interaction & State
• Testing Asynchronous Code
• Working With Mocks
• Summary & Further Resources

Time to Practice for testing – 2 Hours