După ce prietenii mei au anulat planurile noastre de weekend, am căutat ceva pentru a ucide timpul. În cele din urmă am ajuns la un plan de a crea un site de portofoliu după ce am trecut prin lunga mea listă în așteptare de „Dorințe de făcut” lucruri.

Multe ore de căutare de tehnologii și șabloane mai târziu, am ajuns să creez acest site-ul web utilizând React.js și implementarea acestuia folosind paginile Github. Puteți găsi codul pentru site-ul web aici (Se numește „aplicație web„din punct de vedere tehnic, dar pentru acest articol, mă voi referi la el ca la un„ site web ”… sper că este ok).

Ce veți învăța

  • Unele concepte de bază ale React.js
  • Cum se utilizează create-react-app de pe un site web HTML
  • Cum să implementați site-ul dvs. de portofoliu utilizând „pagini Github”

Câteva concepte pe care trebuie să le cunoașteți înainte de a începe ..

Notă – nu ezitați să ignorați această parte dacă sunteți deja familiarizați cu conceptele de bază ale React.js și React Components.

TAceste puncte vor oferi o idee foarte de bază despre lumea React. Vă recomand cu drag să studiați mai multe despre React din documentație și obțineți practici cu ajutorul Routech.

Ce este React.js>

Deocamdată, este suficient să știm că React.js este biblioteca JavaScript utilizată pentru construirea componentelor UI. A fost creat de inginerii Facebook și, în zilele noastre, zguduie lumea JavaScript.

Ce este o componentă React>

React vă permite să definiți componentele ca o clasă sau o funcție. Puteți furniza intrări opționale componentelor numite „recuzită‘.

Componentele vă permit să împărțiți interfața de utilizare în independent secțiuni precum antet, subsol și corp. Fiecare componentă va funcționa independent, astfel încât orice componentă individuală poate fi redată independent în ReactDOMfără a afecta întreaga pagină.

ad-banner

De asemenea, vine cu „metodele ciclului de viață„care vă permite să definiți bucăți de cod pe care doriți să le executați în funcție de starea componentei, cum ar fi montarea, redarea, actualizarea și dezasamblarea.

Componentele React vin cu propriile compromisuri. De exemplu, putem reutiliza o componentă exportând-o către alte componente, dar uneori devine confuz să gestionăm mai multe componente vorbind și declanșând randări unul pentru celălalt.

așa ar arăta o componentă!

import React, { Component } from 'react'

export default class Component-name extends Component {
  render() {
    return (
      <div>
        {these code will be rendered into the DOM}
      </div>
    )
  }
}

Ce este Pagini GitHub >

Cu GitHub Pages, vă puteți implementa cu ușurință site-ul folosind GitHub gratuit și fără a fi nevoie să configurați nicio infrastructură. Au oferit module, astfel încât să nu vă faceți griji pentru multe lucruri. Dacă rămâneți până la capăt, veți vedea că funcționează ca MAGIA!

Înainte de a merge mai departe, asigurați-vă că ..

Decideți ce conținut doriți să afișați pe site-ul dvs. web

Consultați cel mai recent CV-ul dvs. o dată (dacă nu aveți unul atunci creați unul acum și amâna acest proiect până în weekendul viitor?). Vă va ajuta să aveți o idee clară despre ce fel de informații doriți să puneți pe site-ul dvs. de portofoliu.

Găsiți inspirație

Răsfoiți printre sutele de șabloane de portofoliu gratuite de pe web, vedeți cum și ce puteți folosi de la ele – scoateți un pix și hârtie și schițați o diagramă brută pentru a vă face o idee despre cum va arăta site-ul dvs. web. Voi folosi acest șablon de demonstrat.

Adunați câteva imagini uimitoare ale dvs.

Desigur, nu doriți să arătați rău pe propriul site de portofoliu. Deci, săpați în arhivele dvs. de fotografii pentru a găsi fotografiile perfecte pentru site-ul dvs. web.

