BLOCKCHAIN

Créez un portfolio avec React et le pack d’ingénieurs en développement étudiant GitHub


Bonjour, Dans ce blog, nous allons créer un site Web Portfolio en utilisant les outils fournis par React et le pack d’ingénieurs en développement étudiant de GitHub.

Qu'est-ce que le pack de développement étudiant GitHub? Jamais entendu parler de ça.

Créez un portfolio avec React et le pack d’ingénieurs en développement étudiant GitHub

Les outils du monde réel tels que les services d'hébergement dans le cloud, les noms de domaine et des logiciels spécifiques peuvent être coûteux pour les étudiants. C'est pourquoi GitHub collabore avec d'autres sociétés de technologie pour créer des packages de développement pour étudiants, offrant aux étudiants un accès gratuit aux meilleurs outils de développement en un seul endroit.

C'est génial. Qu'est-ce qui est inclus dans le pack de développement étudiant?

Actuellement, le package comprend 23 services et outils à utiliser par les étudiants. Certains services sont des crédits océaniques numériques de 50 $, Heroku Hobby Dev Dyno gratuit pendant deux ans, un nom de domaine .me gratuit, l'envoi d'e-mails plus restreints via SendGrid, l'intégration continue privée via Travis CI, etc.

Créez un portfolio avec React et le pack d’ingénieurs en développement étudiant GitHub

Génial. Comment puis-je postuler?

Créez un portfolio avec React et le pack d’ingénieurs en développement étudiant GitHub

Pour postuler au Pack de développement étudiant GitHub, vous devez être un étudiant actuel. Si vous n'êtes pas étudiant, vous n'êtes pas admissible à la bourse. Demandez un package de développement pour étudiant à l'adresse https://education.github.com/pack. Cliquez sur Obtenir le package et suivez la demande à l'écran. Si vous n'avez pas l'adresse électronique d'une école se terminant par .edu, vous aurez besoin d'un identifiant d'école valide ou d'une autre preuve d'inscription, telle que l'image de votre calendrier, que l'équipe GitHub examinera. Il faut 24 à 48 heures pour demander un audit.

Résumé de ce qui va se passer ensuite

Dans ce blog, nous allons créer un site Web Portfolio à l'aide des outils fournis par React et le pack d'ingénieurs en développement étudiant de GitHub. Pour ce faire, nous utiliserons le dyno gratuit Heroku et le nom de domaine gratuit Namecheap dans le pack. Nous allons également utiliser GitHub pour envoyer notre code et le déployer sur la page GitHub.

Créez un portfolio avec React et le pack d’ingénieurs en développement étudiant GitHub

Commencer

Avant de plonger dans la section de codage, nous allons d’abord installer les outils dont nous avons besoin. Je vais utiliser le gestionnaire de paquets de fil. Vous pouvez trouver des instructions pour installer le fil à l'adresse https://yarnpkg.com/lang/en/docs/install/.
1. réaction
Utilisez la commande suivante pour installer et créer une application de réaction appelée portfolio
Combinaison de réaction de création de fil

2. Heroku CLI
Exécutez la commande suivante pour installer Heroku CLI sur le système d'exploitation Ubuntu 16+.
Curl https://cli-assets.heroku.com/install-ubuntu.sh | SH
Pour obtenir des instructions sur tous les autres systèmes d'exploitation, veuillez visiter https://devcenter.heroku.com/articles/heroku-cli.
Assurez-vous de vous connecter à la CLI Heroku à l'aide de la commande heroku login.

3. Utilisez les paquetages gh-pages et fontawesome
Fil ajouter gh page
Ajout de fil @ fortawesome / fontawesome-svg-core
Fils ajouter @ fortawesome / free-solid-svg-icons
Ajouter @ fortawesome / react-fontawesome
Fil add @ fortawesome / free-brands-svg-icons

Portefeuille de codage

Nous allons utiliser le modèle de curriculum vitae de Bootstrap 4 pour construire notre portefeuille. Les modèles peuvent être trouvés ici. https://github.com/BlackrockDigital/startbootstrap-resume

Copier jquery et bootstrap
Créez les répertoires css et js dans le dossier public et copiez les fichiers suivants du modèle téléchargé dans ce dossier.
1. bootstrap.min.css
2. resume.min.css
3. bootstrap.bundle.min.js
4. jquery.easing.min.js
5. jquery.min.js
6. resume.min.js

