Πώς να δημιουργήσετε τον ιστότοπό σας χαρτοφυλακίου χρησιμοποιώντας το React.js

Αφού οι φίλοι μου ακύρωσαν τα σχέδια του Σαββατοκύριακου, έψαχνα κάτι για να σκοτώσω χρόνο. Τελικά κατέληξα με ένα σχέδιο για τη δημιουργία ενός ιστότοπου χαρτοφυλακίου αφού πέρασα από τη μακρά λίστα εκκρεμών μου «Wish-To-Do»πράγματα.

Πολλές ώρες αναζητώντας τεχνολογίες και πρότυπα αργότερα, κατέληξα να δημιουργήσω αυτόν τον ιστότοπο χρησιμοποιώντας το React.js και να το αναπτύξω χρησιμοποιώντας σελίδες Github. Μπορείτε να βρείτε τον κωδικό για τον ιστότοπο εδώ (ονομάζεται τεχνικά « web-app », αλλά για αυτό το άρθρο, θα το αναφέρω ως «ιστότοπο»… ελπίζω να είναι εντάξει).

Τι θα μάθετε

  • Μερικές βασικές έννοιες του React.js
  • Πώς να χρησιμοποιήσετε το create-react-app από έναν ιστότοπο HTML
  • Πώς να αναπτύξετε τον ιστότοπό σας χαρτοφυλακίου χρησιμοποιώντας "σελίδες Github"

Μερικές έννοιες που πρέπει να γνωρίζετε πριν ξεκινήσουμε ..

Σημείωση - μη διστάσετε να παραλείψετε αυτό το μέρος εάν είστε ήδη εξοικειωμένοι με τις βασικές έννοιες των React.js και React Components.

Τ hese σημεία θα παρέχει μια πολύ βασική ιδέα του React κόσμο. Σας συνιστώ ανεπιφύλακτα να μελετήσετε περισσότερα σχετικά με το React από την τεκμηρίωση και να αποκτήσετε πρακτική βοήθεια με τη βοήθεια του freeCodeCamp.

Τι είναι το React.js>

Προς το παρόν, αρκεί να γνωρίζουμε ότι το React.js είναι η βιβλιοθήκη JavaScript που χρησιμοποιείται για τη δημιουργία στοιχείων διεπαφής χρήστη. Δημιουργήθηκε από τους μηχανικούς του Facebook και σήμερα συγκλονίζει τον κόσμο της JavaScript.

Τι είναι το React Component>

Το React σάς επιτρέπει να ορίσετε στοιχεία ως τάξη ή συνάρτηση. Μπορείτε να παρέχετε προαιρετικές εισόδους στα στοιχεία που ονομάζονται « στηρίγματα ».

Τα στοιχεία σάς επιτρέπουν να χωρίσετε το περιβάλλον χρήστη σε ανεξάρτητα τμήματα όπως κεφαλίδα, υποσέλιδο και σώμα. Κάθε στοιχείο θα λειτουργεί ανεξάρτητα, ώστε κάθε μεμονωμένο στοιχείο να μπορεί να αποδοθεί ανεξάρτητα στο ReactDOM χωρίς να επηρεάζει ολόκληρη τη σελίδα.

Έρχεται επίσης με «μεθόδους κύκλου ζωής » που σας επιτρέπουν να ορίσετε κομμάτια κώδικα που θέλετε να εκτελέσετε σύμφωνα με την κατάσταση του στοιχείου, όπως μοντάρισμα, απόδοση, ενημέρωση και αποσύνδεση.

Τα στοιχεία του React έρχονται με τις δικές τους αντισταθμίσεις Για παράδειγμα, μπορούμε να επαναχρησιμοποιήσουμε ένα στοιχείο εξάγοντάς το σε άλλα στοιχεία, αλλά μερικές φορές γίνεται σύγχυση όταν χειριζόμαστε πολλαπλά στοιχεία που μιλούν και ενεργοποιούν renders το ένα για το άλλο.

έτσι θα μοιάζει ένα συστατικό!

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

Τι είναι οι σελίδες GitHub>

Με τις σελίδες GitHub, μπορείτε εύκολα να αναπτύξετε τον ιστότοπό σας χρησιμοποιώντας το GitHub δωρεάν και χωρίς να χρειάζεται να ρυθμίσετε οποιαδήποτε υποδομή. Έχουν παράσχει ενότητες έτσι ώστε να μην χρειάζεται να ανησυχείτε για πολλά πράγματα. Αν κολλήσετε μέχρι το τέλος θα δείτε ότι λειτουργεί σαν MAGIC!

