编程开源技术交流，分享技术与知识

网站首页 > 开源技术 正文

React.js 项目实践——创建个人作品集网页

wxchong 2024-10-25 17:55:33 开源技术 9 ℃ 0 评论


作者：Jiawei Pan

转发链接：https://mp.weixin.qq.com/s/hDdF8rni6MX4U55l3DKLQw

前言

我的朋友取消了我们的周末聚会计划之后，我就打算做点别的事情打发时间，然后从“to-do-list”中选择了“创建个人作品集网站”这一项。

我花了几个小时搜索技术和模板，然后确定用 React.js 创建这个网页（https://dbarochiya.github.io/me/），并把它部署到 GitHub pages上。你可以在这里（https://github.com/dbarochiya/me）找到网页的代码。

本文将介绍什么

  • React.js 基础知识
  • 使用 create-react-app
  • 使用 GitHub pages 部署你的个人作品集网页

预备知识

提示 1：如果你对 React.js 和 React 组件的基础概念有一定了解可以跳过这部分。

提示 2：这些知识点能让你对 React 的世界有个基础的了解。我非常建议你通过React 官方文档 和 freeCodeCamp 学习更多内容。

什么是 React.js

基本的，你只需要知道 React.js 是一个用来构建 UI 组件的 JavaScript 库，它是由 Facebook 的工程师创建的项目，它正影响着 JavaScript 的世界。

什么是 React 组件

你可以通过类或者函数的方式来定义一个 React 组件，可以向组件传入 props 参数。

页面的 UI 可以通过组件的形式拆分成独立的部分，比如可以分成页头 header、主体 body、页尾 footer。每个组件都是独立运行的，因此每个组件都分别渲染到 ReactDOM（https://reactjs.org/docs/react-dom.html）而不会影响整个页面。

通过 React 组件提供的生命周期方法，可以将想要执行的代码放到组件的 mounting（挂载）、rendering（渲染）、updating（更新）和 un-mounting（卸载）等各个阶段。

使用 React 组件时需要权衡利弊。比如，我们可以通过将组件导出到别的组件中来达到复用的效果，但有时候多个组件间的通信和触发渲染的问题会让人比较头疼。

这是 React 组件的样子。


import React, { Component } from 'react'

export default class Component-name extends Component {
  render() {
    return (
      <div>
        {these code will be rendered into the DOM}
      </div>
    )
  }
}


什么是 GitHub Pages

通过 GitHub Pages，你可以轻松地使用 GitHub 免费部署你的网页，无需担心配置问题。他们提供了各种模块，帮你处理很多事情。如果你坚持到最后，你会发现这就像魔法一样神奇。

预备工作

确定要在网站上放哪些内容

看一下你最新的简历（如果没有就立马创建一份），这会帮助你你理清哪些信息需要被放到作品集网站上。

寻找设计灵感

你可以在网上搜索到大量免费的作品集网站模版，看一下哪些内容适合自己的网站—— 拿出纸和笔，把你对网站的想法通过草图展现出来。我会用这个模板（https://colorlib.com/preview/#jackson）来画草图。

搜集一些你的美照

你肯定不想把自己邋遢的形象展示在作品集网站上，那就找一张你最满意的个人照吧。

打开你的最喜欢的歌单

俗话说得好：好的音乐可以帮助我们创建好的作品。不妨给你的网站增加点音乐！

我的个人作品集网站（https://dbarochiya.github.io/me/）

开始创建项目

接下来我会一步步展示如何创建个人作品集网站。你不需要跟着我写同样的代码，只需要专注于学习概念，然后发挥你的创造力！我会分三部分进行说明。

  1. 设置 React-app
  2. 将 HTML 页面分解成 React 组件
  3. 在 GitHub pages 上部署应用

创建 React-app

