风君子博客很多朋友对于net源码分享的网站建设步骤和.net搭建网站不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
作者：JiaweiPan
转发链接：https://mp.weixin.qq.com/s/hDdF8rni6MX4U55l3DKLQw
前言
我的朋友取消了我们的周末聚会计划之后，我就打算做点别的事情打发时间，然后从“to-do-list”中选择了“创建个人作品集网站”这一项。
我花了几个小时搜索技术和模板，然后确定用React.js创建这个网页（https://dbarochiya.github.io/me/），并把它部署到GitHubpages上。你可以在这里（https://github.com/dbarochiya/me）找到网页的代码。
本文将介绍什么
React.js基础知识使用create-react-app使用GitHubpages部署你的个人作品集网页
预备知识
提示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组件的样子。
importReact,{Component}from&39;\n\nexportdefaultclassComponent-nameextendsComponent{\nrender(){\nreturn(\n<div>\n{thesecodewillberenderedintotheDOM}\n</div>\n)\n}\n}
什么是GitHubPages
通过GitHubPages，你可以轻松地使用GitHub免费部署你的网页，无需担心配置问题。他们提供了各种模块，帮你处理很多事情。如果你坚持到最后，你会发现这就像魔法一样神奇。
预备工作
确定要在网站上放哪些内容
看一下你最新的简历（如果没有就立马创建一份），这会帮助你你理清哪些信息需要被放到作品集网站上。
寻找设计灵感
你可以在网上搜索到大量免费的作品集网站模版，看一下哪些内容适合自己的网站——拿出纸和笔，把你对网站的想法通过草图展现出来。我会用这个模板（https://colorlib.com/preview/34;colorlib-hero&34;js-fullheight&34;home&34;flexsliderjs-fullheight&34;slides&34;background-image:url(images/img_bg_1.jpg);&34;overlay&34;container-fluid&34;row&34;col-md-6col-md-offset-3col-md-pull-3col-sm-12col-xs-12js-fullheightslider-text&34;slider-text-innerjs-fullheight&34;desc&39;mJackson</h1>\n<h2>100%html5bootstraptemplatesMadeby<ahref=&34;target=&34;>colorlib.com</a></h2>\n<p><aclass=&34;>DownloadCV<emclass=&34;></em></a></p>\n</div>\n</div>\n</div>\n</div>\n</div>\n</li>\n<listyle=&34;>\n<divclass=&34;></div>\n<divclass=&34;>\n<divclass=&34;>\n<divclass=&34;>\n<divclass=&34;>\n<divclass=&34;>\n<h1>Iam<br>aDesigner</h1>\n<h2>100%html5bootstraptemplatesMadeby<ahref=&34;target=&34;>colorlib.com</a></h2>\n<p><aclass=&34;>ViewPortfolio<emclass=&34;></em></a></p>\n</div>\n</div>\n</div>\n</div>\n</div>\n</li>\n</ul>\n</div>\n</section>
HTML文件中的home部分
importReact,{Component}from&39;\n\nexportdefaultclassHomeextendsComponent{\nrender(){\nreturn(\n<div>\n<sectionid=&34;className=&34;data-section=&34;>\n<divclassName=&34;>\n<ulclassName=&34;>\n<listyle={{backgroundImage:&39;}}>\n<divclassName=&34;/>\n<divclassName=&34;>\n<divclassName=&34;>\n<divclassName=&34;>\n<divclassName=&34;>\n<divclassName=&34;>\n<h1>Hi!<br/>I&34;https://colorlib.com/&34;_blank&34;btnbtn-primarybtn-learn&34;icon-download4&39;url(images/img_bg_2.jpg)&34;overlay&34;container-fluid&34;row&34;col-md-6col-md-offset-3col-md-pull-3col-sm-12col-xs-12js-fullheightslider-text&34;slider-text-inner&34;desc&34;https://colorlib.com/&34;_blank&34;btnbtn-primarybtn-learn&34;icon-briefcase3&39;react&39;./App.css&39;./components/sidebar&39;./components/introduction&39;./components/about&39;./components/projects&39;./components/blog&39;./components/timeline&34;colorlib-page&34;container-wrap&34;colorlib-main&34;name&34;portfolio-app&34;version&34;0.1.0&34;private&34;homepage&34;https://Dhruv34788.github.io/me&34;dependencies&34;gh-pages&34;^2.0.1&34;react&34;^16.8.3&34;react-dom&34;^16.8.3&34;react-scripts&34;2.1.5&34;yarn&34;^1.13.0&34;scripts&34;start&34;react-scriptsstart&34;build&34;react-scriptsbuild&34;predeploy&34;yarnrunbuild&34;deploy&34;gh-pages-dbuild&34;test&34;react-scriptstest&34;eject&34;react-scriptseject&34;eslintConfig&34;extends&34;react-app&34;browserslist&34;>0.2%&34;notdead&34;notie<=11&34;notop_miniall”\n]\n}
添加gh-pages链接后的manifest.json
现在转到终端界面，运行npmrundeploy命令，然后等待神奇事情发生。你的应用会在脚本成功执行后部署。访问你在homepage中提供的地址，检查应用是否正确部署。
提醒：将任何东西部署到网上前请务必认真仔细。进行安全检查，移除内部链接、密码或者任何你不想被别人看到的东西。
留给你的作业
好棒，你成功创建并部署了个人作品集应用！如果你有兴趣，可以将这些功能添加到你的网站中：
博客功能：通过Node.js好像MongoDB这样的非关系型数据库创建你的个人博客并整合到你的网站中。图册展示：在页面中添加一个区域，展示你在社交媒体网站最近发布的照片来自Twitter的反馈：在页面中添加一个展示你最近的推文的区域随机的名人名言：在页面中添加一个随机展示名人名言的区域
如果你实现了任何一个功能，请和我分享你的成果。我非常乐意帮助别人，如果我帮得上的话^_^
推荐React学习相关文章
《细聊React是如何创建vdom和fibertree「实践」》
《深入浅出ReactV16.4生命周期的来龙去脉》
《在React中进行事件驱动的状态管理「实践」》
《一文带你搞懂React-native源码解析》
《常见的8个问题带你进阶React》
《分析React组件的渲染性能「实践」》
《实践ReactRouterv5：完整指南》
《前端必备的20种基本React工具「干货」》
《8个顶级React.js免费模板》
《推荐36种免费React模板和主题「干货」》
《「笔记」ReactHooks深入细品系列》
《这就是你日思夜想的React原生动态加载「值得收藏」》
《「干货满满」ReactHooks最佳实践》
《手把手教你如何实现一个React水印组件「实践」》
《「实践」React中必会的10个概念》
《「干货」深入浅出React组件逻辑复用的那些事儿》
《手把手教你从Mixin深入到HOC再到Hook【React】》
《深入Facebook官方React状态管理器Recoil讲解》
《手把手教你实践搭建React组件库「超详细」》
《在React中自动复制文本到剪贴板「实践」》
《「干货满满」从零实现react-redux》
《深入详解大佬用33行代码实现了React》
《让你的React组件性能跑得再快一点「实践」》
《React源码分析与实现(三)：实践DOMDiff》
《React源码分析与实现(一)：组件的初始化与渲染「实践篇」》
《React源码分析与实现(二)：状态、属性更新->setState「实践篇」》
《细说React核心设计中的闪光点》
《手把手教你10个案例理解Reacthooks的渲染逻辑「实践」》
《React-Redux100行代码简易版探究原理》
《手把手深入教你5个技巧编写更好的React代码【实践】》
《React函数式组件性能优化知识点指南汇总》
《13个精选的ReactJS框架》
《深入浅出画图讲解ReactDiff原理【实践】》
《【React深入】React事件机制》
《Vue3.0Beta和React开发者分别杠上了》
《手把手深入Reduxreact-redux中间件设计及原理（上）【实践】》
《手把手深入Reduxreact-redux中间件设计及原理（下）【实践】》
《前端框架用vue还是react？清晰对比两者差异》
《为了学好ReactHooks,我解析了VueCompositionAPI》
《【React高级进阶】探索store设计、从零实现react-redux》
《写ReactHooks前必读》
《深入浅出掌握React与ReactNative这两个框架》
《可靠React组件设计的7个准则之SRP》
《ReactRouterv6新特性及迁移指南》
《用ReactHooks做一个搜索栏》
《你需要的React+TypeScript50条规范和经验》
《手把手教你绕开ReactuseEffect的陷阱》
《浅析React/Vue跨端渲染原理与实现》
《React开发必须知道的34个技巧【近1W字】》
《三张图详细解说React组件的生命周期》
《手把手教你深入浅出实现Vue3&ReactHooks新UIModal弹窗》
《手把手教你搭建一个ReactTS项目模板》
《全平台（Vue/React/微信小程序）任意角度旋图片裁剪组件》
《40行代码把Vue3的响应式集成进React做状态管理》
《手把手教你深入浅出React迷惑的问题点【完整版】》
作者：JiaweiPan
转发链接：https://mp.weixin.qq.com/s/hDdF8rni6MX4U55l3DKLQw
好了，文章到此结束，希望可以帮助到大家。