Reglați-vă lista de redare preferată

Legenda spune că lucrurile bune vin doar cu muzică bună … și cu siguranță nu doriți să pierdeți lucruri grozave.

Cum sa creati site ul dvs de portofoliu utilizand Reactjs
o privire asupra site-ului meu portofoliu

Să sărim în partea de construcție

În secțiunile următoare, voi descrie pașii pentru crearea aplicației de portofoliu, dar nu trebuie să urmați același cod pe care îl folosesc. Concentrați-vă pe învățarea conceptelor și arătați ceva creativitate! Lecturile ulterioare au fost împărțite în trei secțiuni.

  1. Configurarea aplicației React
  2. Descompunerea paginii HTML în componente React
  3. Implementarea aplicației dvs. pe paginile Github

Configurarea aplicației React

Vom folosi create-react-app – un modul furnizat de Facebook – care ne ajută să creăm aplicații React.js cu ușurință și fără să ne facem griji cu privire la instrumentele de construcție.

  • Mergeți la consolă și rulați npm install create-react-app pentru a instala acest modul prin npm (asigurați-vă că ați instalat npmînainte de ao utiliza – urmați acest link pentru mai multe informații).
  • Acum fugiți npm create-react-app ${project-name} care va prelua scripturi de construcție și va crea o structură de fișiere care va arăta astfel.
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

Creeaza o components dosar sub src director. Aici vom stoca componentele noastre în viitor.

  • Copiați toate imaginile, fonturile, fișierele HTML și CSS din HTML template ai decis să lucrezi cu în public pliant.

Acum directorul dvs. de proiect ar trebui să arate astfel.

1611761951 710 Cum sa creati site ul dvs de portofoliu utilizand Reactjs
structură de fișiere
  • Rulați npm install comanda care va instala module dependente sub node_module director.
  • Dacă ați reușit până acum, atunci rulați npm start comanda va porni aplicația React pe localhost. Mergi la https://localhost:3000și ar trebui să puteți vedea pagina de start a aplicației React.

Descompunerea paginii HTML în componente React ..

Amintiți-vă component folder pe care l-am creat sub src directorul din pasul anterior, acum vom descompune pagina șablonului HTML în componente și vom combina aceste componente pentru a crea aplicația noastră React.

  • În primul rând, trebuie să identificați ce componente puteți crea din fișierul HTML monolitic – cum ar fi antetul, subsolul și să mă contactați. Trebuie să fii puțin creativ aici !!
  • Căutați etichete de genul secțiune / div care nu sunt cuibărite în altele secțiune / div. Acestea ar trebui să conțină cod despre acea secțiune specială a paginii, care este independentă de alte secțiuni. Încearcă să mă uiți la mine GitHub Repo pentru a vă face o idee mai bună despre aceasta.
    Sfat: utilizați „inspectează elementul‘instrument pentru a juca cu codul și pentru a observa efectul modificărilor din browser.
  • Aceste fragmente de cod HTML vor fi utilizate în render() metoda componentei. render() metoda va returna acest cod ori de câte ori o componentă este redată în ReactDOM. Aruncați o privire asupra blocurilor de cod date mai jos pentru referință.
<section id="colorlib-hero" class="js-fullheight" data-section="home">
    <div class="flexslider js-fullheight">
        <ul class="slides">
        <li style="background-image: url(images/img_bg_1.jpg);">
            <div class="overlay"></div>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
                        <div class="slider-text-inner js-fullheight">
                            <div class="desc">
                                <h1>Hi! <br>I'm Jackson</h1>
                                <h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
                                    <p><a class="btn btn-primary btn-learn">Download CV <em class="icon-download4"></em></a></p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li style="background-image: url(images/img_bg_2.jpg);">
            <div class="overlay"></div>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
                        <div class="slider-text-inner">
                            <div class="desc">
                                <h1>I am <br>a Designer</h1>
                                    <h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
                                    <p><a class="btn btn-primary btn-learn">View Portfolio <em class="icon-briefcase3"></em></a></p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        </ul>
    </div>
