0% found this document useful (0 votes)
55 views12 pages

UI Full Stack - React JS

Uploaded by

nuvsuperra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
55 views12 pages

UI Full Stack - React JS

Uploaded by

nuvsuperra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

UI FULL STACK

Web Development with

REACT JS

Naresh i Technologies | [email protected] | website: www.nareshit.com


HTML_CSS_Bootstrap

HTML Basics
 Introduction to HTML, Document Structure, Headings (h1 to h6)
 Paragraphs,Tags vs Elements, Text Formatting, Lists (ul, ol, li)
 comments, Links (anchor tags), Images (img tags), Block vs Inline
 Semantic Elements, Tables,symbols, miscellenous
 Forms(Ui Elements and their attributes)
 forms Validation
 media inserting tags(video,audio,picture, iframe,embed etc..,)

More HTML and CSS

 CSS Basics - Selectors, Colors, Fonts


 Box Model (margin, padding, border), Display Property
 pseudo selectors,pseudo classes
 Positioning,floats,clearfix
 FlexBox
 Grid
 Translate and Transitions and units(vw,vh,em,rem,%,px)
 animations and Responsive Basics
 media Queries
 miscellaneous(Filters, Blendering mode, designs, custom variables)
 Project 1(using HTML & CSS)
 Project 2(Using HTML &CSS)
 SASS Introduction(vaiables,Nesting,mixin,partials)
 SASS (control directives,extend,sample usage)
 Project 3(using HTML& CSs)

Bootstrap

 Introduction to Bootstrap, Libraries, Grid System


 Bootstrap Typography, Colors, Images
 Bootstrap Components (Navbar, Cards, Forms)

Naresh i Technologies | [email protected] | website: www.nareshit.com


JavaScript
JavaScript

 Introduction to JavaScript, Variables


 Data types and its Methods-1
 Data types and its Methods-2
 Operators in JS
 Control Statements (if and switch)
 loops(while,do-while,for)
 variations of for(for,for..in,for..of,forEach)
 forEach,map,filter,reduce
 Function( declaration,invokation,parameters and arguments)
 Scope,closure,callbacks
 DOM Intro, Selection, modifying content
 Handling events(event handlers,listeners)
 Events(event propagation and delegation)
 creating and deleting elements
 Forms in JS
 Asynchronous JS,Callback Hell
 Promises
 HTTP Requests and Fetch API
 Async/Await
 Practice projects for DOM and API
 ES6 Features(Arrow Functions, Template Literals)
 Destructuring
 Classes -1
 Classes-2(include this,bind,apply,call)
 Modules-1
 Modules-2 and Prototypes and its chaining
 BOM(introduction and basics)
 Local Storage and Session Storage
 cookies
 HTML5(Canvas,svg,GeoLocation)
 AJAX(Asynchronous requests,XHR,JSON,CORS)
 JQUERY-1
 JQUERY-2
 PROJECT(Complete)
 PROJECT(Complete)
 PROJECT(Complete)

Naresh i Technologies | [email protected] | website: www.nareshit.com


React JS
Getting Started with React

 React version history


 What’s New in React 18
 Understanding “what” and “why” React
 Environment Setup for React Application
 Understanding NPM commands
 Using VS Code and VS Code extensions for ES6, React
 React App Project Directory Structure

Components and JSX


 React Component Basics
 Creating React Components
 Understanding JSX
 Limitations of JSX
 Working with Components and Reusing Components

State, Props, and Event Handling


 Helloworld app in React
 Functional/Class/Pure Components
 Understanding and using Props and State
 Handling Events with methods
 Manipulating the State
 Two-way data-binding

Advanced React Components


 Functional (Stateless) VS Class (Stateful) Components
 Between component child communication
 Dynamically rendering contents
 Showing Lists, List and keys
 Refs

Styling in React

 CSS Styling in React


 Scoping Styles using Inline Styles
 Limitations of inline styles
 Inline Styles with Radium
 Using Pseudo classes/media queries with inline styles
 CSS Modules, importing CSS classes
 Adding Bootstrap, Semantic UI to React apps
 Using react-bootstrap, reactstrap packages

