React35

35 Days of ReactJS

The training is divided into 4 Sections:

1. HTML
2. CSS
3. JavaScript
4. ReactJS
5. Live Projects
6. Projects 15+
7. Git and GitHub
8. Profile Building

This is what we are going to cover in 35 Days.

HTML Refresher

Day 1

Different tags - html, title, body, paragraph, heading 1 to 6, anchor, break row, link, img

Different attributes - style, href, rel, src,

tags - submit button, checkbox, radio, date, email, file, number, password, reset, search.

Textarea, select, fieldset, legend.

Interview Questions

• What is HTML?
• How the HTML code compile?
• What data structure is used behind the scenes in HTML?
• What is HTML parser?
• How to add CSS with HTML file?
• What are absolute and relative URLs?
• How to navigate to a specific part of the page? CSS id
• How to use the loading attribute to lazy load images? loading attribute in image tag. Lazy?
• How to build a form?
• How to configure a form to comunicate with server with attributes: action, enctypes, method, target.
• How to change the design of datetype input field.
• How to preview the image with file input type?

CSS Refresher

Day 2

Selector, Class and id , Comment, border, color, background- color, image, repeat, attachment,

Border - style , width, color, shorthand, border-radius

Margin - top, right, bottom, left

Padding -

What is box model?

Universal selector *

Text align - left, center, justify, text-decoration - overline, none, under-line, line-through, text-transform, text-indent

Interview Questions

• What is CSS?
• What is CSS Ruleset?
• How many ways to use CSS in a webpage?
• What is the difference between Pseudo-classes and pseudo-elements?
• What is the difference between class selectors and id selectors?

JavaScript

Day 3

JavaScript - How it works?

Add it into a HTML file

Variables, Operators

Interview Questions

• How to add it with HTML?
• How console works?
• What is Document?
• How variables work in JS?

Day 4

JavaScript

user input, while loop, do while loop, for loop,

functions basics

practice questions

Interview Question

Day 5

JavaScript Project

Captcha Generator

Day 6

JavaScript Projects Part 2

Captcha Generator

Day 7

JavaScript Array object, different types of array representations.

Methods for stack and queue operations, push pop shift unshift.

Array with for loop, for in , for of,

Multidimensional array

Other important methods: - splice, slice, concat, foreach, indexOf, lastIndexOf, includes, find, filter, reverse, split, join

Array.isArray

Day 8

JavaScript String, Single and dobule quotes, backticks.

Special characters: new line character, length,

Strings are immutable

String methods: charAt, toUpperCase, toLowerCase, indexOf, includes, startsWith, endsWidth, slice, substring, substr

Day 9

JavaScript Objects

Day 10

JavaScript Project Speech Recognition

Day 11

Functions

Arrow functions

Day 12

JavaScript Classes

Day 13

React Basics

Why React?

CDN - unpkg - React, ReacrDOM and babel

Understanding JSX (JavaScript XML)

• JSX Elements
• Comment
• Rendering JSX
• Style and className in JSX
• Injecting data into JSX

Interview Questions

• What is babel?
• What is transpiler?
• What is single page application?
• What is DOM?
• What is Virtual DOM?

Day 14

React create-react-app

Install these extensions from Visual Studio Code

• Prettier
• ESLint
• Bracket Pair Colorizer
• ES7 React/Redux/GraphQL/React-Native snippets
• create-react-app

adding first JSX code with react

Interview Questions

• What is module?
• What is package?
• What is NPM?
• What is webpack?

Day 15

React first app

• add jsx and render the content
• Inject Data into JSX
• Add image in the page

Day 16

• Components

• Functional Component / Presentational Component / Stateless Component / Dumb Component

• Class Component / Container Component/ Statefull Component / Smart Component

Rendering React Components

Interview Questions

• What is React Component?
• Difference between normal function and arrow function.
• How to make reusable react components?
• How small is a React component?
• What is the difference between a pure JavaScript function and a functional component?

Day 17

React Props

Props in functional Components

String Props

Interview Questions

• What is props in a React component ?
• How do you access props in a React component ?
• What data types can we pass as props to components ?

Day 18

React Map List Keys

Working of Map function with Numbers, arrays of arrays, arrays of object.

Key mapping,

Interview Questions

• Why you need to map an array ?
• Why we need keys during mapping an array ?

Day 19

React Class Components Statefull components

Class Components, props in class components, methods in class components.

Convert all the functional components into class components.

Interview Questions

• What is inheritance and how do you make a child from a parent class?
• What is class based React component ?
• What is the difference between functional React component and class based React component ?
• When do we need to use class based components instead of functional components