cadena de bloques

Cree un portafolio con React y GitHub Student Development Engineer Pack


Hola, en este blog, crearemos un sitio web de Portafolio utilizando las herramientas proporcionadas por React y el Paquete de Ingeniero de Desarrollo de Estudiantes de GitHub.

¿Qué es theGitHub Student Developer Pack? Nunca he oído hablar de eso.

Cree un portafolio con React y GitHub Student Development Engineer Pack

Las herramientas del mundo real, como los servicios de alojamiento en la nube, los nombres de dominio y el software específico pueden ser costosos para los estudiantes. Es por eso que GitHub trabaja con otras compañías de tecnología para crear paquetes de desarrollo para estudiantes, brindándoles acceso gratuito a las mejores herramientas de desarrollo en un solo lugar.

Eso es genial ¿Qué se incluye en el paquete de desarrollo para estudiantes?

Actualmente, el paquete incluye 23 servicios y herramientas para que usen los estudiantes. Algunos servicios son $ 50 en créditos digitales en el océano, Heroku Hobby Dev Dyno gratuito durante dos años, nombre de dominio .me gratuito, envío de correo electrónico más restringido a través de SendGrid, integración privada continua a través de Travis CI y más.

Cree un portafolio con React y GitHub Student Development Engineer Pack

Impresionante ¿Cómo me inscribo?

Cree un portafolio con React y GitHub Student Development Engineer Pack

Para solicitar el GitHub Student Developer Pack, debe ser un estudiante actual. Si no eres un estudiante, entonces no eres elegible para la beca. Solicite un paquete de desarrollador para estudiantes en https://education.github.com/pack. Haga clic en Obtener paquete y siga la solicitud en pantalla. Si no tiene una dirección de correo electrónico de una escuela que termina en .edu, necesitará una identificación válida de la escuela u otra prueba de registro, como su imagen de calendario, que el equipo de GitHub revisará. Se requieren de 24 a 48 horas para solicitar una auditoría.

Resumen de lo que pasará a continuación

En este blog, crearemos un sitio web de Portafolio utilizando las herramientas proporcionadas por React y el Paquete de Ingeniero de Desarrollo Estudiantil de GitHub. Para hacer esto, usaremos el Dino Heroku gratuito y el nombre de dominio Namecheap gratuito en el Paquete. También usaremos GitHub para empujar nuestro código y desplegarlo en la página de GitHub.

Cree un portafolio con React y GitHub Student Development Engineer Pack

Empezando

Antes de profundizar en la sección de codificación, primero instalaremos las herramientas que necesitamos. Voy a utilizar el gestor de paquetes de hilo. Puede encontrar instrucciones para instalar el hilo en https://yarnpkg.com/lang/en/docs/install/.
1. reacción
Use el siguiente comando para instalar y crear una aplicación de reacción llamada portfolio
Combinación de reacción de creación de hilo.

2. Heroku CLI
Ejecute el siguiente comando para instalar la CLI de Heroku en el sistema operativo Ubuntu 16+.
Curl https://cli-assets.heroku.com/install-ubuntu.sh | SH
Para obtener instrucciones sobre todos los demás sistemas operativos, visite https://devcenter.heroku.com/articles/heroku-cli
Asegúrese de iniciar sesión en la CLI de Heroku mediante el comando de inicio de sesión de heroku.

3. Usa los paquetes de instalación de gh-pages y fontawesome.
Hilo añadir página gh
Además del hilo @ fortawesome / fontawesome-svg-core
Yarn add @ fortawesome / free-solid-svg-icons
Añadir @ fortawesome / react-fontawesome
Yarn add @ fortawesome / free-brands-svg-icons

Codificación de cartera

Usaremos la plantilla de currículum de Bootstrap 4 para construir nuestro portafolio. Las plantillas se pueden encontrar aquí. https://github.com/BlackrockDigital/startbootstrap-resume

Copia jquery y bootstrap
Cree los directorios css y js en la carpeta pública y copie los siguientes archivos de la plantilla descargada en esta carpeta.
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

