使用React和GitHub Student 开发工程师 Pack创建一个投资组合

嘿，在这个博客中，我们将使用React和GitHub Student 开发工程师 Pack提供的工具创建一个Portfolio网站。

什么是theGitHub学生开发者包？从来没有听说过。

云托管服务，域名，特定软件等真实世界的工具对学生来说可能是昂贵的。这就是GitHub与其他科技公司合作创建学生开发者包的原因，让学生可以在一个地方免费访问最好的开发者工具。

那很棒。学生开发者包中包含了哪些内容？

目前，包中包含23种服务和工具，可供学生使用。一些服务是50美元的数字海洋学分，免费的Heroku Hobby Dev Dyno两年，免费的.me域名，通过SendGrid发送更高限制的电子邮件，通过Travis CI进行私人持续集成等等。

真棒。我怎么申请呢？

要申请GitHub学生开发者包，您需要成为当前学生。如果您不是学生，那么您就没有资格获得该奖学金。通过https://education.github.com/pack申请学生开发者包。点击获取包，然后按照屏幕上的请求进行操作。如果您没有以.edu结尾的学校发布的电子邮件地址，您还需要有效的学校ID或其他注册证明，如您的日程表图片，GitHub团队将对其进行审核。要求审核需要24到48小时。

关于接下来会发生什么的总结

在本博客中，我们将使用React和GitHub Student 开发工程师 Pack提供的工具创建一个Portfolio网站。为此，我们将使用Pack中的免费Heroku dyno和免费的Namecheap域名。我们还将使用GitHub来推送我们的代码并部署到GitHub页面。

入门

在深入研究编码部分之前，我们将首先安装所需的工具。我将使用纱线包经理。您可以在https://yarnpkg.com/lang/en/docs/install/找到安装纱线的说明。
1.反应
使用以下命令安装并创建名为portfolio的react应用程序
纱线创造反应组合

2. Heroku CLI
执行以下命令在Ubuntu 16+ OS上安装Heroku CLI。
curl https://cli-assets.heroku.com/install-ubuntu.sh | SH
有关所有其他操作系统的说明，请访问https://devcenter.heroku.com/articles/heroku-cli
确保使用heroku login命令登录Heroku CLI。

3.使用安装gh-pages和fontawesome软件包
纱添加gh页
纱线添加@ fortawesome / fontawesome-svg-core
yarn add @ fortawesome / free-solid-svg-icons
添加@ fortawesome / react-fontawesome
yarn add @ fortawesome / free-brands-svg-icons

编码投资组合

我们将使用Bootstrap 4的简历模板来构建我们的产品组合。模板可以在这里找到。 https://github.com/BlackrockDigital/startbootstrap-resume

复制jquery和bootstrap
在公用文件夹中创建目录css和js，并从下载的模板中将以下文件复制到该文件夹​​中。
1. bootstrap.min.css
2. resume.min.css
3. bootstrap.bundle.min.js
4. jquery.easing.min.js
5. jquery.min.js
6. resume.min.js

链接添加的依赖项
打开公共目录中的index.html并链接复制的css和js，如下所示：
对于CSS对于Javascript

将模板添加到基于React Component的结构
Bootstrap简历模板需要拆分为组件。在src目录中创建一个目录组件，其中包含所有组件。我们将它分为以下7个组件：
1. Sidebar.js
2. Landing.js
3. Experience.js
4. Education.js
5. Skills.js
6.兴趣.js
7. Awards.js

使用json作为用户数据存储
在.src目录中创建一个名为profileData.json的json文件。该文件将保存用户的投资组合数据。 json文件的结构如下：

json的每个键都是以将要使用的数据的组件命名的。

修改App.js.
App.js是导入所有其他组件并定义网站结构的主文件。

首先，我们从创建的json导入所有创建的组件和用户的数据。在构造函数中，我们使用来自json的相应数据为每个组件设置状态。来自状态的这些数据将作为道具传递给组件。然后根据Bootstrap的模板排列所有组件。

创建Sidebar.js
补充工具栏组件包含网站侧边栏的代码。这是模板中的完整导航标记。在从模板复制代码之前，请确保使其符合jsx。 class应重命名为className，或者您可以使用此https://magic.reactjs.net/htmltojsx.htm将您的html转换为jsx。

在每个组件的构造函数中，来自props的数据将被分配给一个变量，通过该变量将它添加到jsx中的相关位置。

对于补充工具栏组件，这是以this.sidebarData = props.sidebarData完成的。对于所有其他组件，它以类似的方式完成。