Debugging and Error Handling

 Understanding React Error Messages


 Handling Logical Errors
 Debugging React apps using Google Developer Tools and React DevTool

Naresh i Technologies | [email protected] | website: www.nareshit.com


 Understanding Error Boundaries
 Updating life cycle hooks
 PureComponent
 React’s DOM Updating Strategy
 Returning adjacent elements, Fragments

Introduction to Hooks

 Introducing Hooks
 Hooks at a Glance
 Using the State Hook
 Using the Effect Hook
 Other Hooks like useCallBack, useRef, useLayoutEffect, useMemo etc.
 Rules of Hooks
 Building Your Own Hooks
 Hooks API Reference
 Hooks FAQ

Higher Order Components and


Context API

 Higher Order Components


 Passing unknown Props
 Validating Props
 Using References
 React Context API
 Best practices for React Projects

HTTP Requests and Forms in React

 Demo apps
 HTTP Requests in React
 Introduction of Axios package
 HTTP GET Request, fetching & transforming data
 HTTP POST, DELETE, UPDATE
 Handling Errors
 Creating/Using Axios instances
 Routing and SPAs

React Router and Forms

 Setting Up the Router Package


 react-router vs react-router-dom
 Preparing the Project For Routing
 Switching Between Pages, Routing-Related Props
 The "withRouter" HOC & Route Props
 Passing & extracting route/query parameters
 Navigating Programmatically

Form Handling and Validation

 Creating a Custom Dynamic Input Component


 Setting Up a JS Config for the Form

Naresh i Technologies | [email protected] | website: www.nareshit.com


 Dynamically Create Inputs based on JS Config
 Adding a Dropdown Component
 Handling User Input
 Handling Form Submission
 Adding Custom Form Validation
 Fixing a Common Validation
 Adding Validation Feedback
 Showing Error Message
 Handling Overall Form Validity

State Management with Redux

 Redux principles
 Install and setup redux
 Creating actions, reducer and store
 What is React Redux
 Why React Redux
 Install and setup
 Presentational vs Container components
 Understand high order component
 Understanding mapStateToProps and mapDispatchToProps usage

Material UI and Common Errors

 Material UI Overview
 Installation and Setup
 Basic Usage and Components
 Theming and Styling
 Handling Forms and Inputs
 Using Icons and SVGs
 Common Errors in React
 Debugging Techniques
 Best Practices for Error Handling

Advanced React Features

 Automatic Batching
 Transitions
 Suspense Features
 New Strict Mode Behaviors

Unit Testing and Webpack

 Understand the significance of unit testing


 Understand unit testing jargon and tools
 Unit testing react components with Jest
 Unit testing react components with enzyme
 What is webpack
 Why webpack
 Install and setup webpack
 Working with webpack configuration file
 Working with loaders
 Quick word on code splitting, lazy loading, tree shaking

Naresh i Technologies | [email protected] | website: www.nareshit.com


 Setting up Hot Module Replacement

Server-Side Rendering and Deployment

 What is server-side rendering (SSR)?


 Why SSR
 Working with renderToString and renderToStaticMarkup methods
 Firebase Deployment
 Deploy full Stack Application in Netlify, Vercel, AWS, or Azure

Hands-On
 Project: Design and Implement E-commerce Website
 Design and implement an E-commerce website with a suitable UI using React
 Implement state management using Redux
 Handle situations like Prop Drilling By Context API

Naresh i Technologies | [email protected] | website: www.nareshit.com


Back_End Node
Introduction to Server-Side Scripting and NPM

 Introduction to Server-Side Scripting


 Overview of NPM (Node Package Manager)

Node.js Features, Drawbacks, and Environment Setup

 Features and Drawbacks of Node.js


 Setting up the Environment for Node.js

Node.js Program Architecture and Nodemailer


 Node.js Program Architecture
 Introduction to Nodemailer for email functionality