</section>
secțiunea „acasă” a fișierului HTML
import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return (
      <div>
        <section id="colorlib-hero" className="js-fullheight" data-section="home">
            <div className="flexslider js-fullheight">
                <ul className="slides">
                <li style={{backgroundImage: 'url(images/img_bg_1.jpg)'}}>
                    <div className="overlay" />
                    <div className="container-fluid">
                    <div className="row">
                        <div className="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
                        <div className="slider-text-inner js-fullheight">
                            <div className="desc">
                            <h1>Hi! <br />I'm Jackson</h1>
                            <h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
                            <p><a className="btn btn-primary btn-learn">Download CV <em className="icon-download4" /></a></p>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                </li>
                <li style={{backgroundImage: 'url(images/img_bg_2.jpg)'}}>
                    <div className="overlay" />
                    <div className="container-fluid">
                    <div className="row">
                        <div className="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
                        <div className="slider-text-inner">
                            <div className="desc">
                            <h1>I am <br />a Designer</h1>
                            <h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
                            <p><a className="btn btn-primary btn-learn">View Portfolio <em className="icon-briefcase3" /></a></p>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                </li>
                </ul>
            </div>
        </section>
      </div>
    )
  }
}
Componenta React creată din secțiunea HTML „acasă”

Sugestie: dacă lucrurile devin confuze din partea reacției – încercați să vă concentrați asupra conceptului „cum să identificați doresc să fie componente din baza de cod HTML”. După ce vă veți simți confortabil cu React, implementarea va fi o bucată de tort.

Ați observat că există unele modificări în codul HTML? class a devenit className. Aceste modificări sunt necesare, deoarece React nu acceptă HTML? – au venit cu propria lor sintaxă JS asemănătoare cu HTML, numită JSX . Deci, trebuie să schimbăm unele părți ale codului HTML pentru a-l face JSX.

M-am lovit de asta Convertor HTML în JSX în timpul acestui proiect, care convertește codul HTML în JSX pentru dvs.? Vă recomand cu încredere să utilizați acest lucru în loc să vă schimbați manual codul.

După ceva timp, ar trebui să veniți cu câteva componente diferite. Acum EndGame e aproape!! Combinați aceste componente diferite sub una App.js componentă (DA !! Puteți reda o componentă dintr-o altă componentă!), iar aplicația dvs. de portofoliu va fi gata.

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 (
      <div id="colorlib-page">
        <div id="container-wrap">
		<Sidebar></Sidebar>
		<div id="colorlib-main">
			<Introduction></Introduction>
			<About></About>
			<Projects></Projects>
			<Blog></Blog>
			<Timeline></Timeline>
          	</div>
      	</div>
      </div>
    );
  }
}

export default App;
a combinat toate componentele din app.js

Observați în codul de mai sus că trebuie mai întâi import componentele pentru a le utiliza în render() secțiune. Și putem folosi componentele doar prin adăugare <component-name></component-name>sau doar <component-name/> etichetă în metoda de redare.

  • Alerga npm start de la terminalul dvs. și ar trebui să puteți vedea modificările reflectate pe site. Nu trebuie să rulați din nou această comandă dacă ați făcut mai multe modificări în cod, aceasta va fi reflectată automat atunci când salvați aceste modificări. Puteți face o dezvoltare rapidă ca fulgerul datorită hot reload caracteristică.
  • Joacă-te cu HTML și CSS pentru a schimba conținutul în funcție de CV-ul tău și pentru a-ți face portofoliul și mai cool schimbând conținutul, încercând diferite fonturi, schimbând culorile și adăugând fotografii la alegere.

Implementați aplicația React pe paginile Github

