Cómo crear el sitio web de su cartera usando React.js

Programación

Después de que mis amigos cancelaron nuestros planes de fin de semana, estaba buscando algo para matar el tiempo. Finalmente terminé con un plan para crear un sitio web de cartera después de revisar mi larga lista pendiente de 'Deseos por hacer'cosas.

Después de muchas horas de búsqueda de tecnologías y plantillas, terminé creando este sitio web usando React.js e implementándolo usando páginas de Github. Puede encontrar el código del sitio web aquí ( técnicamente se llama ' aplicación web ', pero para este artículo me referiré a él como un 'sitio web' ... espero que esté bien).

Lo que vas a aprender

  • Algunos conceptos básicos de React.js
  • Cómo usar create-react-app desde un sitio web HTML
  • Cómo implementar el sitio web de su cartera utilizando 'páginas de Github'

Algunos conceptos que debes conocer antes de comenzar.

Nota: no dude en omitir esta parte si ya está familiarizado con los conceptos básicos de React.js y React Components.

T puntos stos proporcionarán una idea muy básica del mundo reaccionar. Le recomiendo que estudie más sobre React en la documentación y lo practique con la ayuda de freeCodeCamp.

Qué es React.js>

Por ahora, es suficiente saber que React.js es la biblioteca de JavaScript que se usa para construir componentes de IU. Fue creado por los ingenieros de Facebook y hoy en día, está sacudiendo el mundo de JavaScript.

Qué es un componente React>

React te permite definir componentes como una clase o una función. Puede proporcionar entradas opcionales a los componentes llamados ' props '.

Los componentes le permiten dividir la interfaz de usuario en secciones independientes como encabezado, pie de página y cuerpo. Cada componente funcionará de forma independiente, por lo que cualquier componente individual se puede representar de forma independiente en el ReactDOM sin afectar a toda la página.

También viene con 'métodos de ciclo de vida ' que le permiten definir fragmentos de código que desea ejecutar de acuerdo con el estado del componente, como montar, renderizar, actualizar y desmontar.

Los componentes de React vienen con sus propias compensaciones. Por ejemplo, podemos reutilizar un componente exportándolo a otros componentes, pero a veces se vuelve confuso manejar varios componentes hablando y activando representaciones entre sí.

¡así es como se vería un componente!

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

¿Qué son las páginas de GitHub?>

Con las páginas de GitHub, puede implementar fácilmente su sitio utilizando GitHub de forma gratuita y sin la necesidad de configurar ninguna infraestructura. Han proporcionado módulos para que no tengas que preocuparte por muchas cosas. ¡Si te quedas hasta el final, verás que funciona como MÁGICO!

Antes de continuar, asegúrese de ...

Decide qué contenido quieres publicar en tu sitio web

Revise su último currículum una vez (si no tiene uno, cree uno ahora y posponga este proyecto hasta el próximo fin de semana). Le ayudará a tener una idea clara sobre el tipo de información que desea incluir en el sitio web de su cartera.

Encontrar inspiración

Explore los cientos de plantillas gratuitas de sitios web de portafolios en la web, vea cómo y qué puede usar de ellas: saque un lápiz y papel y dibuje un diagrama aproximado para tener una idea de cómo se verá su sitio web. Usaré esta plantilla para demostrar.

Reúne algunas fotos increíbles de ti mismo

Por supuesto, no querrás quedar mal en el sitio web de tu propia cartera. Así que busque en sus archivos de fotos para encontrar las fotos perfectas para su sitio web.

Sintonice su lista de reproducción favorita

Cuenta la leyenda que las cosas buenas solo vienen con buena música ... y seguramente no querrás perderte ninguna gran cosa.

Saltemos a la parte del edificio

En las siguientes secciones, describiré los pasos para crear la aplicación de cartera, pero no es necesario que sigas el mismo código que yo uso. ¡Concéntrese en aprender los conceptos y muestre algo de creatividad! La lectura adicional se ha dividido en tres secciones.

  1. Configurando la aplicación React
  2. Desglosando la página HTML en componentes de React
  3. Implementar su aplicación en páginas de Github

Configurando la aplicación React

Usaremos, create-react-appun módulo proporcionado por Facebook, que nos ayuda a crear aplicaciones React.js con facilidad y sin preocuparnos por las herramientas de compilación.

  • Vaya a la consola y ejecute npm install create-react-apppara instalar este módulo a través de npm (asegúrese de haberlo instalado npmantes de usarlo; siga este enlace para obtener más información).
  • Ahora ejecute npm create-react-app ${project-name}que buscará los scripts de compilación y creará una estructura de archivo que se verá así.
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

Cree una componentscarpeta en el srcdirectorio. Aquí es donde almacenaremos nuestros componentes en el futuro.

  • Copie todas las imágenes, fuentes, archivos HTML y CSS del HTML con el templateque decidió trabajar en la publiccarpeta.

Ahora el directorio de su proyecto debería verse así.

  • Ejecute el npm installcomando que instalará los módulos dependientes en el node_moduledirectorio.
  • Si lo tiene hasta ahora, al ejecutar el npm startcomando se iniciará la aplicación React en el localhost. Vaya a //localhost:3000y debería poder ver la página de inicio de la aplicación React.

Desglose de la página HTML en componentes de React.

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: for providing state of the art templates which were a huge inspiration for my portfolio website. ?
  • Daniel Lo Nigro & community: for creating HTML to JSX Compiler, which turned out to be handy while converting HTML blocks into JSX code. ?
  • My dearest friends: who helped me in correcting my mistakes.
  • YOU: for sticking around, I hope you had a productive time. Keep exploring and building amazing things!