我们会使用 create-react-app —— Facebook 提供的一个组件 —— 它可以帮助我们轻松创建 React 应用而不需要担心构建工具。

  • 切换到控制台，执行 npm install create-react-app，安装这个模块（确保在此之前安装了 npm —— 在 https://www.rosehosting.com/blog/install-npm-on-ubuntu-16-04/ 查看更多信息)
  • 接着运行 npm create-react-app ${project-name} 构建代码，创建出来的文件目录结构如下：
my-portfolio-app
├── README.md (GitHub 的项目描述文件)
├── node_modules (存储项目所需的模块)
├── package.json (存储项目源信息，如依赖包，版本号等等)
├── .gitignore (这里声明的文件和目录在提交到 GitHub 时会被忽略，如 node_modules)
├── public (存储图片，js，css文件)
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json 
└── src (应用的主要代码)
    ├── {在这里创建 Components 组件文件}
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js


在 src 目录下创建一个 components 目录，稍后我们会在这里存放组件。

  • 从HTML template 中拷贝所有的图片、字体、HTML 和 CSS 到 public 目录

现在你的目录结构看起来应该像这样。



  • 运行 npm install ，安装所有的模块到 node_module目录中
  • 如果你已经到了这一步了， 那么运行 npm start，React 应用会被加载到 localhost 的 3000 端口，访问 https://localhost:3000，现在你应该能够看到 React-app 的开始页面了

拆分 HTML 页面到 React 组件中

请回忆我们前面在 src 目录下创建的 component 文件夹，现在我们将要把 HTML 模板页面拆分成一个个组件，然后把这些组件拼接起来组成 React 应用。

首先，你需要确定可以把单个 HTML 文件拆分成哪些组件 —— 就像 header、footer 和 contact me。你需要在这里发挥点创造力！！

找到没有在嵌套别的 section/div 标签中的 section/div 标签及其他类似标签，其中应包含有关页面特定部分的信息，并且独立于其他部分。我的 GitHub Repo（https://github.com/dbarochiya/me）有详细介绍这一点。

提示：使用 “inspect element” 工具来演示代码，并注意浏览器中对应的变化。

这些 HTML 会被应用到组件的 render() 方法中。无论组件是否渲染到 ReactDOM，render() 方法都会返回这些 HTML。

<section id="colorlib-hero" class="js-fullheight" data-section="home">
    <div class="flexslider js-fullheight">
        <ul class="slides">
        <li style="background-image: url(images/img_bg_1.jpg);">
            <div class="overlay"></div>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
                        <div class="slider-text-inner js-fullheight">
                            <div class="desc">
                                <h1>Hi! <br>I'm Jackson</h1>
                                <h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
                                    <p><a class="btn btn-primary btn-learn">Download CV <em class="icon-download4"></em></a></p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li style="background-image: url(images/img_bg_2.jpg);">
            <div class="overlay"></div>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
                        <div class="slider-text-inner">
                            <div class="desc">
                                <h1>I am <br>a Designer</h1>
                                    <h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
                                    <p><a class="btn btn-primary btn-learn">View Portfolio <em class="icon-briefcase3"></em></a></p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        </ul>
    </div>
</section>

HTML 文件中的 home 部分


import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return (
      <div>
        <section id="colorlib-hero" className="js-fullheight" data-section="home">
            <div className="flexslider js-fullheight">
                <ul className="slides">
                <li style={{backgroundImage: 'url(images/img_bg_1.jpg)'}}>
                    <div className="overlay" />
                    <div className="container-fluid">
                    <div className="row">
                        <div className="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
                        <div className="slider-text-inner js-fullheight">
                            <div className="desc">
                            <h1>Hi! <br />I'm Jackson</h1>
                            <h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
                            <p><a className="btn btn-primary btn-learn">Download CV <em className="icon-download4" /></a></p>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                </li>
                <li style={{backgroundImage: 'url(images/img_bg_2.jpg)'}}>
                    <div className="overlay" />
                    <div className="container-fluid">
                    <div className="row">
                        <div className="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
                        <div className="slider-text-inner">
                            <div className="desc">
                            <h1>I am <br />a Designer</h1>
                            <h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
                            <p><a className="btn btn-primary btn-learn">View Portfolio <em className="icon-briefcase3" /></a></p>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                </li>
                </ul>
            </div>
        </section>
      </div>
    )
  }
}

