{"id":18894686,"url":"https://github.com/hemansnation/react35","last_synced_at":"2025-04-15T00:32:14.785Z","repository":{"id":41825348,"uuid":"488289073","full_name":"hemansnation/React35","owner":"hemansnation","description":"35 Days of ReactJS. Understanding the frontend web development with the power of ReactJS along with HTML CSS JavaScript.","archived":false,"fork":false,"pushed_at":"2022-08-01T16:43:06.000Z","size":422,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-28T13:11:08.481Z","etag":null,"topics":["css","html","javascript","jsx","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hemansnation.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-03T16:45:06.000Z","updated_at":"2024-11-29T14:32:19.000Z","dependencies_parsed_at":"2022-07-11T01:31:01.559Z","dependency_job_id":null,"html_url":"https://github.com/hemansnation/React35","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hemansnation%2FReact35","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hemansnation%2FReact35/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hemansnation%2FReact35/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hemansnation%2FReact35/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hemansnation","download_url":"https://codeload.github.com/hemansnation/React35/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248984478,"owners_count":21193757,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","javascript","jsx","reactjs"],"created_at":"2024-11-08T08:24:12.598Z","updated_at":"2025-04-15T00:32:10.495Z","avatar_url":"https://github.com/hemansnation.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React35\n35 Days of ReactJS\n\nThe training is divided into 4 Sections:\n\n1. HTML\n2. CSS\n3. JavaScript\n4. ReactJS\n5. Live Projects \n6. Projects 15+\n7. Git and GitHub\n8. Profile Building\n\nThis is what we are going to cover in 35 Days.\n\n# HTML Refresher\n\n### Day 1 \n\n\nDifferent tags - html, title, body, paragraph, heading 1 to 6, anchor, break row, link, img\n\nDifferent attributes - style, href, rel, src,\n\ntags - submit button, checkbox, radio, date, email, file, number, password, reset, search.\n\nTextarea, select, fieldset, legend.\n\n#### Interview Questions\n- What is HTML?\n- How the HTML code compile?\n- What data structure is used behind the scenes in HTML?\n- What is HTML parser?\n- How to add CSS with HTML file?\n- What are absolute and relative URLs?\n- How to navigate to a specific part of the page? CSS id\n- How to use the loading attribute to lazy load images? loading attribute in image tag. Lazy?\n- How to build a form? \n- How to configure a form to comunicate with server with attributes: action, enctypes, method, target.\n- How to change the design of datetype input field.\n- How to preview the image with file input type?\n\n\n# CSS Refresher\n\n### Day 2\n\nSelector, Class and id , Comment, border, color, background- color, image, repeat, attachment,\n\nBorder - style , width, color, shorthand, border-radius\n\nMargin - top, right, bottom, left\n\nPadding -\n\nWhat is box model?\n\nUniversal selector *\n\nText align - left, center, justify, text-decoration - overline, none, under-line, line-through, text-transform, text-indent\n\n#### Interview Questions\n\n- What is CSS?\n- What is CSS Ruleset?\n- How many ways to use CSS in a webpage?\n- What is the difference between Pseudo-classes and pseudo-elements?\n- What is the difference between class selectors and id selectors?\n\n\n# JavaScript\n\n### Day 3\n\nJavaScript - How it works?\n\nAdd it into a HTML file\n\nVariables, Operators\n\n#### Interview Questions\n\n- How to add it with HTML?\n- How console works?\n- What is Document?\n- How variables work in JS?\n\n### Day 4\n\nJavaScript \n\nuser input, while loop, do while loop, for loop,\n\nfunctions basics\n\npractice questions\n\n#### Interview Question\n\n\n### Day 5\n\nJavaScript Project\n\nCaptcha Generator\n\n\n### Day 6\n\nJavaScript Projects Part 2\n\nCaptcha Generator\n\n\n### Day 7\n\nJavaScript Array object, different types of array representations.\n\nMethods for stack and queue operations, push pop shift unshift.\n\nArray with for loop, for in , for of,\n\nMultidimensional array\n\nOther important methods: - splice, slice, concat, foreach, indexOf, lastIndexOf, includes, find, filter, reverse, split, join\n\nArray.isArray\n\n\n### Day 8\n\nJavaScript String, Single and dobule quotes, backticks.\n\nSpecial characters: new line character, length,\n\nStrings are immutable\n\nString methods: charAt, toUpperCase, toLowerCase, indexOf, includes, startsWith, endsWidth, slice, substring, substr\n\n\n### Day 9\n\nJavaScript Objects\n\n### Day 10\n\nJavaScript Project Speech Recognition\n\n### Day 11\n\nFunctions\n\nArrow functions\n\n### Day 12\n\nJavaScript Classes\n\n\n### Day 13\n\nReact Basics\n\nWhy React?\n\nCDN - unpkg - React, ReacrDOM and babel\n\nUnderstanding JSX (JavaScript XML)\n\n- JSX Elements\n- Comment\n- Rendering JSX\n- Style and className in JSX\n- Injecting data into JSX\n\n#### Interview Questions\n- What is babel?\n- What is transpiler?\n- What is single page application?\n- What is DOM?\n- What is Virtual DOM?\n\n\n### Day 14\n\nReact create-react-app\n\nInstall these extensions from Visual Studio Code\n\n- Prettier\n- ESLint\n- Bracket Pair Colorizer\n- ES7 React/Redux/GraphQL/React-Native snippets\n- create-react-app\n\nadding first JSX code with react\n\n#### Interview Questions\n- What is module?\n- What is package?\n- What is NPM?\n- What is webpack?\n\n### Day 15\n\nReact first app\n\n- add jsx and render the content\n- Inject Data into JSX\n- Add image in the page\n\n### Day 16\n\n- Components\n\n- Functional Component / Presentational Component / Stateless Component / Dumb Component\n- Class Component / Container Component/ Statefull Component / Smart Component\n\nRendering React Components\n\n#### Interview Questions\n- What is React Component?\n- Difference between normal function and arrow function.\n- How to make reusable react components?\n- How small is a React component?\n- What is the difference between a pure JavaScript function and a functional component?\n\n\n\n### Day 17\n\nReact Props\n\nProps in functional Components\n\nString Props\n\n#### Interview Questions\n- What is props in a React component ?\n- How do you access props in a React component ?\n- What data types can we pass as props to components ?\n\n\n### Day 18\n\nReact Map List Keys\n\nWorking of Map function with Numbers, arrays of arrays, arrays of object.\n\nKey mapping,\n\n#### Interview Questions\n- Why you need to map an array ?\n- Why we need keys during mapping an array ?\n\n\n### Day 19\n\nReact Class Components Statefull components\n\nClass Components, props in class components, methods in class components.\n\nConvert all the functional components into class components.\n\n#### Interview Questions\n- What is inheritance and how do you make a child from a parent class?\n- What is class based React component ?\n- What is the difference between functional React component and class based React component ?\n- When do we need to use class based components instead of functional components\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhemansnation%2Freact35","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhemansnation%2Freact35","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhemansnation%2Freact35/lists"}