React Responsive Portfolio Website – Complete React Project

构建 React 投资组合网站、React Context API、从 React 应用程序发送电子邮件、React Hooks、React Packages、React 主题。

你将会学到的

  • 您将建立一个完整的响应式投资组合网站
  • 您将学习如何使用 node js、express js、nodemailer 和 sendgrid 从 react js 应用程序发送电子邮件
  • 你将学习不同类型的 react js hooks
  • 您将学习如何添加深色和浅色主题
  • 反应 js 上下文 API
  • 如何使用引导程序构建响应式网站
  • 如何将 React js 项目部署到 netlify
  • 如何从您的投资组合网站下载简历

要求

  • 本课程学员无需具备任何 React js 的先验知识

说明

欢迎来到这个 react js 课程。在本课程中,您将学习如何构建一个完整的响应式投资组合网站。完成本课程后,您将拥有一个真实的投资组合网站,您将学习如何将您的网站部署到 Netlify 云服务器,以便世界各地的任何人都可以使用。

以下是您将从本课程中学到的列表:

  1. React 投资组合网站。
  2. 上下文 API 添加深色和浅色主题。
  3. 引导使我们的网站响应任何设备。
  4. 打字效果。
  5. React JS 垂直时间线组件显示工作经验和教育部分。
  6. React js 加载了更多的分页功能。
  7. 具有折叠功能的 React js 侧边栏
  8. React js 光滑的滑块。您将学习如何显示响应式滑块以显示推荐。
  9. React js 发布请求以从联系表单发送电子邮件。
  10. React js 条件渲染为不同的项目生成不同的颜色。
  11. Node js 和 express js 用于从后端发送电子邮件。
  12. 如何在邮递员中测试 API 端点以发送电子邮件。
  13. 在第一次加载和滚动时为我们应用程序的不同项目反应 js 动画。
  14. 如何在 React js 前端应用程序中添加返回顶部滚动功能。
  15. 主题功能 – 我们的 react js 应用程序的深色主题和浅色主题。
  16. 如何使用 node js、express js 和发送网格从 react js 发送电子邮件。
  17. 对鼠标悬停效果做出反应
  18. React js Hooks
  19. 引导以响应式响应 js 应用程序
  20. 如何将 React js 应用程序部署到 Netlify。

深色和浅色主题功能:您将学习如何动态更改反应应用程序主题颜色。我们将使用 react Context API 来添加深色和浅色主题功能。

React Accordion 功能:您将在项目部分构建 React Accordion 系统。如果手风琴打开和 onMouseHover 效果,您还将学习如何标记单个项目。

React Context API:  我们将使用 React Context API 来添加深色和浅色主题功能。

您将用于构建完整的 react js 应用程序的 React Hooks:

  • 使用状态
  • 创建上下文

您将在本课程中使用的不同软件包:

  1. React 平滑滚动 –  当用户单击导航栏时,我们将使用此包从一个部分滚动到另一个部分。
  2. 打字效果 –我们将使用这个包为我们的应用程序添加不同类型的书写效果。
  3. React slick slider –  我们将在我们的推荐部分使用这个包,我们将在滑块中显示推荐列表。我们还将确保我们的滑块能够响应任何设备。
  4. React toastify –当我们的用户从联系表单发送电子邮件时,向他们显示 toast 消息。
  5. 返回顶部滚动 –此包将用于滚动到顶部功能。在单页 Web 应用程序中,我们在一个页面上有很多部分。因此,当我们的用户滚动到页面的最后一部分时,用户需要再次滚动才能到达顶部。为了解决这个问题,我们将使用返回滚动功能,以便他们只需单击按钮,然后它会自动转到顶部。
  6. React reveal –这个包将帮助我们显示每个项目的动画。您将学习如何为您的 react js 应用程序中的任何字段添加动画。
  7. React Vertical Timeline Component –为了展示工作经验和教育,我们将使用带有动画和自定义设计的垂直时间轴组件。
  8. NodeMailer –   要发送电子邮件,我们将使用带有 node js、express js 和 sendgrid 的 nodemailer。

此课程面向哪些人:

  • 如果你想使用 react js 构建一个完整的投资组合网站
  • 如果你正在学习 react js 并想构建一个完整的项目
  • 如果你想提高你的 react js 技能
  • 如果您想学习如何使用支持任何类型设备的 react js 构建响应式网站
声明:本站所有资源、素材等全部来源于互联网,赞助VIP仅用于对IT资源服务器带宽等费用支出做支持,从本站下载资源,说明你已同意本条款。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
TheItzy » React Responsive Portfolio Website – Complete React Project