如何使用React.js创建您的投资组合网站

After my friends canceled our weekend plans, I was looking for something to kill time. I finally ended up with a plan to create a portfolio website after going through my long pending list of ‘Wish-To-Do’ things.

我的朋友取消了我们的周末计划后，我正在寻找可以消磨时间的东西。 经过漫长的待办事项清单后，我最终制定了一个创建投资组合网站的计划 东西。

Many hours of searching for technologies and templates later, I ended up creating this website using React.js and deploying it using Github pages. You can find the code for the website here (It’s called a ‘web-app’ technically, but for this article, I will be referring to it as a ‘website’ … I hope that’s ok).

经过许多小时的搜索技术和模板，我最终使用React.js创建了这个网站，并使用Gi​​thub页面进行了部署。 您可以在此处找到该网站的代码(技术上称为“ web-app ”，但在本文中，我将其称为“网站”……希望可以)。

您将学到什么 (What you will learn)

• Some basic concepts of React.js
  React.js的一些基本概念
• How to use create-react-app from an HTML website
  如何从HTML网站使用create-react-app
• How to deploy your portfolio website using ‘Github pages’
  如何使用“ Github页面”部署您的投资组合网站

在开始之前，您需要了解一些概念。 (Some concepts you need to know before we start ..)

Note — feel free to skip this part if you are already familiar with basic concepts of React.js and React Components.

注意—如果您已经熟悉React.js和React Components的基本概念，请随时跳过此部分。

Note — feel free to skip this part if you are already familiar with basic concepts of React.js and React Components.

注意-如果您已经熟悉React.js和React Components的基本概念，请随时跳过此部分。

These points will provide a very basic idea of the React world. I highly recommend you to study more about React from the documentation and get hands-on with the help of freeCodeCamp.

这些要点将为React世界提供一个非常基本的概念。 我强烈建议您从文档中进一步研究React，并在freeCodeCamp的帮助下动手操作 。

什么是React.js> (What is React.js >)

For now, it is enough to know that React.js is the JavaScript library used for building UI components. It was created by the engineers of Facebook and nowadays, it is rocking the JavaScript world..

到目前为止，仅知道React.js是用于构建UI组件JavaScript库就足够了。 它是由Facebook的工程师创建的，如今，它正在震撼JavaScript世界。

什么是React组件> (What is a React Component >)

React lets you define components as a class or a function. You can provide optional inputs to the components called ‘props’.

React使您可以将组件定义为类或函数。 您可以向称为“ 道具 ”的组件提供可选输入。

Components let you split up the UI into independent sections like header, footer, and body. Each component will work independently so any individual component can be rendered independently into the ReactDOMwithout affecting the whole page.

组件使您可以将UI分成独立的部分，例如页眉，页脚和正文。 每个组件将独立工作，因此任何单个组件都可以独立呈现到ReactDOM中，而不会影响整个页面。

It also comes with ‘lifecycle methods’ which let you define pieces of code you want to execute according to the state of the component like mounting, rendering, updating and un-mounting.

它还带有“生命周期方法 ”，使您可以根据组件的状态(例如，安装，渲染，更新和卸载)定义要执行的代码段。

React components come with their own trade-offs. For example, we can reuse a component by exporting it to other components, but sometimes it gets confusing to handle multiple components talking and triggering renders for each other.

React组件有其自身的权衡。 例如，我们可以通过将一个组件导出到其他组件来重用一个组件，但是有时它会令人困惑地处理多个组件之间相互交谈和触发渲染。

this is how a component would look like!

这就是组件的外观！

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 > (What is GitHub Pages >)

With GitHub Pages, you can easily deploy your site using GitHub for free and without the need to set up any infrastructure. They have provided modules so that you don’t have to worry about many things. If you stick around till the end you’ll see that it works like MAGIC!

借助GitHub Pages，您可以免费使用GitHub轻松部署站点，而无需设置任何基础架构。 他们提供了模块，因此您不必担心很多事情。 如果坚持到底，它将像MAGIC一样工作！

在继续之前，请确保..
(Before you go ahead make sure to .. )

确定要在网站上放置哪些内容 (Decide what content you want to put up on your website)

Go through your latest resume once (if you don’t have one then create one now and postpone this project until next weekend ?). It will help you to have a clear idea about what kind of information you want to put on your portfolio website.

一次浏览最新的简历(如果您没有，请立即创建，然后将此项目推迟到下一个周末？)。 这将帮助您对要在投资组合网站上发布的信息类型有一个清晰的认识。

寻找灵感 (Find inspiration)

Browse through the hundreds of free portfolio website templates on the web, see how and what you can use from them — take out a pen and paper and sketch out a rough diagram to get an idea of what your website will look like. I will be using this template to demonstrate.

浏览网络上数百个免费的投资组合网站模板，查看如何使用它们以及从中使用什么-拿出笔和纸，画出一个粗略的图表，以了解您的网站的外观。 我将使用此模板进行演示。

收集一些自己的惊人照片 (Gather some amazing pictures of yourself)

Of course you don’t want to look bad on your own portfolio website. So dig into your archives of photos to find the perfect photos for your website.

当然，您不想在自己的投资组合网站上看起来很糟糕。 因此，深入研究您的照片档案，找到适合您网站的完美照片。

调入您喜欢的播放列表 (Tune into your favourite playlist)

Legend has it that good things come only with good music… and you surely don’t want to miss out on any great things.

传说有好东西只配好音乐...... 你当然不希望错过任何伟大的事情。

让我们跳到建筑部分 (Let’s jump into the building part)

In the following sections, I will describe steps to building the portfolio app but you don’t have to follow the same code I use. Focus on learning the concepts and show some creativity! Further reading has been divided into three sections.

在以下各节中，我将描述构建投资组合应用程序的步骤，但您不必遵循我使用的相同代码。 专注于学习概念并展现创造力！ 进一步的阅读分为三个部分。

1. Setting up the React-app
   设置React-app
2. Breaking down the HTML page into React components
   将HTML页面分解为React组件
3. Deploying your app onto Github pages
   将您的应用程序部署到Github页面上

设置React-app (Setting up React-app)

We will be using create-react-app — a module provided by Facebook — which helps us to create React.js apps with ease and without worrying about build tools.

我们将使用由Facebook提供的模块create-react-app ，它可以帮助我们轻松创建React.js应用程序而无需担心构建工具。

• Go to the console and run npm install create-react-app to install this module via npm (make sure that you have installed npmbefore using it — follow this link for more info).

  转到控制台并运行npm install create-react-app通过npm安装此模块(使用前请确保已安装npm 此链接以获取更多信息)。

• Now run npm create-react-app ${project-name} which will fetch build scripts and create a file-structure which will look like this.

  现在运行npm create-react-app ${project-name} ，它将获取构建脚本并创建一个如下所示的文件结构。

