Hace unas semanas publiqué un artículo titulado: Crea tu primer componente con Vue.js (para dummies) el cual tuvo buena recepción por parte de la comunidad, estos días de cuarentena debido a la emergencia sanitaria mundial por el covid-19 he decidido ser autodidacta en React.js, por ello iré compartiendo diferentes artículos relacionados con esta tecnología.
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, además de tener una fuerte salida laboral en el mercado front-end de varios países.
¿Qué es react-create-app?
Existen varias maneras de crear un proyecto con React.js, una de ellas es instalando las herramientas necesarias (Babel, WebPack, etc.) de manera manual, para ello se necesita tener ciertos conocimientos para poder configurar dichas herramientas de la manera adecuada; esto puede ser algo desmotivante e intimidante para alguien que recién comienza a familiarizarse con esta tecnología.
create-react-app es una forma más sencilla de poder crear proyectos pre-configurados y listos para usarse, omitiendo de esta manera la configuración inicial permitiéndonos trabajar de inmediato en nuestro proyecto.
¿Cómo crear un proyecto usando create-react-app?
Para poder crear un nuevo proyecto de React.js usando create-react-app necesitamos tener instalado en nuestro ordenador tanto node.js como npm.
Existen varios tutoriales en la red sobre como instalar estas tecnologías.
Una vez que cuenten con node y npm bastará con seguir los siguientes pasos:
En una terminal (y en el directorio de su preferencia) ejecutar:
npm install -g create-react-app. Este comando instalará de manera global el paquetecreate-react-app.Para verificar que el paquete ha sido instalado con éxito, ejecutar en la consola:
create-react-appy esperar un mensaje de instalación satisfactoria.
- Ya para finalizar, podemos crear un nuevo proyecto con la siguiente sintaxis de comando:
create-react-app nombre-del-proyecto
Por ejemplo, si quisiera crear un nuevo proyecto llamado Tienda_Online tendría que escribir el siguiente comando: create-react-app Tienda_Online. ¡Y listo! eso es todo.
Tener en cuenta que la creación de un nuevo proyecto usando este método puede demorar varios minutos, es normal y variará dependiendo el ancho de banda.
Una vez finalizada la creación del proyecto se puede ejecutar npm start que inicializará un servidor de desarrollo (por lo general en el puerto 3000)
Conclusiones
Para evitar configuraciones complejas al momento de iniciar con React.js es recomendable crear proyectos usando
react-create-app.create-react-appes extremadamente sencillo de instalar y de usar.
Top comments (5)
al ejecutar el comando npm start me sale el siguiente error
npm ERR! code ERR_OSSL_UNSUPPORTED
npm ERR! error:1E08010C:DECODER routines::unsupported
npm ERR! A complete log of this run can be found in:
npm ERR! C:\platzicourse_logs\2023-01-23T21_01_21_936Z-debug-0.log
si alguien ya lo ha solucionado por favor comparta el proceso de arreglo.
Hola Jesús! Este post en concreto es algo antiguo ya, te recomiendo leer un poco sobre Vite.js, es una nueva manera más moderna de crear proyectos en React hoy en día.
Gracias, he seguido los pasos pero al final cuando utilizó el comando npm start me da el siguiente error.
./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css)Error: Package exports for 'C:\Users\react\myself\node_modules\colorette' do not define a valid '.' targethe buscado en varios lugares pero no sé cómo solucionarlo ¿alguna idea?
Gracias
Ese error probablemete se de por que no estas importando de manera adecuada alguna clase o función de react, revisa que exista una linea mas o menos asi: export default App;
Hola, cómo hago para solucionar el error ENOENT después de que introduzco el comando npm start?