React.js 项目实践——建立小我私家作品集网页

时间:2021-08-05 00:09 作者:外围滚球软件排行榜
本文摘要:作者:Jiawei Pan 转发链接:https://mp.weixin.qq.com/s/hDdF8rni6MX4U55l3DKLQw前言我的朋侪取消了我们的周末聚会计划之后,我就计划做点此外事情打发时间,然后从“to-do-list”中选择了“建立小我私家作品集网站”这一项。我花了几个小时搜索技术和模板,然后确定用 React.js 建立这个网页(https://dbarochiya.github.io/me/),并把它部署到 GitHub pages上。

外围滚球软件排行榜

作者: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 组件的样子。importReact,{Component}from'react'exportdefaultclassComponent-nameextendsComponent{render(){return(<div>{thesecodewillberenderedintotheDOM}</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。

<sectionid="colorlib-hero"class="js-fullheight"data-section="home"><divclass="flexsliderjs-fullheight"><ulclass="slides"><listyle="background-image:url(images/img_bg_1.jpg);"><divclass="overlay"></div><divclass="container-fluid"><divclass="row"><divclass="col-md-6col-md-offset-3col-md-pull-3col-sm-12col-xs-12js-fullheightslider-text"><divclass="slider-text-innerjs-fullheight"><divclass="desc"><h1>Hi!<br>I'mJackson</h1><h2>100%html5bootstraptemplatesMadeby<ahref="https://colorlib.com/"target="_blank">colorlib.com</a></h2><p><aclass="btnbtn-primarybtn-learn">DownloadCV<emclass="icon-download4"></em></a></p></div></div></div></div></div></li><listyle="background-image:url(images/img_bg_2.jpg);"><divclass="overlay"></div><divclass="container-fluid"><divclass="row"><divclass="col-md-6col-md-offset-3col-md-pull-3col-sm-12col-xs-12js-fullheightslider-text"><divclass="slider-text-inner"><divclass="desc"><h1>Iam<br>aDesigner</h1><h2>100%html5bootstraptemplatesMadeby<ahref="https://colorlib.com/"target="_blank">colorlib.com</a></h2><p><aclass="btnbtn-primarybtn-learn">ViewPortfolio<emclass="icon-briefcase3"></em></a></p></div></div></div></div></div></li></ul></div></section>HTML 文件中的 home 部门importReact,{Component}from'react'exportdefaultclassHomeextendsComponent{render(){return(<div><sectionid="colorlib-hero"className="js-fullheight"data-section="home"><divclassName="flexsliderjs-fullheight"><ulclassName="slides"><listyle={{backgroundImage:'url(images/img_bg_1.jpg)'}}><divclassName="overlay"/><divclassName="container-fluid"><divclassName="row"><divclassName="col-md-6col-md-offset-3col-md-pull-3col-sm-12col-xs-12js-fullheightslider-text"><divclassName="slider-text-innerjs-fullheight"><divclassName="desc"><h1>Hi!<br/>I'mJackson</h1><h2>100%html5bootstraptemplatesMadeby<ahref="https://colorlib.com/"target="_blank">colorlib.com</a></h2><p><aclassName="btnbtn-primarybtn-learn">DownloadCV<emclassName="icon-download4"/></a></p></div></div></div></div></div></li><listyle={{backgroundImage:'url(images/img_bg_2.jpg)'}}><divclassName="overlay"/><divclassName="container-fluid"><divclassName="row"><divclassName="col-md-6col-md-offset-3col-md-pull-3col-sm-12col-xs-12js-fullheightslider-text"><divclassName="slider-text-inner"><divclassName="desc"><h1>Iam<br/>aDesigner</h1><h2>100%html5bootstraptemplatesMadeby<ahref="https://colorlib.com/"target="_blank">colorlib.com</a></h2><p><aclassName="btnbtn-primarybtn-learn">ViewPortfolio<emclassName="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 组件中将这些差别类型的组件联合在一起(没错,你可以从一个组件中渲染另一个组件!),你的小我私家作品集应用马上就要好了。

importReact,{Component}from'react';import'./App.css';importSidebarfrom'./components/sidebar'importIntroductionfrom'./components/introduction'importAboutfrom'./components/about'importProjectsfrom'./components/projects'importBlogfrom'./components/blog'importTimelinefrom'./components/timeline'classAppextendsComponent{render(){return(<divid="colorlib-page"><divid="container-wrap"><Sidebar></Sidebar><divid="colorlib-main"><Introduction></Introduction><About></About><Projects></Projects><Blog></Blog><Timeline></Timeline></div></div></div>);}}exportdefaultApp;在 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-scriptsstart","build":"react-scriptsbuild","predeploy":"yarnrunbuild","deploy":"gh-pages-dbuild","test":"react-scriptstest","eject":"react-scriptseject"},"eslintConfig":{"extends":"react-app"},"browserslist":[">0.2%","notdead","notie<=11","notop_miniall"]}添加 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。


本文关键词:React.js,项目,实践,—,建立,小我,私家,作品集,外围滚球软件排行榜

本文来源:正规买球app排行-www.fsxindu.com