Con esta entrada, damos comienzo a una nueva serie de artículos en el blog, en la que trataremos React.js desde 0. React.js es una librería que nos permite crear interfaces de usuario para desarrollar SPA (aplicaciones de una sola página). Por tanto, podemos decir que una de las competencias de React.js es Vue.js que ya se ha tratado en una serie y varios tutoriales en el blog, puedes echarle un vistazo. Por si no lo sabías, React.js fue creada por Facebook.
En esta serie, veremos desde el principio como por ejemplo, cómo crear un componente y qué son, cómo funciona el estado en los componentes, las propiedades, etc. También, veremos cosas un poco más avanzadas como, por ejemplo, la gestión del estado de una aplicación con Redux o cómo crear una aplicación con rutas con React Router, entre otras muchas cosas.
En esta primera entrada, vamos a ver como instalarlo. Vamos a ello!
Hay que decir que tenemos varias maneras de instalar React.js para poder emepezar a utilizarlo.
La primera podríamos utilizar el CDN añadiendo las siguientes líneas de código al <head> de nuestro HTML:
|
1 2 |
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> |
Como puedes ver, estamos añadiendo dos librerías:
- La primera es React.js.
- La segunda es React DOM, que contiene los métodos para que React.js pueda acceder y modificar el DOM.
Pero yo no voy a utilizar ésta manera, si no que en esta serie voy a utilizar un paquete llamado Create React App. Gracias a este paquete, ejecutaremos un simple comando y nos creará una estructura básica con las librerías necesarias y los archivos básicos para poder empezar a desarrollar nuestras aplicaciones con React.js.
Para instalar este paquete, debemos tener instalado tanto Node.js como NPM. Si estas en Ubuntu como yo, deberás ejecutar el siguiente comando:
|
1 |
sudo apt-get install nodejs npm |
Si estas en Windows o Mac, echa un vistazo en la página de descargas de la web de Node.js.
Una vez tengas instalado Node.js y NPM, vamos al directorio donde queramos crear el proyecto y ejecutamos el siguiente comando:
|
1 |
npx create-react-app <nombre> |
Donde pone <nombre>, deberás poner el nombre que quieras darle a la app. Yo, por ejemplo, he puesto “react-test”.
Cuando finalice, nos habrá creado un directorio con el nombre que hayamos puesto, entramos al directorio y tendremos que ejecutar el siguiente comando para ejecutar un servidor de desarrollo:
|
1 2 3 |
cd <nombre> npm start |
Directamente, se nos abrirá una pestaña en nuestro navegador por defecto en http://localhost:3000/ y veremos lo siguiente:
Con esto, ya tendremos lo básico para empezar a desarrollar con React.js.
En la siguiente entrada, veremos cómo crear y cómo funcionan los componentes en React.js.
-
- https://reactjs.org/docs/getting-started.html
- https://reactjs.org/docs/create-a-new-react-app.html
- https://reactjs.org/docs/cdn-links.html
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR