|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/zero-to-hero-react-js-mastery-e-degree-course/
课程评论:没有评论
**零基础到React JS全栈掌握课程总结** 这是一门为期全面、注重实操的React JS进阶课程,旨在帮助学员从零开始,一步步成长为专业的React JS开发者。课程无任何先修要求,所有知识点均从基础讲起,结合大量实际项目案例。 **核心技术栈涵盖:** * **HTML5:** 从Web开发基础、客户端-服务器架构、到HTML文档结构、常用标签(文本、链接、图片、表单、列表、表格、媒体等)、注册表单创建、实用标签(head, body, div, span, header, footer, section, article, iframe)以及HTML实体、内嵌和外链接等。 * **CSS3:** 深入讲解CSS基础,包括文档结构、选择器(内联、内嵌、外部)、开发者工具使用、字体、颜色、边框、背景、盒子模型(margin, padding)、display与visibility、定位、float与clear、z-index、Flexbox布局、响应式设计(媒体查询)、伪类、伪元素、文本与盒子阴影、动画(keyframes)以及过渡和变形效果。 * **JavaScript & ES6:** 覆盖JavaScript入门、ECMAScript演进、数据类型、变量与常量、注释、各种运算符、字符串操作、变量作用域、控制语句(if/else, switch)、循环(for, while)、数组与对象操作、函数、DOM操作、事件处理、定时器、Date与Math对象、JSON、Window与document对象、localStorage/sessionStorage、API调用(Fetch)、三元运算符、Array.filter、调试技巧、ES6特性(Template literals, Object Destructuring, let/const, Spread operator, Arrow functions)。 * **Bootstrap 5 & React JS:** 详细介绍React JS环境搭建、项目结构、组件类型(函数式、类式)、Hooks、JSX、props、state、setState、表单处理、生命周期方法(componentDidMount)。结合Bootstrap 5进行前端布局设计,包括路由(react-router-dom, Link, NavLink)、页面创建(Home, About, Contact)、导航栏组件、404页面。课程还将重点讲解如何连接后端API(如假API),使用useState, useEffect, axios实现数据展示、用户添加、编辑、删除以及详情查看,并展示加载中的Spinner效果。 **课程亮点:** * **全方位覆盖:** 从Web基础到React高阶应用,内容详实。 * **实操驱动:** 大量项目案例,边学边练,巩固知识。 * **循序渐进:** 无需基础,从零开始,层层深入。 * **源码提供:** 完整项目源码,方便学员对照学习和解决疑难。 * **最新技术:** 涵盖React 17及Bootstrap 5最新版本。 完成本课程,学员将具备独立开发React JS应用程序的能力,为成为一名合格的React开发者奠定坚实基础。
In this course, you will learn everything that is needed for you to become a Pro React JS developer in a hands-on step by step approach.There is no prerequisite for this course.Everything will be taught from scratch with practical examples.Following are the technologies that will be covered:HTML5 conceptsHTML5 ProjectsCSS3 conceptsCSS3 ProjectsJavaScript and ES6 conceptsJavaScript and ES6 projectsBootstrap 5 conceptsReactJS (latest version 17) conceptsReactJS projectsThe HTML5 topics that will be covered in the course are:Introduction to web developmentClient-server architectureThree-tier architectureWhat is HTMLWhat is CSSWhat is JavaScriptLocal development environment setup with industry-standard toolsPlugins and techniques to speed up developmentDebugging skillsStructure of HTML pageHML tag and concept of attributesVarious components of HTML documentMeta tag and its importanceHead tagLink tagScript tagDisplay tags like h1 until h6Display tags like paragraph, span, division, labelInline vs block elementsHow to use Entities in HTMLNavigation via an anchor tagButton tagLoading images on your websiteDifferent utility tags to make text bold, italics emphasizeListing tags like ul, olLayout tag like tableHow to create Registration form in HTMLVarious form tags in HTML likeformDifferent types of input tagFile uploadingCreating dropdown with different optionsWriting address in textareaHeader and Footer tagSection and Article tagVideo and Audio tagLoading various websites inside Iframe tagMuch moreYou will get the complete source code so that if you get any doubts anywhere you can just refer the source code.The topics that will be covered for CSS3 are:Introduction to web developmentClient-server architectureThree-tier architectureWhat is HTMLWhat is CSSWhat is JavaScriptLocal development environment setup with industry-standard toolsPlugins and techniques to speed up developmentDebugging skillsStructure of HTML pageHML tag and concept of attributesVarious components of HTML documentMeta tag and its importanceHead tagLink tagScript tagInline, Embedded, External stylingLinking external stylesheet in your HtmlUsing developer tools and knowing various components of itDifferent types of CSS selectorsHow to use fonts, colors, border, background styleBox model in CSSHow to solve problems due to box modelMargin and Padding in CSSDisplay and VisibilityDifferent types of positions in CSSFloat and ClearUsage of z-index propertyCreating layouts using FlexboxResponsive web design using media queriesDifferent types of pseudo-selectors and their usagesBox shadow and Text shadowAnimation and KeyframesTransition and its typesTransformation and its typesYou will get the complete source code so that if you get any doubts anywhere you can just refer the source code.Following are the topics that will be covered in Javascript:Setup InstallationJavaScript IntroductionECMAScript evolutionDifferent types of Data types in JavascriptVariables & ConstantsDifferent types of Comments in JavascriptVarious Operators and their working on OperandsString and String manipulationWhat is Variable ScopingControl statement like if, else, switch-case-breakLoops - for, for of, forEach, while, do-whileWorking with ArraysWorking with ObjectsWhat are Functions and how to create custom functions and call themWhat is the use of PromptWhat is the use of ConfirmWhat is the use of AlertWhat is Document Object Model(DOM)DOM manipulation using JavascriptEvent and Event ListenerSet Timeout and Set IntervalClear Timeout and Clear IntervalDate and Time operation and using its various methodsWorking with Math ObjectWorking with JSONWindow and document objectlocation and historylocalStorage and sessionStorageCalling API with FetchWhat is the Ternary operator and how to use it.What is the Array Filter function and how to use it.Debugging and Troubleshooting in JavaScriptTemplate literals (Template strings) in ES6Object Destructuring assignment in ES6let and constSpread operatorArrow function expressionsWe will also do Multiple projects in order to understand different concepts.You will also get the complete source code of the whole courseFollowing are the topics that will be covered in React JS and Bootstrap:1.1-ReactJS introduction and environment setup1.2-create react app1.3-program flow and project files walkthrough1.4-types of components in react1.5-creating and using 1st functional component1.6-creating 1st stateful class component1.7-ES6 functional component, export and import1.8-comparision between functional and class component1.9-react hooks intro1.10-jsx explained1.11-props in functional and class component1.12-state vs props1.13-deep dive into setState1.14-Handling form in class component part-11.15-Handling form in class component part-21.16-componentDidMount lifecycle onload method2.1-create new react app and understand project structure2.2-project cleanup2.3-installing bootstrap and react vscode extension2.4-create home about contact page2.5-creating navbar component2.6-adding react-router-dom and different routes2.7-Link and NavLink to avoid page reload2.8-Designing About and Contact page2.9-Page not found2.10-Bootstrap vs React-Bootstrap2.11-Using custom styling3.1-setting up backend fake api and db3.2-useState useEffect axios api call and React Dev Tools extension3.3-showing all users on frontend UI3.4-adding action buttons on frontend3.5-add user navigation routing3.6-create Add User form3.7-set state variable data3.8-save new user to DB via post api call3.9-another way to save user data in DB using post api 3.10-edit user prepopulate user data3.11-save updated user in DB3.12-delete a user3.13-view user details3.14-view user address and company info3.15-showing loading spinnerThe complete source is also shared.