Node.js Core Concepts


 MVC Design Pattern
 Node.js Web Server
 Node.js Global and OS Objects
 Error Handling in Node.js
 Understanding the Event Loop

Node.js File System and Asynchronous Operations


 File System in Node.js
 Asynchronous and Synchronous Operations
 Connecting with Databases
 Handling CRUD Operations

Naresh i Technologies | [email protected] | website: www.nareshit.com


Express.js
Express.js

 Express.js Basics
 Introduction to Express.js
 Routing in Express
 Response Methods in Express
 Serving Static Files
 Express JSON Parser
 Middleware and API Creation
 Middleware and Middleware Chaining
 Express CORS
 Postman for API Testing
 Creating Web API
 Exploring the Express Module

Advanced Express.js
 Express.js Sessions and Data Handling
 Session Management in Express
 Setting up Session Middleware
 Sending and Receiving Data (POST & GET)
 Reading Data from Requests
 Templates, File System, and REST API
 Creating Templates using PUG/JADE
 Generating Dynamic HTML Pages
 Exploring File System (Reading and Writing)
 Introduction to REST API and REST Architecture

Hands-On

 Project: Design and Implement Back-End and DB


 Applying knowledge to design and implement a back-end for an E-commerce site

Authentication and Security

 Introduction to Authentication
 Session-based Authentication
 Token-based Authentication
 Basic Security Concepts

Security Practices and Error Handling

 Handling SQL Injection and Cross-Site Scripting


 Understanding CORS and Solving CORS Issues
 Best Practices for Error Handling
 Debugging Node.js Applications

Testing and Deployment


 Tools for Testing REST APIs
 Writing Test Cases
 Deploying Node.js App on Heroku

Naresh i Technologies | [email protected] | website: www.nareshit.com


WebSockets, GraphQL, and Middleware

 WebSockets and Implementation


 Introduction to GraphQL
 Setting up GraphQL with Express
 Creating Custom Middleware

Caching
 Introduction to Caching
 Implementing Caching in Node.js

Streams

 Working with Streams in Node.js

Microservices

 Introduction to Microservices
 Pros and Cons of Microservices

Docker

 Introduction to Docker
 Creating Docker Images and Docker Compose

Kubernetes
 Overview of Kubernetes and Setting Up a Cluster
 Deploying Apps on Kubernetes

Hands-On
 Full-Stack Application and Deployment
 Building a Full-Stack Application
 Deploying the Full Stack Application on NETLIFY, Vercel, AWS, or Azure

Naresh i Technologies | [email protected] | website: www.nareshit.com


MongoDB
MongoDB and Database Connectivity

 Introduction to MongoDB
 Configuring Server and Client
 MongoDB Compass
 Creating Databases and CRUD Operations

MySQL

Introduction

 DBMS vs RDBMS
 Intro to SQL
 SQL vs NoSQL
 MySQL Installation
 Data Types in SQL

Keys
 Primary Key
 Foreign Key

Constraints
 Unique
 Not NULL
 Check
 Default
 Auto Increment

CRUD Operations
 Create
 Retrieve
 Update
 Delete

SQL Languages
 Data Definition Language (DDL)
 Data Query Language
 Data Manipulation Language (DML)
 Data Control Language
 Transaction Control Language

SQL Commands

 Create
 Insert
 Alter, Modify, Rename, Update
 Delete, Truncate, Drop
 Grant, Revoke
 Commit, Rollback

Naresh i Technologies | [email protected] | website: www.nareshit.com


 Select

SQL Clause

 Where
 Distinct
 OrderBy
 GroupBy
 Having
 Limit

Operators
 Comparison Operators
 Logical Operators
 Membership Operators
 Identity Operators

Wild Cards

Aggregate Functions

SQL Joins

 Inner Join & Outer Join


 Left Join & Right Join
 Self & Cross Join
 Natural Join

Naresh i Technologies | [email protected] | website: www.nareshit.com

You might also like