my-portfolio-app
├── README.md (description of the project for GitHUb)
├── node_modules (stores all dependent modules for the project)
├── package.json (stores all meta information of the prokect like dependencies,version,revisions etc.)
├── .gitignore (files declared here will be ignored while uploading to GitHub like node_modules 
├── public (here you will store all images,JS,CSS files) 
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json 
└── src (our main code for app lies here)
    ├── {create component folder here}
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

Create a components folder under the src directory. This is where we will store our components in the future.

在src目录下创建一个components文件夹。 将来我们将在这里存储我们的组件。

• Copy all the images, fonts, HTML and CSS files from the HTML template you decided to work with into the public folder.

  所有的图像，字体，HTML和CSS文件从HTML复制template您决定将工作与进入public文件夹。

Now your project directory should look like this.

现在，您的项目目录应如下所示。

• Run the npm install command which will install dependent modules under node_module directory.

  运行npm install命令，该命令将在node_module目录下安装相关模块。

• If you’ve got it right up until now, then running the npm start command will start the React app on the localhost. Go to https://localhost:3000and you should be able to see the starter page of the React-app.

  如果到现在为止都没有问题，那么运行npm start命令将在localhost上启动React应用。 转到https://localhost:3000 ，您应该可以看到React-app的启动页面。

将HTML页面分解为React组件。 (Breaking-down the HTML page into React components..)

Remember the component folder which we created under src directory in the previous step, now we will break down the HTML template page into components and combine these components to make our React-app.

记住在上一步中在src目录下创建的component文件夹，现在我们将HTML模板页面分解为组件，并将这些组件组合在一起以创建React-app。

• First, you need to identify which components you can create from the monolithic HTML file — like header, footer and contact me. You need to be a little creative here!!
  首先，您需要确定可以从整体HTML文件中创建哪些组件-例如页眉，页脚和与我联系。 您需要在这里有所创意！！

• Look for tags like section/div which aren’t nested into some other section/div. These should contain code about that particular section of the page which is independent of other sections. Try looking into my GitHub Repo to get a better idea about this one.

  看起来像一节/ div标签未嵌套到其他的段/格 。 这些应包含有关页面特定部分的代码，该代码应独立于其他部分。 尝试查看我的GitHub Repo ，以更好地了解这一点。

  Look for tags like section/div which aren’t nested into some other section/div. These should contain code about that particular section of the page which is independent of other sections. Try looking into my GitHub Repo to get a better idea about this one.Hint: Use the ‘inspect element’ tool to play around with the code and take notice of the effect of changes within the browser.

  看起来像一节/ div标签未嵌套到其他的段/格 。 这些应包含有关页面特定部分的代码，该代码应独立于其他部分。 尝试查看我的GitHub Repo ，以更好地了解这一点。 提示：使用“ 检查元素 ”工具来处理代码，并注意浏览器中更改的影响。

• These pieces of HTML code will be used in the render() method of the component. The render() method will return this code whenever a component gets rendered into the ReactDOM. Take a look at the code blocks given below for reference.

  这些HTML代码将在组件的render()方法中使用。 每当组件被渲染到ReactDOM中时， render()方法将返回此代码。 看一下下面给出的代码块以供参考。

Hint: If things are getting confusing on the react side — try focusing on the concept of ‘how to identify wanna be components from the HTML codebase’. After getting comfortable with React, implementation will be a piece of cake.

提示：如果在响应方面令人困惑，请尝试着眼于“如何从HTML代码库中识别要成为组件的概念”这一概念。 在对React感到满意之后，实现将是小菜一碟。

Did you notice that there are some changes in the HTML code? class became className. These changes are required because React doesn’t support HTML ? — they have come up with their own HTML-like JS syntax which is called JSX . So, we need to change some parts of the HTML code to make it JSX.

您是否注意到HTML代码有一些更改？ class成为className 。 这些更改是必需的，因为React不支持HTML？ —他们提出了自己的类似HTML的JS语法，称为JSX 。 因此，我们需要更改HTML代码的某些部分以使其成为JSX。

I bumped into this HTML to JSX converter during this project, which converts HTML code into JSX for you ?. I highly recommend using this rather than changing your code manually.

在这个项目期间，我碰到了这个HTML to JSX转换器 ，它将HTML代码转换为JSX。 我强烈建议您使用此方法，而不要手动更改代码。

After some time, you should come up with some different components. Now the EndGame is near!! Combine these different components under one App.js component (YES!! You can render one component from another component!) and your portfolio app will be ready.

一段时间后，您应该提出一些不同的组件。 现在EndGame就在附近！ 将这些不同的组件组合到一个App.js组件下(是的！您可以从另一个组件渲染一个组件！)，您的投资组合应用程序将准备就绪。

Notice in the above code that we need to first import the components in order to use them in the render() section. And we can use the components just by adding <component-name></component-name>or just <component-name/> tag in the render method.

注意，在上面的代码中，我们需要首先import组件才能在render()部分中使用它们。 而且，我们只需在render方法中添加<component-name></component-name>或<component-name/>标签即可使用这些组件。

• Run npm start from your terminal and you should be able to see the changes reflected in the website. You don’t need to run this command again if you have made more changes in the code, it will be reflected automatically when you save those changes. You can do some lightning fast development thanks to the hot reload feature.

  从终端运行npm start ，您应该可以看到网站上反映的更改。 如果您在代码中进行了更多更改，则无需再次运行此命令，它将在保存这些更改时自动反映出来。 借助hot reload 功能，您可以快速完成一些开发工作。

• Play around with the HTML and CSS to change the content according to your resume and make your portfolio even cooler by changing the content, trying out different fonts, changing the colours and adding photos of your choice.
  尝试使用HTML和CSS来根据简历更改内容，并通过更改内容，尝试不同的字体，更改颜色并添加您选择的照片来使您的投资组合更酷。

将React-app部署到Github页面 (Deploy React-app to Github pages)

Okay, so you survived until this point… take a moment to appreciate your hard work. But you still need to complete your deployment so that you can share your cool work with your friends who ditched those weekend plans.

好的，所以您可以生存到这一点……花点时间欣赏您的辛勤工作。 但是您仍然需要完成部署，以便与放弃这些周末计划的朋友分享您的出色工作。

• First, you need to install the npm library of Github pages. To install, run this command npm install gh-pages on your terminal.

  首先，您需要安装Github页面的npm库。 要安装， npm install gh-pages在终端上运行此命令npm install gh-pages 。

Now, you need to make the following changes in your manifest.json file:

现在，您需要在manifest.json文件中进行以下更改：

• Add the homepage field — value will be in the following format — https://{github_id}.github.io/{github_repo}

  添加homepage字段-值将采用以下格式https://{github_id}.github.io/{github_repo}

• Add predeploy and deploy fields under scripts

  在scripts下添加predeploy和deploy字段

Now your manifest.json should look like this:

现在您的manifest.json应该如下所示：

Now go to the terminal, run npm run deploy and wait for the magic!! Your app will be deployed after the deployment scripts execute successfully. Verify whether your app has deployed or not by visiting the link you provided in the homepage field.

现在去终端，运行npm run deploy并等待魔术！ 部署脚本成功执行后，将部署您的应用程序。 通过访问您在homepage字段中提供的链接来验证您的应用是否已部署。

Caution: Please be careful when deploying anything onto the web. Perform safety checks like removing internal links, passwords, or anything that you don’t want to be there in the hands of smart people out there.

注意：将任何内容部署到Web上时，请小心。 执行安全检查，例如删除内部链接，密码或任何您不希望出现在聪明人手中的东西。

如果您要经常进行更改... (If you are going to make changes often...)

Note —  You need to perform the deployment stage every time you change something and if you are making changes in the codebase - guess what whose going to get bored soon !!  ( No worries I got your back :P)

注—每次更改内容时都需要执行部署阶段，并且如果您要在代码库中进行更改，请猜测谁很快会感到无聊！ (不用担心，我支持你：P)

Note —  You need to perform the deployment stage every time you change something and if you are making changes in the codebase - guess what whose going to get bored soon !!  ( No worries I got your back :P)

注—每次更改内容时都需要执行部署阶段，并且如果您要在代码库中进行更改，请猜测谁很快会感到无聊！ (不用担心，我支持你：P)

You can automate the deployment process using Travis-CI (automation tool), so that if you commit anything into master branch – the deployment steps will be triggered and new site will be automatically available. Follow this article for that.

您可以使用Travis-CI(自动化工具)来自动化部署过程，以便将任何内容提交到master分支中–部署步骤将被触发，新站点将自动可用。 为此，请遵循本文。

You can automate the deployment process using Travis-CI (automation tool), so that if you commit anything into master branch – the deployment steps will be triggered and new site will be automatically available. Follow this article for that.

您可以使用Travis-CI(自动化工具)来自动化部署过程，因此，如果您将任何内容提交到master分支中，则将触发部署步骤，并且新站点将自动可用。 为此，请遵循本文。

You can automate the deployment process using Travis-CI (automation tool), so that if you commit anything into master branch – the deployment steps will be triggered and new site will be automatically available. Follow this article for that. https://www.freecodecamp.org/news/learn-how-to-automate-deployment-on-github-pages-with-travis-ci/

您可以使用Travis-CI(自动化工具)来自动化部署过程，以便将任何内容提交到master分支中–部署步骤将被触发，新站点将自动可用。 为此，请遵循本文。 https://www.freecodecamp.org/news/learn-how-to-automate-deployment-on-github-pages-with-travis-ci/

为您做作业.. (Homework for you ..)

Congratulations! You have finally created and deployed your portfolio app. If you are interested, then you can add these features to your website

恭喜你！ 您终于创建并部署了投资组合应用程序。 如果您有兴趣，可以将这些功能添加到您的网站

• Blog feature: create your own blog using Node.js and a NoSQL database like MongoDB and merge it into this portfolio website.

  博客功能：使用Node.js和NoSQL数据库(如MongoDB)创建自己的博客，并将其合并到此投资组合网站中。

• Gallery: add a section to the page where you can show the screenplay of the recent photos from your social media websites.

  图库：在页面上添加一个部分，您可以在其中显示社交媒体网站上最近拍摄的照片的剧本。

• Twitter Feed: add a section showing recent tweets by you.

  Twitter Feed：添加一个部分，显示您最近发布的推文。

• Random Quote: add a section showing some random motivational quotes.

  随机报价：添加一个部分，显示一些随机的励志名言。

If you implement any of these features, share your work with me. I would be more than happy to help ? ( if I can ?)

如果您实现任何这些功能，请与我分享您的工作。 我会很乐意提供帮助吗？ ( 如果我能 ？)

结语 .. (Wrapping up ..)

I would like to take a moment to acknowledge the work of the people who gave me the inspiration and knowledge to complete this article.

我想花一点时间来感谢那些给我启发和知识来完成本文的人们的工作。

• Quincy Larson, Sahat Yalkabov & community: For creating freeCodeCamp — the platform where you can learn and gain knowledge about almost everything related to web technologies; using hands-on tutorials and all without paying fees. ?

  昆西· 拉尔森( Quincy Larson)， 萨哈特·亚尔卡博夫 ( Sahat Yalkabov)和社区：创建freeCodeCamp的平台。 使用动手教程， 并且全部无需付费。 ？

• Colorlib: for providing state of the art templates which were a huge inspiration for my portfolio website. ?

  Colorlib：用于提供最先进的模板，这对我的投资组合网站有巨大的启发。 ？

• Daniel Lo Nigro & community: for creating HTML to JSX Compiler, which turned out to be handy while converting HTML blocks into JSX code. ?

  Daniel Lo Nigro ＆社区：用于创建JSX 编译器的 HTML，在将HTML块转换为JSX代码时非常方便。 ？

• My dearest friends: who helped me in correcting my mistakes.

  我最亲爱的朋友：谁帮助我纠正了我的错误。

• YOU: for sticking around, I hope you had a productive time. Keep exploring and building amazing things!

  您：为了坚持下去，希望您度过了一个愉快的时光。 继续探索和创造神奇的事物！

翻译自: https://www.freecodecamp.org/news/portfolio-app-using-react-618814e35843/