将 HTML 的 home 部分创建为 React 组件

提示：如果你暂时不知道怎么把它们变成 React 组件，试着重点关注“如何从 HTML 中辨别需要成为组件的部分”。当你渐渐地适应了 React 的使用，实现功能将会是小菜一碟。

你发现了 HTML 有些变化吗？class 变成了 className。这些变化是因为 React 不支持 HTML 吗？实际上这是 JavaScript 的语法扩展，叫作 JSX，能让我们在 JS 中写 HTML。所以，我们需要在 HTML 基础上做些改变，把它们变成 JSX。

在这个项目中，我使用了 HTML to JSX 转换器（https://magic.reactjs.net/htmltojsx.htm），一个可以将 HTML 转换为 JSX 代码的工具。我非常建议你使用这些工具而不是手动转换代码。

稍后你应该有了几个不同的组件，马上就要到精彩环节了！在 App.js 组件中将这些不同类型的组件结合在一起（没错，你可以从一个组件中渲染另一个组件！），你的个人作品集应用马上就要好了。

import React, { Component } from 'react';
import './App.css';
import Sidebar from './components/sidebar'
import Introduction from './components/introduction'
import About from './components/about'
import Projects from './components/projects'
import Blog from './components/blog'
import Timeline from './components/timeline'

class App extends Component {
  render() {
    return (
      <div id="colorlib-page">
        <div id="container-wrap">
        <Sidebar></Sidebar>
        <div id="colorlib-main">
            <Introduction></Introduction>
            <About></About>
            <Projects></Projects>
            <Blog></Blog>
            <Timeline></Timeline>
              </div>
          </div>
      </div>
    );
  }
}

export default App;

在 app.js 中结合所有组件

注意前面的代码，为了能够在 render() 中使用代码，首先我们需要 import 组件。我们可以将 <component-name></component-name> 或 <component-name/> 将标签添加到方法里。

在终端运行 npm start，然后你应该能在网页上看到变化。当你对代码做出修改时，你不需要再次运行这条命令，只要保存更新，React 会自动响应。多亏了hot reload(热加载) ，我们进行快速轻量级的部署。

根据你简历的内容，使用 HTML 和 CSS 去美化页面，使你的作品集看起来更加炫酷。可以尝试使用使用不同的字体、颜色和图片。

将 React-app 部署到 GitHub pages 上

好了，恭喜你坚持到了这里。奖励一下努力工作的自己，休息一下，然后开始部署吧。

首先，你需要安装 GitHub pages 的 npm 包，在终端运行 _npm install gh-pages_。

现在，你需要修改一下_manifest.json_文件：

  • 添加 _homepage_ 属性，它的值会以这样的格式呈现——https://{github_id}.github.io/{github_repo}
  • 在 _scripts_ 添加 _predeploy_ 和 _deploy_ 属性

现在你的 manifest.json 应该是这样：

{
    "name": "portfolio-app",
    "version": "0.1.0",
    "private": true,
    "homepage": "https://Dhruv34788.github.io/me",
    "dependencies": {
        "gh-pages": "^2.0.1",
        "react": "^16.8.3",
        "react-dom": "^16.8.3",
        "react-scripts": "2.1.5",
        "yarn": "^1.13.0"},
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "predeploy": "yarn run build",
        "deploy": "gh-pages -d build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"},
    "eslintConfig": {
        "extends": "react-app"},
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ]
}

添加 gh-pages 链接后的 manifest.json

现在转到终端界面，运行 npm run deploy 命令，然后等待神奇事情发生。你的应用会在脚本成功执行后部署。访问你在 homepage 中提供的地址，检查应用是否正确部署。

提醒： 将任何东西部署到网上前请务必认真仔细。进行安全检查，移除内部链接、密码或者任何你不想被别人看到的东西。

留给你的作业