Vincular dependencias agregadas
Abra index.html en el directorio público y vincule los css y js copiados de la siguiente manera:
Para CSS para Javascript

Agregar una plantilla a una estructura basada en componentes React
La plantilla de reanudación de Bootstrap debe dividirse en componentes. Cree un componente de directorio en el directorio src que contiene todos los componentes. Lo dividimos en los siguientes siete componentes:
1. Sidebar.js
2. Landing.js
3. Experiencia.js
4. Educación.js
5. Skills.js
6. Interests.js
7. Awards.js

Usar json como almacén de datos de usuario.
Cree un archivo json llamado profileData.json en el directorio .src. Este archivo guardará los datos de la cartera del usuario. La estructura del archivo json es la siguiente:

Cada clave de json lleva el nombre del componente de los datos que se utilizarán.

Modificar App.js.
App.js es el archivo principal que importa todos los demás componentes y define la estructura del sitio.

Primero, importamos todos los componentes creados y los datos de usuario del archivo json creado. En el constructor, usamos los datos correspondientes de json para establecer el estado de cada componente. Estos datos del estado se pasarán al componente como prop. Luego organiza todos los componentes según la plantilla de Bootstrap.

Crear Sidebar.js
El componente de la barra lateral contiene el código para la barra lateral del sitio. Esta es la etiqueta de navegación completa en la plantilla. Antes de copiar el código de la plantilla, asegúrese de que sea compatible con jsx. La clase debe ser renombrada a className, o puede usar este https://magic.reactjs.net/htmltojsx.htm para convertir su html a jsx.

En el constructor de cada componente, los datos de props se asignan a una variable a través de la cual se agregan a la posición relevante en jsx.

Para el componente de barra lateral, esto se hace con this.sidebarData = props.sidebarData. Se realiza de manera similar para todos los demás componentes.

Reemplace todos los nombres y campos codificados con los datos en json. Para hacer esto, haga referencia a los datos json pasando la variable a las propiedades del componente. La sintaxis para hacer referencia a las variables en jsx es hacer referencia a las variables entre llaves. Por lo tanto, se puede acceder al nombre del usuario en la barra lateral como {this.sidebarData.firstName}. Se puede acceder a todos los demás campos de datos de una manera similar y reemplazarlos con datos de json.
Encuentre Sidebar.js en el siguiente enlace en GitHub.

Anubang-Dagal / GitHub Education, Portfolio / src Catalog / Components / Sidebar.js
Sidebar.js código fuente para GitHub Education Portfolio.github.com

Crear Landing.js
Landing.js se crea de una manera similar. La primera parte de la identificación es sobre el código html de inicio de sesión requerido. Primero, los datos de los accesorios se cargan en el constructor y se agregan al jsx del componente.

Anubang-Dagal / GitHub Education, Portfolio / src Directory / Components / Landing.js
Código fuente de Landing.js para GitHub Education Portfolio.github.com

Crear Skills.js
La habilidad del usuario en los datos json es una lista de diccionarios. Para agregar esto a jsx, use el mapa para recorrer en bucle los datos cargados de accesorios e inserte los datos en jsx.

Donde this.skills son los datos de habilidad del usuario cargados desde profileData.json

Crea otros componentes de forma similar. Ejecute el servidor con yarn start y vea su cartera en http: // localhost: 3000 en su navegador.

Usa el paquete de desarrollo de estudiantes de GitHub

Obtenga gratis el nombre de dominio .me usando Namecheap
Vaya a https://education.github.com/pack/offers y busque Namecheap. Obtenga un dominio gratuito conectándose a su cuenta de GitHub en Namecheap.

Cree un portafolio con React y GitHub Student Development Engineer Pack

Autoriza Namecheap y encuentra tu nombre de dominio gratis. Una vez que tenga el nombre de dominio, vaya a su lista de nombres de dominio y haga clic en "Administrar" para administrar su nombre de dominio.
Haga clic en la pestaña DNS avanzada y busque Registros de host. Haga clic en el botón Agregar nuevo registro para agregar un nuevo registro. Agregue el siguiente registro:

Reemplace githubusername.github.io con su nombre de usuario real de GitHub. Después de eso, su dominio está listo para ser utilizado con la página de GitHub.

Utilice GitHub para alojar su cartera utilizando GitHub.
En la raíz del proyecto, inicialice el repositorio de git de la siguiente manera
Git init. Vaya a GitHub y cree un repositorio vacío llamado githubusername.github.io, donde reemplaza githubusername con su nombre de usuario real de GitHub. Copie el enlace git para su repositorio y agréguelo a su repositorio local de git como se muestra a continuación
Git remoto agregar origen

Cree un archivo llamado CNAME en la raíz del directorio y agregue el nombre de dominio de su nombre de pila en el formato de su dominio de dominio de dominio y guárdelo.

Agregue 2 scripts para pre-desplegar y desplegar en el script en package.json como se muestra a continuación.

“Pre-despliegue”: “Harn running build”,
"Implementación": "gh-pages -d build"

Ambos scripts deben estar en la clave de scripts de package.json. También agregue un botón de inicio a package.json y configúrelo en http://yournamecheapdomain.me/.

Ejecute yarn ejecute el despliegue para enviar el código a la rama de gh-pages y alójelo desde allí. Echa un vistazo a su cartera de hosting en http://yournamecheapdomain.me/.

Cree un portafolio con React y GitHub Student Development Engineer Pack

Empuje el código al maestro realizando los siguientes pasos:

Git añadir -A
Git commit -m "empujar código de cartera"
Git push master master Cree un portafolio con React y GitHub Student Development Engineer Pack

Recibe tu portafolio en Heroku
Con el Kit de desarrollo para estudiantes GitHub, recibirás el Hobby Dev Dyno gratuito de Heroku. Vaya a Heroku en https://education.github.com/pack/offers y conecte su cuenta de GitHub a Heroku.

Cree un portafolio con React y GitHub Student Development Engineer Pack

Este proceso implica la verificación manual por parte del equipo de Heroku y puede tardar uno o dos días en ser aprobado. Una vez aprobada la solicitud, la aplicación está lista para ser implementada con su Hobby Dev Dyno en su cuenta Heroku.

Para implementar su aplicación, asegúrese de iniciar sesión en la CLI de Heroku. Además, agregue un nuevo objeto a package.json de la siguiente manera:

"Motor": {
"npm": "6.4.1",
"Nodo": "10.5.2"
}

Puede obtener la versión de nodo ejecutando npm -v en el terminal para ejecutar las versiones de nodo -v y npm.

Cree una aplicación Heroku ejecutando heroku create appname, donde appname es el nombre de aplicación de su cartera. Si aún no ha enviado su código y lo hace git push heroku master. Espera a que Heroku complete el despliegue.

Ejecute heroku para abrir la aplicación alojada en Heroku.

Eso es, es así de simple.

La versión de implementación de GitHub Pages se encuentra en http://anupamdagar.com/GitHub-Education-Portfolio/

La versión de implementación de Heroku se encuentra en https://studentpackportfolio.herokuapp.com/

El código fuente completo de la aplicación está en GitHub

Anubang-Dagal / GitHub Educación, Portafolio
Contribuya al desarrollo de Anupam-dagar / GitHub-Education-Portfolio creando una cuenta en GitHub.github.com

Acerca de mi

Hola, soy Anupam Dagar, estudiante de tecnología de la información de Allahabad, Instituto Indio de Tecnología de la Información. Soy un experto en el campus de GitHub, un colaborador de código abierto y un desarrollador de pila completa. Para saber más sobre mí, contáctame en Twitter o GitHub

Fuente: Compilado de HACKERNOON por información 0x. Los derechos de autor pertenecen al autor, el enlace original: https://hackernoon.com/create-a-portfolio-using-react-and-github-student-developer-pack-955379207855?source=collection_category—4——2———— ———–. Reimpreso sin permiso