Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hemansnation/react35

35 Days of ReactJS. Understanding the frontend web development with the power of ReactJS along with HTML CSS JavaScript.
https://github.com/hemansnation/react35

css html javascript jsx reactjs

Last synced: about 2 hours ago
JSON representation

35 Days of ReactJS. Understanding the frontend web development with the power of ReactJS along with HTML CSS JavaScript.

Awesome Lists containing this project

README 

        
# 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