用json中的数据替换所有硬编码的名称和字段。为此，请通过传递给组件的props的变量来引用json数据。在jsx中引用变量的语法是引用花括号中的变量。因此，侧边栏中用户的名字可以作为{this.sidebarData.firstName}访问。可以以类似的方式访问所有其他数据字段并用来自json的数据替换。
在GitHub上的以下链接中找到Sidebar.js。

阿努邦-达加尔/ GitHub的教育，投资组合/ src目录/组件/ Sidebar.js
GitHub Education Portfolio.github.com的Sidebar.js源代码

创建Landing.js
Landing.js以类似的方式创建。 id为about的第一部分是所需的登陆部分html。首先，来自props的数据被加载到构造函数中，并被添加到组件的jsx中。

阿努邦-达加尔/ GitHub的教育，投资组合/ src目录/组件/ Landing.js
GitHub Education Portfolio.github.com的Landing.js源代码

创建Skills.js
json数据中用户的技能是字典列表。要将此添加到jsx，使用地图将来自props的已加载数据循环，并将数据插入到jsx中。

其中this.skills是从profileData.json加载的用户的技能数据

以类似的方式创建其他组件。使用yarn start运行服务器，在浏览器中的http:// localhost：3000上查看您的产品组合。

使用GitHub Student 开发工程师 Pack

使用Namecheap获取免费.me域名
转到https://education.github.com/pack/offers并查找Namecheap。通过在Namecheap上连接您的GitHub帐户获取免费域名。

授权Namecheap，然后找到您的免费​​域名。获取域名后，转到您的域名列表，然后点击“管理”以管理您的域名。
单击Advanced DNS选项卡并查找Host Records。单击“添加新记录”按钮以添加新记录。添加以下记录：

将githubusername.github.io替换为您的实际GitHub用户名。在此之后，您的域已准备好与GitHub页面一起使用。

使用GitHub使用GitHub页面托管您的投资组合。
在项目的根目录中，按如下方式初始化git存储库
git init。转到GitHub并创建一个名为githubusername.github.io的空存储库，这里用您的实际GitHub用户名替换githubusername。复制您的仓库的git链接，并将其添加到您当地的git仓库，如下所示
git remote add origin

在目录的根目录中创建一个名为CNAME的文件，并以yournamecheapdomain.me格式添加您的namecheap域名并保存。

添加2个脚本预先部署并部署到package.json中的脚本，如下所示。

“预先部署”：“纱线运行构建”，
“部署”：“gh-pages -d build”

这两个脚本都应该在package.json的scripts键中。还要将一个主页键添加到package.json并将其设置为http://yournamecheapdomain.me/。

运行yarn run deploy以将代码推送到gh-pages分支并从中托管它。前往http://yournamecheapdomain.me/查看您的托管组合。

通过执行以下步骤将代码推送到主控：

git add -A
git commit -m“推送投资组合代码”
git push origin master

在Heroku上托管您的投资组合
使用GitHub学生开发包，您将获得Heroku的免费Hobby Dev Dyno。通过https://education.github.com/pack/offers转到Heroku，并将您的GitHub帐户与Heroku连接。

该过程涉及Heroku团队的人工验证，可能需要一两天才能获得批准。在请求获得批准后，该应用程序已准备好与Hobby Dev Dyno一起部署在您的Heroku帐户上。

要部署您的应用程序，请务必登录Heroku CLI。另外，在package.json中添加一个新对象，如下所示：

“引擎” ： {
“npm”：“6.4.1”，
“节点”：“10.5.2”
}

您可以通过在终端中运行npm -v来运行节点-v和npm版本来获取节点版本。

通过执行heroku create appname创建一个Heroku应用程序，其中appname是您的投资组合的appname选择。如果你还没有提交你的代码并做git push heroku master。等待Heroku完成部署。

运行heroku打开以打开在Heroku上托管的应用程序。

就是这样，就这么简单。

GitHub Pages部署版本位于http://anupamdagar.com/GitHub-Education-Portfolio/

Heroku部署版本位于https://studentpackportfolio.herokuapp.com/

该应用程序的完整源代码位于GitHub上

阿努邦-达加尔/ GitHub的教育，投资组合
通过在GitHub.github.com上创建一个帐户，为Anupam-dagar / GitHub-Education-Portfolio开发做出贡献

关于我

嗨，我是Anupam Dagar，来自印度信息技术学院阿拉哈巴德的信息技术本科生。我是GitHub校园专家，开源贡献者和全栈开发人员。要了解更多关于我的信息，请在Twitter或GitHub上与我联系