Lier les dépendances ajoutées
Ouvrez index.html dans le répertoire public et liez les fichiers css et js copiés comme suit:
Pour CSS pour Javascript

Ajouter un modèle à une structure à base de composants React
Le modèle de CV Bootstrap doit être divisé en composants. Créez un composant de répertoire dans le répertoire src qui contient tous les composants. Nous le divisons en sept composantes:
1. Sidebar.js
2. Landing.js
3. Experience.js
4. Education.js
5. Compétences.js
6. interest.js
7. Awards.js

Utiliser json comme magasin de données utilisateur
Créez un fichier json appelé profileData.json dans le répertoire .src. Ce fichier enregistrera les données du portefeuille de l'utilisateur. La structure du fichier json est la suivante:

Chaque clé de json est nommée d'après le composant des données qui sera utilisé.

Modifier App.js.
App.js est le fichier principal qui importe tous les autres composants et définit la structure du site.

Premièrement, nous importons tous les composants créés et les données utilisateur à partir du fichier json créé. Dans le constructeur, nous utilisons les données correspondantes de json pour définir l’état de chaque composant. Ces données de l'état seront transmises au composant sous la forme d'un accessoire. Ensuite, organisez tous les composants en fonction du modèle de Bootstrap.

Créer Sidebar.js
Le composant Sidebar contient le code de la barre latérale du site. Ceci est la balise de navigation complète dans le modèle. Avant de copier le code du modèle, assurez-vous qu’il est compatible avec jsx. La classe doit être renommée en className ou vous pouvez utiliser ce https://magic.reactjs.net/htmltojsx.htm pour convertir votre code HTML en jsx.

Dans le constructeur de chaque composant, les données de props sont affectées à une variable par laquelle elles sont ajoutées à la position correspondante dans jsx.

Pour le composant sidebar, cela se fait avec this.sidebarData = props.sidebarData. Cela se fait de la même manière pour tous les autres composants.

Remplacez tous les noms et champs codés en dur par les données de json. Pour ce faire, référencez les données JSON en transmettant la variable aux accessoires du composant. La syntaxe de référencement des variables dans jsx consiste à référencer les variables entre accolades. Par conséquent, le nom de l'utilisateur dans la barre latérale est accessible sous la forme {this.sidebarData.firstName}. Tous les autres champs de données sont accessibles de la même manière et remplacés par les données de json.
Recherchez Sidebar.js dans le lien suivant sur GitHub.

Anubang-Dagal / GitHub Education, Portfolio / Catalogue src / Components / Sidebar.js
Code source Sidebar.js pour GitHub Education Portfolio.github.com

Créer Landing.js
Landing.js est créé de manière similaire. La première partie de l'id concerne la partie de connexion requise html. Tout d'abord, les données des accessoires sont chargées dans le constructeur et ajoutées au fichier jsx du composant.

Anubang-Dagal / GitHub Education, Répertoire / Répertoire src / Composants / Landing.js
Landing.js code source pour GitHub Education Portfolio.github.com

Créer Skills.js
La compétence de l'utilisateur en données JSON est une liste de dictionnaires. Pour ajouter ceci à jsx, utilisez la carte pour parcourir les données chargées depuis les accessoires et les insérer dans jsx.

Où this.skills correspond aux données de compétence de l'utilisateur chargées à partir de profileData.json

Créez d'autres composants de la même manière. Exécutez le serveur avec yarn start et affichez votre portefeuille sur http: // localhost: 3000 dans votre navigateur.

Utiliser le pack d'ingénieurs en développement étudiant GitHub

Obtenez un nom de domaine .me gratuit en utilisant Namecheap
Allez sur https://education.github.com/pack/offers et cherchez Namecheap. Obtenez un domaine gratuit en vous connectant à votre compte GitHub sur Namecheap.

Créez un portfolio avec React et le pack d’ingénieurs en développement étudiant GitHub

Autorisez Namecheap et trouvez votre nom de domaine gratuit. Une fois que vous avez le nom de domaine, accédez à votre liste de noms de domaines et cliquez sur "Gérer" pour gérer votre nom de domaine.
Cliquez sur l'onglet DNS avancé et recherchez les enregistrements d'hôte. Cliquez sur le bouton Ajouter un nouvel enregistrement pour ajouter un nouvel enregistrement. Ajoutez l'enregistrement suivant:

Remplacez githubusername.github.io par votre nom d'utilisateur GitHub actuel. Après cela, votre domaine est prêt à être utilisé avec la page GitHub.

Utilisez GitHub pour héberger votre portefeuille à l’aide de GitHub.
Dans la racine du projet, initialisez le référentiel git comme suit
Git init. Allez sur GitHub et créez un référentiel vide appelé githubusername.github.io, où vous remplacerez githubusername par votre nom d'utilisateur GitHub actuel. Copiez le lien git pour votre référentiel et ajoutez-le à votre référentiel git local, comme indiqué ci-dessous.
Git remote ajouter l'origine

Créez un fichier nommé CNAME à la racine du répertoire, ajoutez votre nom de domaine namecheap au format votrenecheapeapain.me et enregistrez-le.

Ajoutez 2 scripts à pré-déployer et à déployer dans le script de package.json, comme indiqué ci-dessous.

"Pré-déploiement": "Construction en cours d'exécution",
"Déploiement": "gh-pages -d build"

Les deux scripts doivent être dans la clé de script de package.json. Ajoutez également un bouton d'accueil à package.json et définissez-le sur http://yournamecheapdomain.me/.

Exécutez yarn run deploy pour envoyer le code à la branche gh-pages et l'héberger à partir de celle-ci. Vérifiez votre portefeuille d'hébergement à l'adresse http://yournamecheapdomain.me/.

Créez un portfolio avec React et le pack d’ingénieurs en développement étudiant GitHub

Envoyez le code au maître en procédant comme suit:

Ajouter Git -A
Git commit -m "code de portefeuille push"
Maître d'origine Git Push Créez un portfolio avec React et le pack d’ingénieurs en développement étudiant GitHub

Hébergez votre portfolio sur Heroku
Avec le kit de développement étudiant GitHub, vous recevrez gratuitement Hobby Dev Dyno de Heroku. Accédez à Heroku à l'adresse https://education.github.com/pack/offers et connectez votre compte GitHub à Heroku.

Créez un portfolio avec React et le pack d’ingénieurs en développement étudiant GitHub

Ce processus implique une vérification manuelle par l'équipe Heroku et peut prendre un jour ou deux pour être approuvé. Une fois la demande approuvée, l'application est prête à être déployée avec votre Hobby Dev Dyno sur votre compte Heroku.

Pour déployer votre application, assurez-vous de vous connecter à la CLI Heroku. Ajoutez également un nouvel objet à package.json comme suit:

"Moteur": {
"npm": "6.4.1",
"Node": "10.5.2"
}

Vous pouvez obtenir la version du noeud en exécutant npm -v dans le terminal pour exécuter les versions node -v et npm.

Créez une application Heroku en exécutant heroku create appname, où appname est le nom d'application de votre portefeuille. Si vous n'avez pas encore soumis votre code et que git push heroku master. Attendez que Heroku ait terminé le déploiement.

Lancez heroku pour ouvrir l'application hébergée sur Heroku.

C'est ça, c'est aussi simple que cela.

La version de déploiement de GitHub Pages se trouve à l'adresse http://anupamdagar.com/GitHub-Education-Portfolio/

La version de déploiement de Heroku se trouve à l'adresse https://studentpackportfolio.herokuapp.com/.

Le code source complet de l'application est sur GitHub

Anubang-Dagal / GitHub Education, Portfolio
Contribuez au développement de Anupam-dagar / GitHub-Education-Portfolio en créant un compte sur GitHub.github.com

À propos de moi

Bonjour, je suis Anupam Dagar, étudiante en informatique à Allahabad, Institut indien des technologies de l'information. Je suis un expert du campus GitHub, un contributeur open source et un développeur full stack. Pour en savoir plus sur moi, contactez-moi sur Twitter ou GitHub

Source: compilé à partir de HACKERNOON par les informations 0x. Le droit d'auteur appartient à l'auteur, le lien d'origine: https://hackernoon.com/create-a-portfolio-using-react-and-github-student-developer-pack-955379207855?source=collection_category—4————— ———–. Réimprimé sans permission