好棒，你成功创建并部署了个人作品集应用！如果你有兴趣，可以将这些功能添加到你的网站中：

  • 博客功能： 通过 Node.js 好像 MongoDB 这样的非关系型数据库创建你的个人博客并整合到你的网站中。
  • 图册展示： 在页面中添加一个区域，展示你在社交媒体网站最近发布的照片
  • 来自 Twitter 的反馈： 在页面中添加一个展示你最近的推文的区域
  • 随机的名人名言： 在页面中添加一个随机展示名人名言的区域

如果你实现了任何一个功能，请和我分享你的成果。我非常乐意帮助别人，如果我帮得上的话^_^

推荐React 学习相关文章

《细聊 React 是如何创建 vdom 和 fiber tree「实践」》

《深入浅出 React V16.4 生命周期的来龙去脉》

《在 React 中进行事件驱动的状态管理「实践」》

《一文带你搞懂React-native源码解析》

《常见的8个问题带你进阶 React》

《分析 React 组件的渲染性能「实践」》

《实践React Router v5：完整指南》

《前端必备的20种基本React工具「干货」》

《8个顶级React.js免费模板》

《推荐36种免费React模板和主题「干货」》

《「笔记」React Hooks 深入细品系列》

《这就是你日思夜想的 React 原生动态加载「值得收藏」》

《「干货满满」React Hooks 最佳实践》

《手把手教你如何实现一个React水印组件「实践」》

《「实践」React 中必会的 10 个概念》

《「干货」深入浅出React组件逻辑复用的那些事儿》

《手把手教你从Mixin深入到HOC再到Hook【React】》

《深入Facebook 官方React 状态管理器Recoil讲解》

《手把手教你实践搭建React组件库「超详细」》

《在 React 中自动复制文本到剪贴板「实践」》

《「干货满满」从零实现 react-redux》

《深入详解大佬用33行代码实现了React》

《让你的 React 组件性能跑得再快一点「实践」》

《React源码分析与实现(三)：实践 DOM Diff》

《React源码分析与实现(一)：组件的初始化与渲染「实践篇」》

《React源码分析与实现(二)：状态、属性更新->setState「实践篇」》

《细说React 核心设计中的闪光点》

《手把手教你10个案例理解React hooks的渲染逻辑「实践」》

《React-Redux 100行代码简易版探究原理》

《手把手深入教你5个技巧编写更好的React代码【实践】》

《React 函数式组件性能优化知识点指南汇总》

《13个精选的React JS框架》

《深入浅出画图讲解React Diff原理【实践】》

《【React深入】React事件机制》

《Vue 3.0 Beta 和React 开发者分别杠上了》

《手把手深入Redux react-redux中间件设计及原理（上）【实践】》

《手把手深入Redux react-redux中间件设计及原理（下）【实践】》

《前端框架用vue还是react？清晰对比两者差异》

《为了学好 React Hooks, 我解析了 Vue Composition API》

《【React 高级进阶】探索 store 设计、从零实现 react-redux》

《写React Hooks前必读》

《深入浅出掌握React 与 React Native这两个框架》

《可靠React组件设计的7个准则之SRP》

《React Router v6 新特性及迁移指南》

《用React Hooks做一个搜索栏》

《你需要的 React + TypeScript 50 条规范和经验》

《手把手教你绕开React useEffect的陷阱》

《浅析 React / Vue 跨端渲染原理与实现》

《React 开发必须知道的 34 个技巧【近1W字】》

《三张图详细解说React组件的生命周期》

《手把手教你深入浅出实现Vue3 & React Hooks新UI Modal弹窗》

《手把手教你搭建一个React TS 项目模板》

《全平台（Vue/React/微信小程序）任意角度旋图片裁剪组件》

《40行代码把Vue3的响应式集成进React做状态管理》

《手把手教你深入浅出React 迷惑的问题点【完整版】》

作者：Jiawei Pan

转发链接：https://mp.weixin.qq.com/s/hDdF8rni6MX4U55l3DKLQw

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表
赣ICP备2023011894号-2