Como crear un proyecto con React Js

[smartads]

React.js es una librería creada por el equipo de desarrollo de Facebook para la creación de interfaces gráficas de usuario. En los últimos años ha adquirido gran popularidad en las comunidades de desarrollo web.

Para poder crear un proyecto con React.js debemos tener instalado NodeJs (que ya vimos en anteriores entradas como se instala), para crear un proyecto de React.js tan solo debemos tener instalado create-react-aplicación.

Configuración del entorno:

Antes de comenzar, asegúrate de tener Node.js instalado en tu sistema. Puedes descargar la última versión desde el sitio web oficial de Node.js (https://nodejs.org) e instalarla siguiendo las instrucciones adecuadas para tu sistema operativo.

Crear un nuevo proyecto:

Para poder instalar créate-react-app tenemos que tener inicia la terminal del sistema en el que estamos, una vez iniciada tenemos seguir los siguientes pasos:

1. En una terminal (y en el directorio de su preferencia) ejecutar:

npm install -g create-react-app

Este comando instalará de manera global el paquete create-react-app.

2. Para verificar que el paquete ha sido instalado con éxito, ejecutar en la consola:

create-react-app y esperar un mensaje de instalación satisfactoria.

Para crear nuestro proyecto ya solo tenemos que escribir el siguiente comando:

create-react-app nombre-del-proyecto

Una vez introducido la base del proyecto comenzará a crear el proyecto este comando tardará porque dependerá del ancho de banda que tengas de internet

Cuando este creado el proyecto tendremos que acceder a la carpeta del proyecto en Microsoft Windows por ejemplo es cd nombre-del-proyecto y cuando estemos dentro tenemos que ejecutar el comando npm start para que el proyecto se inicie.

Ejecutar el proyecto:

Navega al directorio de tu proyecto recién creado:

cd mi-proyecto-react

Ejecuta el siguiente comando para iniciar la aplicación en un servidor de desarrollo:

npm start

React iniciará el servidor de desarrollo y abrirá automáticamente tu aplicación en el navegador.

Estructura del proyecto:

El listado de nuestra app recién creada es bastante sencillo. Observarás que tenemos varias carpetas:

• node_modules: con las dependencias npm del proyecto
• public: esta es la raíz de nuestro servidor donde se podrá encontrar el index.html, el archivo principal y el favicon.ico que sería el icono de la aplicación.
• src: aquí es donde vamos a trabajar principalmente para nuestro proyecto, donde vamos a colocar los archivos de nuestros componentes React.

Además, encontrarás archivos sueltos como:

• README.md que es el readme de Create React App, con cantidad de información sobre el proyecto y las apps que se crean a partir de él.
• package.json, que contiene información del proyecto, así como enumera las dependencias de npm, tanto para desarrollo como para producción. Si conoces npm no necesitarás más explicaciones.
• .gitignore que es el típico archivo para decirle a git que ignore ciertas cosas del proyecto a la hora de controlar el versionado del código.

Fuentes:

https://medium.com/@dgongoragamboa/c%C3%B3mo-crear-un-proyecto-en-react-desde-cero-d358b76dca7c

https://desarrolloweb.com/articulos/primeros-pasos-react.html