Sådan opretter du din porteføljesite ved hjælp af React.js

Efter at mine venner havde annulleret vores weekendplaner, ledte jeg efter noget at dræbe tiden. Jeg endte endelig med en plan om at oprette et portefølje-websted efter at have gennemgået min lange ventende liste over 'Wish-To-Do'ting.

Mange timers søgning efter teknologier og skabeloner senere sluttede jeg med at oprette dette websted ved hjælp af React.js og implementere det ved hjælp af Github-sider. Du kan finde koden til hjemmesiden her ( teknisk kaldes den en ' web-app ', men for denne artikel vil jeg henvise til den som en 'webside' ... Jeg håber, det er ok).

Hvad du vil lære

  • Nogle grundlæggende begreber i React.js
  • Sådan bruges create-react-app fra et HTML-websted
  • Sådan distribueres dit porteføljewebsted ved hjælp af 'Github-sider'

Nogle begreber, du skal vide, før vi starter ..

Bemærk - du er velkommen til at springe denne del over, hvis du allerede er fortrolig med grundlæggende begreber i React.js og React Components.

T isse punkter vil give en meget grundlæggende idé om React verden. Jeg anbefaler dig stærkt at studere mere om Reager fra dokumentationen og få praktisk brug ved hjælp af freeCodeCamp.

Hvad er React.js>

For nu er det nok at vide, at React.js er JavaScript-biblioteket, der bruges til opbygning af UI-komponenter. Det blev oprettet af ingeniørerne på Facebook og i dag rokker det JavaScript-verdenen ..

Hvad er en reaktionskomponent>

Med React kan du definere komponenter som en klasse eller en funktion. Du kan levere valgfrie input til komponenterne kaldet ' rekvisitter '.

Komponenter giver dig mulighed for at opdele brugergrænsefladen i uafhængige sektioner som sidehoved, sidefod og krop. Hver komponent fungerer uafhængigt, så enhver individuel komponent kan gengives uafhængigt af ReactDOM uden at påvirke hele siden.

Den leveres også med 'livscyklusmetoder ', som giver dig mulighed for at definere kodestykker, du vil udføre i henhold til komponentens tilstand som montering, gengivelse, opdatering og afmontering.

Reaktionskomponenter kommer med deres egne afvejninger. For eksempel kan vi genbruge en komponent ved at eksportere den til andre komponenter, men nogle gange bliver det forvirrende at håndtere flere komponenter, der taler og udløser gengivelser for hinanden.

sådan ser en komponent ud!

import React, { Component } from 'react' export default class Component-name extends Component { render() { return ( {these code will be rendered into the DOM} ) } }

Hvad er GitHub-sider>

Med GitHub Pages kan du nemt implementere dit websted ved hjælp af GitHub gratis og uden behov for at oprette nogen infrastruktur. De har leveret moduler, så du ikke behøver at bekymre dig om mange ting. Hvis du holder fast indtil slutningen, kan du se, at det fungerer som MAGIC!

Før du går videre, skal du sørge for at ..

Beslut hvilket indhold du vil lægge på dit websted

Gå igennem dit seneste CV en gang (hvis du ikke har et, skal du oprette et nu og udsætte dette projekt til næste weekend?). Det hjælper dig med at få en klar idé om, hvilken slags information du vil lægge på din porteføljeside.

Find inspiration

Gennemse de hundredvis af gratis porteføljewebsitesskabeloner på nettet, se hvordan og hvad du kan bruge fra dem - tag en pen og et papir ud, og skits et groft diagram for at få en idé om, hvordan dit websted vil se ud. Jeg vil bruge denne skabelon til at demonstrere.

Saml nogle fantastiske billeder af dig selv

Selvfølgelig vil du ikke se dårligt ud på din egen porteføljeside. Så grave i dine arkiver med fotos for at finde de perfekte fotos til dit websted.

Stil ind på din yndlingsafspilningsliste

Legenden siger, at gode ting kun kommer med god musik ... og du vil bestemt ikke gå glip af nogle gode ting.

Lad os hoppe ind i bygningsdelen

I de følgende afsnit vil jeg beskrive trin til opbygning af portefølje-appen, men du behøver ikke at følge den samme kode, som jeg bruger. Fokus på at lære begreberne og vis lidt kreativitet! Yderligere læsning er opdelt i tre sektioner.

  1. Opsætning af React-appen
  2. Opdeling af HTML-siden i React-komponenter
  3. Implementering af din app på Github-sider

Opsætning af React-app

Vi bruger create-react-app- et modul leveret af Facebook - som hjælper os med at oprette React.js-apps med lethed og uden at bekymre os om byggeværktøjer.

  • Gå til konsollen og kør for npm install create-react-appat installere dette modul via npm (sørg for at du har installeret, npmfør du bruger det - følg dette link for mere info).
  • Kør nu, npm create-react-app ${project-name}som henter build-scripts og opretter en filstruktur, der ser sådan ud.
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

Opret en componentsmappe under srcbiblioteket. Det er her, vi opbevarer vores komponenter i fremtiden.

  • Kopier alle de billeder, skrifttyper, HTML og CSS-filer fra den HTML, templatedu besluttede at arbejde med, til publicmappen.

Nu skal din projektmappe se sådan ud.

  • Kør npm installkommandoen, der installerer afhængige moduler under node_modulebiblioteket.
  • Hvis du har det lige indtil nu, vil kørsel af npm startkommandoen starte React-appen på localhost. Gå til, //localhost:3000og du skal kunne se startsiden i React-appen.

Opdeling af HTML-siden i React-komponenter ..

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.

  • 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!!
  • 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.

  • 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.

    
  • Hi!

    I'm Jackson

    100% html5 bootstrap templates Made by colorlib.com

    Download CV

  • I am

    a Designer

    100% html5 bootstrap templates Made by colorlib.com

    View Portfolio

import React, { Component } from 'react' export default class Home extends Component { render() { return ( 
    
  • Hi!

    I'm Jackson

    100% html5 bootstrap templates Made by colorlib.com

    Download CV

  • I am

    a Designer

    100% html5 bootstrap templates Made by colorlib.com

    View Portfolio

) } }

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.

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.

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.

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.

import React, { Component } from 'react'; import './App.css'; import Sidebar from './components/sidebar' import Introduction from './components/introduction' import About from './components/about' import Projects from './components/projects' import Blog from './components/blog' import Timeline from './components/timeline' class App extends Component { render() { return ( ); } } export default App;

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 or just tag in the render method.

  • 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.
  • 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.

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.

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

  • Add the homepage field — value will be in the following format — //{github_id}.github.io/{github_repo}
  • Add predeploy and deploy fields under scripts

Now your manifest.json should look like this:

{ "name": "portfolio-app", "version": "0.1.0", "private": true, "homepage": "//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-scripts start", "build": "react-scripts build", "predeploy": "yarn run build", "deploy": "gh-pages -d build", "test": "react-scripts test", "eject": "react-scripts eject"}, "eslintConfig": { "extends": "react-app"}, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ] }

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.

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.

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)

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.

//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.
  • 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.
  • 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. ?
  • Colorlib: til at levere avancerede skabeloner, som var en enorm inspiration til min porteføljeside. ?
  • Daniel Lo Nigro & community: til oprettelse af HTML til JSX Compiler, som viste sig at være praktisk, når man konverterede HTML-blokke til JSX-kode. ?
  • Mine kære venner: der hjalp mig med at rette mine fejl.
  • DU: for at holde fast, jeg håber, du havde en produktiv tid. Bliv ved med at udforske og opbygge fantastiske ting!