REACT JS

Module 1: What is React JS?

• React JS Introduction
• Advantages of React JS
• Work flow of React JS
• Scope of React JS

Module 2: Overview of JSX

• Introduction of Virtual DOM.
• Difference between JS and JSX.
• React Components overview
• Containers and components
• What is Child Components?
• What is Namespaced components?
• What are the JavaScript expressions available in JSX?

Module 3: React JS Environment Setups

• Node setup
• How to use NPM?
• How to create package.json and purpose of it?
• ES6 Introduction and features.
• Webpack Overview
• Best IDE for React JS and How to write optimized code in React JS?
• React JS browser plugins overview.

Real-time Practicals

• NPM Installation by locally and Globally
• Create a Basic App with React JS and other Supported NPMs.

Module 4: A Real-Time Application by using React JS

• Create a React component with JSX template.
• How to create Nested Components?
• What is React JS render?
• React Props overview.
• Introduction of Props validation with data types.
• Flow of States, Initialize states and update states.

Real-time Practicals

• Create a Small React Module
• Use All the states in in the created Application.

Module 5: React JS forms and UI

• Lists of Form components.
• Setup Controlled and Uncontrolled form components.
• Control Input elements.
• How to set default values on all formats of Input elements.
• React JS Form validations.
• How to write Styles?
• Animations overview

Real-time Practicals

• Create a React Form.
• Client-side form validation.
• Applying form components.
• Submit and Rest the form.

Module 6: React JS Component Life Cycles Overview

• Initial Render
• Props Change
• Stage Change
• Component willMount
• Component didMount
• Component Unmount

Real-time Practicals

• Applying Different Lifecylces in the Application.
• When to choose Appropriate lifecycles.

Module 7: Routing in React JS and Other JS concepts

• Single Page Application Overview.
• How to configure React Router?
• History of Router
• How to Handle Conditional statement in JSX?
• IIFE in JSX for complex logic overview.

Real-time Practicals

• Create a Single Page Application.
• Applying Routing.
• Dynamically render the components based on the url.

Module 8: Event Handling in JSX

• onBlur, onKeyUp, onChange and other useful primary events in React JS.
• How to Sharing events between the components?

Real-time Practicals

• Communicate Data between components.
• Applying all lists of events.

Module 9: How to write Styles in React JS?

• CSS and inline styles in React JS overview.
• Introduction to styled components

Real-time Practicals

• Styling the application using styled component
• How to use Animations in the Application.

Module 10: React Router with Navigation

• How to Load the router library?
• Configure the React Router?
• How to Pass and receive parameters?
• Integration of React-cookie overview.

Module 11: Flux overview

• What is Flux Architecture?
• What are the Flux Components available?
• Stores.
• Dispatchers.
• View Controllers.
• Actions.
• Views.
• How Flux works?
• Flux and React works together.

Module 12: Redux Overview

• Introduction to One Store.
• Provider Component
• Actions.
• Reducers.
• sagas
• Dispatchers
• View Controllers
• Selectors

Real-time Practicals

• Redux application Development with Real-time Project

Module 13: Unit Testing Overview

• What are the necessary Tools required for Unit Testing?
• React Unit Testing overview
• Introduction to JEST.
• How to Test React Component?
• How to Test React Router?

Meet Ananth Tirumanur. Hi there 👋

I work on projects in data science, big data, data engineering, data modeling, software engineering, and system design.

• 👨‍💻 All of my projects are available at https://github.com/akrish1982
• 💬 Ask me about Data engineering, SQL, Databases, Data pipelines, Data infrastructure
• 📄 My work history: https://www.linkedin.com/in/ananthtirumanur/
• ⚡ Fun fact: Marathoner & Casual Birding enthusiast

Connect with me:

• Twitter: @akrish82
• LinkedIn: https://linkedin.com/in/ananthtirumanur/

My Resources:

• LinkedIn Newsletter: Data Engineering with AWS
• Udemy Course: AWS Certified Data Engineer Associate Practice Test
• Python Crash Course: Python Crash Course on Gumroad

Languages and Tools:

AWS, Bash, Cassandra, Django, Docker, Elasticsearch, Flask, Git, Go, Grafana, Hadoop, Hive, Hugo, Kafka, Kubernetes, Linux, MariaDB, MySQL, Pandas, PostgreSQL, Python, Redis, Scala, Scikit-learn, SQLite