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

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

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

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

推荐阅读
1的4,723

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

目前,包中包含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上与我联系

资讯来源:由0x资讯编译自HACKERNOON。版权归作者所有,原文链接:https://hackernoon.com/create-a-portfolio-using-react-and-github-student-developer-pack-955379207855?source=collection_category—4——2———————–。未经许可,不得转载