Πριν προχωρήσετε, βεβαιωθείτε ότι ..

Αποφασίστε ποιο περιεχόμενο θέλετε να τοποθετήσετε στον ιστότοπό σας

Εξετάστε το τελευταίο βιογραφικό σας μία φορά (αν δεν έχετε, δημιουργήστε ένα τώρα και αναβάλλετε αυτό το έργο μέχρι το επόμενο Σαββατοκύριακο; Θα σας βοηθήσει να έχετε μια ξεκάθαρη ιδέα για το είδος των πληροφοριών που θέλετε να βάλετε στον ιστότοπο του χαρτοφυλακίου σας.

Βρείτε έμπνευση

Περιηγηθείτε στα εκατοντάδες δωρεάν πρότυπα ιστότοπου χαρτοφυλακίου στον ιστό, δείτε πώς και τι μπορείτε να χρησιμοποιήσετε από αυτά - βγάλτε ένα στυλό και χαρτί και σχεδιάστε ένα τραχύ διάγραμμα για να πάρετε μια ιδέα για το πώς θα μοιάζει ο ιστότοπός σας. Θα χρησιμοποιήσω αυτό το πρότυπο για να το δείξω.

Συγκεντρώστε μερικές εκπληκτικές φωτογραφίες του εαυτού σας

Φυσικά δεν θέλετε να φαίνεστε άσχημα στον δικό σας ιστότοπο χαρτοφυλακίου. Εξετάστε λοιπόν τα αρχεία φωτογραφιών σας για να βρείτε τις τέλειες φωτογραφίες για τον ιστότοπό σας.

Συντονιστείτε στην αγαπημένη σας λίστα αναπαραγωγής

Ο θρύλος λέει ότι τα καλά πράγματα έρχονται μόνο με καλή μουσική… και σίγουρα δεν θέλετε να χάσετε υπέροχα πράγματα.

Ας πηδήσουμε στο τμήμα του κτιρίου

Στις ακόλουθες ενότητες, θα περιγράψω βήματα για τη δημιουργία της εφαρμογής χαρτοφυλακίου, αλλά δεν χρειάζεται να ακολουθήσετε τον ίδιο κωδικό που χρησιμοποιώ. Επικεντρωθείτε στην εκμάθηση των εννοιών και δείξτε κάποια δημιουργικότητα! Η περαιτέρω ανάγνωση χωρίστηκε σε τρεις ενότητες.

  1. Ρύθμιση της εφαρμογής React
  2. Κατανομή της σελίδας HTML σε στοιχεία React
  3. Ανάπτυξη της εφαρμογής σας σε σελίδες Github

Ρύθμιση εφαρμογής React

Θα χρησιμοποιούμε create-react-app- μια ενότητα που παρέχεται από το Facebook - η οποία μας βοηθά να δημιουργούμε εφαρμογές React.js με ευκολία και χωρίς να ανησυχούμε για εργαλεία κατασκευής

  • Μεταβείτε στην κονσόλα και εκτελέστε npm install create-react-appγια να εγκαταστήσετε αυτήν την ενότητα μέσω npm (βεβαιωθείτε ότι έχετε εγκαταστήσει npmπριν τη χρησιμοποιήσετε - ακολουθήστε αυτόν τον σύνδεσμο για περισσότερες πληροφορίες).
  • Τώρα εκτελέστε το 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.

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

Now your project directory should look like this.

  • Run the npm install command which will install dependent modules under node_module directory.
  • 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 //localhost:3000and you should be able to see the starter page of the React-app.

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.

  • 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: για την παροχή προτύπων αιχμής που αποτέλεσαν τεράστια έμπνευση για τον ιστότοπό μου. ;
  • Daniel Lo Nigro & κοινότητα: για τη δημιουργία HTML σε JSX Compiler, το οποίο αποδείχθηκε βολικό κατά τη μετατροπή μπλοκ HTML σε κώδικα JSX. ;
  • Αγαπητοί φίλοι μου: που με βοήθησαν να διορθώσω τα λάθη μου.
  • ΕΣΕΙΣ: για να κολλήσετε, ελπίζω να έχετε παραγωγικό χρόνο Συνεχίστε να εξερευνάτε και χτίζετε καταπληκτικά πράγματα!