|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/react-responsive-portfolio-website-complete-react-project/
课程评论:没有评论
课程名称:React 响应式个人作品网站 - 完整的 React 项目 概述:欢迎参加本次 React JS 课程。在本课程中,您将学习如何构建一个完整的响应式个人作品网站。完成本课程后,您将拥有一个真实的作品网站,并学习如何将其部署到 Netlify 云服务器,以便全球用户访问。课程内容包括以下几点: 1. **React 个人作品网站**:掌握创建和设计个人作品集网站的基本技能。 2. **上下文 API**:学习如何实现暗黑主题和亮色主题的切换。 3. **Bootstrap**:使网站在各种设备上具有响应式设计。 4. **打字效果**:在网站中添加打字动画效果。 5. **垂直时间轴组件**:展示工作经验和教育背景。 6. **加载更多功能**:实现分页功能,允许用户加载更多项目。 7. **侧边栏折叠功能**:添加可折叠的侧边栏以优化用户体验。 8. **轮播图**:使用滑块展示推荐语或客户反馈。 9. **联系表单的邮件发送**:使用 React JS 通过后台发送邮件。 10. **条件渲染**:根据不同项目生成不同颜色的展示效果。 11. **Node.js 和 Express.js**:处理后端邮件发送请求。 12. **API 测试**:学习如何使用 Postman 测试发送邮件的 API 接口。 13. **加载动画和滚动效果**:为初始加载和滚动时的元素添加动画效果。 14. **返回顶部功能**:实现快速返回页面顶部的功能。 15. **动态主题切换**:使用 React Context API 动态改变主题色。 16. **React Hooks**:使用 useState 和 createContext 构建完整的 React 应用。 17. **使用的第三方库**:包括 React 平滑滚动、打字效果、React 滑块、React toastify、返回顶部滚动和 React reveal 等库来增强应用功能与用户体验。 整个课程将帮助您掌握使用现代前端技术创建高质量、响应式的网站的能力,并能把您的项目成功部署到云端。
Welcome to this react js course. In this course, you will learn how to build a complete responsive portfolio website. After finishing this course you will have a real-world portfolio website and you will learn how to deploy your website to Netlify cloud server so that anyone can from around the world.Here are the lists that you are gonna learn from this course:React portfolio website.Context API to add Dark and Light theme.Bootstrap to make our website responsive for any device.Typewriting effect.React JS Vertical timeline component to show work experience and education section.React js loads more pagination features.React js sidebar with collapse featuresReact js slick slider. You will learn how to show a responsive slider to show testimonials.React js post request to send email from contact form.React js conditional rendering to generate different colors for different items.Node js and express js for sending emails from the backend.How to test API endpoint in postman for sending an email.React js animation for different items of our app while loading the first time and scrolling.How to add back-to-top scroll features in react js front end app.Theme Features - Dark theme and light theme for our react js app.How to send email from react js using node js, express js, and send grid.React on mouse Hover effectReact js HooksBootstrap to make react js app responsivelyHow to deploy react js app to Netlify.Dark and Light theme Features: You will learn how to dynamically change react app theme color. We will use react Context API to add dark and light theme features.React Accordion Features: You will build react accordion system in the project section. You will also learn how to mark a single item if the accordion is open and onMouseHover Effect.React Context API: We will use react context API to add dark and light theme features.React Hooks that you will use to build the complete react js app:useStatecreateContextDifferent packages that you will use in this course:React smooth scrolling - We will use This package to scroll from one section to another section when user clicks on the navbar. Typewriting effect - We will use this package to add different types of writing effects to our app.React slick slider - We will use this package for our testimonial section where we will show a list of testimonials in the slider. We will also make sure that our slider is responsive to any device.React toastify - To show toast messages to our users when they send emails from the contact form.Back-to-top scroll - This package will be used for scroll-to-top features. In a single-page web app, we have many sections on one page. Therefore when our user scrolls to the last section of the page the user again needs to scroll to reach the top section. To solve this problem we will use back-to-scroll features so that they can just click on the button and then it automatically goes to the top section.React reveal - This package will help us to show animation for each item. You will learn how to add animation for any fields in your react js app.React Vertical Timeline Component - To show work experience and education we will use a vertical timeline component with animation and custom design.NodeMailer - To send e-maill we will use nodemailer with node js, express js and sendgrid.