Bine, deci ai supraviețuit până în acest moment … ia-ți un moment pentru a aprecia munca ta. Dar trebuie totuși să finalizați implementarea, astfel încât să vă puteți împărtăși munca grozavă cu prietenii dvs. care au renunțat la acele planuri de weekend.

  • Mai întâi, trebuie să instalați biblioteca npm a paginilor Github. Pentru a instala, rulați această comandă npm install gh-pages pe terminalul dvs.

Acum, trebuie să faceți următoarele modificări în manifest.json fişier:

Acum manifest.json ar trebui să arate astfel:

{
	"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-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"
	]
}
manifest.json după adăugarea linkului gh-pages

Acum du-te la terminal, fugi npm run deploy și așteptați magia !! Aplicația dvs. va fi implementată după executarea cu succes a scripturilor de implementare. Verificați dacă aplicația dvs. sa instalat sau nu, accesând linkul pe care l-ați furnizat în homepage camp.

Prudență: Vă rugăm să fiți atenți atunci când implementați ceva pe web. Efectuați verificări de siguranță, cum ar fi eliminarea linkurilor interne, a parolelor sau a oricăror lucruri pe care nu doriți să le aveți în mâinile oamenilor deștepți de acolo.

Dacă aveți de gând să faceți modificări des …

Notă – Trebuie să efectuați etapa de implementare de fiecare dată când schimbați ceva și dacă efectuați modificări în baza de coduri – ghiciți pe al cui se va plictisi în curând !! (Fără griji, ți-am luat spatele: P)

Puteți automatiza procesul de implementare utilizând Travis-CI (instrument de automatizare), astfel încât, dacă comiteți ceva în ramura principală – pașii de implementare vor fi declanșați și noul site va fi disponibil automat. Urmați acest articol pentru asta.

https://www.freecodecamp.org/news/learn-how-to-automate-deployment-on-github-pages-with-travis-ci/

Tema pentru tine ..

Felicitări! În cele din urmă ați creat și ați implementat aplicația dvs. de portofoliu. Dacă sunteți interesat, puteți adăuga aceste caracteristici pe site-ul dvs. web

  • Caracteristica blogului: creați-vă propriul blog folosind Node.js și o bază de date NoSQL precum MongoDB și îmbinați-l în acest site de portofoliu.
  • Galerie: adăugați o secțiune pe pagină unde puteți afișa scenariul fotografiilor recente de pe site-urile dvs. de socializare.
  • Feed Twitter: adăugați o secțiune care afișează tweet-urile recente de dvs.
  • Citat aleatoriu: adăugați o secțiune care prezintă câteva citate motivaționale aleatorii.

Dacă implementați oricare dintre aceste caracteristici, împărtășiți-mi munca. Aș fi mai mult decât fericit să vă ajut? ( dacă pot ?)

Înfășurând ..

Aș dori să iau un moment pentru a recunoaște munca oamenilor care mi-au dat inspirația și cunoștințele pentru a completa acest articol.

  • Quincy Larson, Sahat Yalkabov și comunitate: Pentru a crea Routech – platforma în care puteți învăța și obține cunoștințe despre aproape tot ce ține de tehnologiile web; folosind tutoriale practice și totul fără a plăti taxe. ?
  • Colorlib: pentru furnizarea de șabloane de ultimă generație, care au fost o mare inspirație pentru site-ul meu de portofoliu. ?
  • Daniel Lo Nigro & comunitate: pentru a crea HTML în JSX Compilator, care s-a dovedit a fi la îndemână în timpul conversiei blocurilor HTML în cod JSX. ?
  • Prietenii mei dragi: care m-a ajutat în corectarea greșelilor mele.
  • TU: pentru a rămâne în jur, sper că ai avut un timp productiv. Continuați să explorați și să construiți lucruri uimitoare!
0*FgSZRsUOdqfFZJBY
Fotografie de Ruediger Theiselmann pe Unsplash