作者：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 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