Como hacer una página web en React

Para empezar con nuestra primera página web en React vamos a necesitar tener instalado Node.js en otra ocasión enseñaré como instalar Node en linux también, así que comencemos.

Existen dos maneras de usar React en una aplicación web una es usando directamente la librería, y otra seria usando un proyecto Node.js para React.

Liberia React.js

Las primeras diferencias entre usar una librería de usar un proyecto Node para React es que, usando la librería en un proyecto web vamos a insertar el CDN o el path(o dirección del archivo) de nuestra librería React que podremos descargar yendo al link de la CDN.

  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

Otra diferencia con el proyecto Node es que la librería es MPA (Mltiple Page Application) ¿eso que quiere decir?, que con la librería vamos a usar muchos archivos HTML para navegar entre ellos usualmente por href.

En este caso no mostraré un ejemplo, ya que me interesa que veamos lo que se usa actualmente que es un proyecto Node para React.

Proyecto React

Un proyecto React a diferencia de no usar un CDN, también es SPA (Simple Page Application) ¿y qué quiere decir?, que solo vamos a necesitar un solo archivo HTML que contendrá por dentro componentes React es decir lo único que va a cambiar en este punto van a hacer solo los componentes usando una navegación interna que veremos más adelante, esto nos ayuda bastante, ya que no necesitamos tener tantos archivos para nuestra página y al momento de baldear o mitificar nuestra página veremos efectivamente un solo HTML.

Crear una página web con React

Bien para crear un proyecto React es bastante sencillo, una vez que tengamos instalado Node.js vamos a ir a una terminal o linea de comandos, y usaremos los siguientes comandos.

npx create-react-app app-name

Una vez termine de crear y descargar dependencias iras a la carpeta del proyecto que hallas creado.

cd app-name
npm start

Y listo tenemos nuestra primera página web en React.

Espero que les haya gustado en los próximos post veremos como funcionan los componentes y el routing para navegar en una página SPA.