React.js 项目实践——创建个人作品集网页
gaoyangw 2024-11-13 10:36 17 浏览 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/）
开始创建项目
接下来我会一步步展示如何创建个人作品集网站。你不需要跟着我写同样的代码，只需要专注于学习概念，然后发挥你的创造力！我会分三部分进行说明。
- 设置 React-app
- 将 HTML 页面分解成 React 组件
- 在 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 原生动态加载「值得收藏」》
《手把手教你从Mixin深入到HOC再到Hook【React】》
《深入Facebook 官方React 状态管理器Recoil讲解》
《React源码分析与实现(一)：组件的初始化与渲染「实践篇」》
《React源码分析与实现(二)：状态、属性更新->setState「实践篇」》
《手把手教你10个案例理解React hooks的渲染逻辑「实践」》
《Vue 3.0 Beta 和React 开发者分别杠上了》
《手把手深入Redux react-redux中间件设计及原理（上）【实践】》
《手把手深入Redux react-redux中间件设计及原理（下）【实践】》
《为了学好 React Hooks, 我解析了 Vue Composition API》
《【React 高级进阶】探索 store 设计、从零实现 react-redux》
《深入浅出掌握React 与 React Native这两个框架》
《你需要的 React + TypeScript 50 条规范和经验》
《手把手教你深入浅出实现Vue3 & React Hooks新UI Modal弹窗》
《全平台（Vue/React/微信小程序）任意角度旋图片裁剪组件》
作者：Jiawei Pan
转发链接：https://mp.weixin.qq.com/s/hDdF8rni6MX4U55l3DKLQw
相关推荐
- 网站建设全流程指南:从需求分析到上线运营
-
建网站看似步骤繁多，但实际上可以依照既定的流程和步骤逐一完成。从需求调研到正式上线运营，每一个步骤都不可或缺。接下来，我将详细地为大家介绍网站建设的各个阶段和流程。需求分析首先，要弄清楚网站建设的初衷...
- 建网站流程详解:从目标到设计的关键步骤
-
今天咱们讨论一下建网站的话题。说起来，建网站并不复杂。只要掌握了几个基础步骤和技巧，就能打造出属于自己的网站。我已经把建站流程归纳了一下，现在来给大家详细介绍一下。明确目标先要弄明白建网站的目的。若是...
- 网站建设全流程:从规划到上线的关键步骤
-
建立一个网站，需要考虑的要素颇多。从最初的策略制定到最终的上线与维护，每个环节都至关重要。接下来，我将逐一阐述网站建设所涵盖的具体内容。规划设计首先，得制定一个明确的计划。计划中要确定网站的目的和方向...
- 网站建设全流程解析:从目标到功能实现
-
打造一个网站并不简单，它涉及多个操作步骤。接下来，我会逐一为大家解说网站建设的具体流程，以及每个环节需要注意的点，帮助大家掌握关键步骤，顺利构建个人网站。确定目标和需求建网站前先要搞清楚目标。若是电商...
- 网站建设不易，详细介绍其具体流程的规划与操作
-
搭建网站并非易事，需我们逐步推进。从最初的规划阶段到最终上线及后续维护，每一步都不可轻视。接下来，我将为大家详细介绍网站建设的具体流程。确定网站定位首先，我们要搞清楚这个网站是做什么的。它是企业展示平...
- 从零开始教你APP推广:关键词分词组词
-
“如何有效拓展关键词覆盖数?优化OK的关键词如何保持排名?为何我优化的关键词没带来显著新增?这3个问题可能也是大家在优化过程中挥之不去的难题。其实这三个问题都是由一个问题所带来的：关键词的设置不合理。...
- 我，一个月外贸询盘300+告诉你谷歌推广怎么找关键词!
-
如何在谷歌推广中找到适合自己的关键词，却是很多人头疼的问题。我作为一家激光雕刻机工厂的优化师，现在一个月有300+的有效询盘，今天将会分享一下我的经验，告诉大家如何通过谷歌推广找到适合自己的关键词。一...
- 直通车标准计划和智能计划是否会相互起冲突?
-
智能计划出来以后，标准计划与智能计划就经常被区分开讨论，相互比较，哪个效果好、在免费流量拉动上会不会有区别；又担心是否会互相影响，今天就来细细的说一下标准计划与智能计划。标准计划和智能计划的区别是什么...
- SEM推广的关键词匹配方式是什么?（sem推广关键词优化方式有哪些）
-
百度推广总共包含三种匹配方式，精确(相同/相近)、短语(包含)、广泛(相关)，在推广中利用最多的是精确和【短语（精确包含）】，广泛慎用。核心重点匹配方式：短语有分为：精确包含、同义包含、核心包含...
- 微信搜一搜SEO排名优化中，标题关键词布局有何技巧?
-
一、引言...
- 搜狗推广怎样做关键词数据分析?（搜狗推广是什么意思）
-
搜狗推广关键词数据分析其实和百度，360，神马推广差不多，但是为什么要单独列文来说明呢？是因为由于搜索关键词报告不存在点击为0的关键词，就造成找不到大量有展现没点击的关键词，这和百度推广等媒体是不同的...
- 网络营销推广介绍网站该如何布置关键词?
-
网络营销推广表示网站在进行优化的时候，关键词优化也是非常重要的一环，更合理的把网站关键词进行布局和设置，会更好地给网站形成一种体系，更有力的帮助网站提升收录，进而更利于提升排名，那么对于网站优化中该如...
- 做竞价推广怎样挖掘挑选关键词?（竞价推广关键词逻辑）
-
从本质上来讲，竞价推广就是花钱买流量。关键词选择是否合适，将直接影响到我们推广的成本和线索量。如果关键词选的不合适，成本就会很高，甚至于消费，不转化。在关键词选择上，我们不仅要选对的，更要选择合适的。...
- 搜索推广经验——闲扯关键词的淡（搜索推广关键词怎么出价）
-
一、我们认为的关键词关键词，对电商人尤其是做网络营销推广方面的人来说，是最熟悉不过了！关键词贯穿了网络营销推广的整个过程中，选择产品，筛选关键词，围绕关键词编写文案策划，然后做关键词的排名等！这些都...
- 深圳百快抖网络:网络推广如何选择合适的关键词?
-
对于网络推广来说，恰当地选择关键词是推广成功与否的关键。关键词选择不恰当，网络推广工作可能会长时间卡在第一步，迟迟不能达到推广目的。那么网络推广应当如何选择关键词呢？我们需要考虑以下几点：...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 网站建设 (107)
- 网站开发 (47)
- 网络推广哪个平台好 (47)
- 百度收录 (50)
- 搜索引擎排名优化 (49)
- 关键词优化工具 (51)
- 外贸网站建设 (56)
- seo整站优化吧 (50)
- 广州seo (47)
- 苏州网站建设 (59)
- 百度搜索推广 (61)
- 关键词优化公司 (51)
- 网页制作 (47)
- 广州网站建设 (48)
- 电商网站建设 (49)
- 百度站长平台 (48)
- 网站收录查询 (46)
- 网站模板 (51)
- 厦门网站建设 (52)
- 百度快照推广 (51)
- 免费网页在线客服系统 (53)
- 雷神代刷网站推广 (53)
- 长尾关键词 (47)
- 手机网站建设 (53)
- 一键优化 (47)