One place for hosting & domains

      proyecto

      Cómo agregar prueba de unidades a su proyecto de Django


      El autor seleccionó a Open Internet/Free Speech Fund para recibir una donación como parte del programa Write for DOnations.

      Introducción

      Es casi imposible crear sitios web que desde el principio funcionen a la perfección y no tengan errores. Por ese motivo, debe probar su aplicación web para encontrar esos errores y trabajar en ellos de forma proactiva. Para mejorar la eficiencia de las pruebas, es común desglosarlas en unidades que prueben funcionalidades específicas de la aplicación web. Esta práctica se denomina prueba de unidades. Hace que sea más fácil detectar errores, dado que las pruebas se centran en pequeñas partes (unidades) de su proyecto independientemente de otras.

      Probar un sitio web puede ser una tarea compleja, ya que consta de varias capas de lógica, como la gestión de solicitudes HTTP, la validación de formularios y la representación de plantillas. Sin embargo, Django ofrece un conjunto de herramientas que le permite probar su aplicación web sin problemas. Aunque es posible utilizar otros marcos de pruebas, la opción preferida para escribir pruebas en Django es usar el módulo unittest de Python.

      A través de este tutorial, configurará un conjunto de pruebas en su proyecto de Django y escribirá pruebas de unidades para los modelos y vistas de su aplicación. Ejecutará estas pruebas, analizará sus resultados y aprenderá a encontrar las causas de errores en las pruebas que fallan.

      Requisitos previos

      Antes de iniciar este tutorial, necesitará lo siguiente:

      Paso 1: Agregar un conjunto de pruebas a su aplicación en Django

      Un conjunto de pruebas en Django es una colección de todos los casos de prueba en todas las aplicaciones de su proyecto. Para lograr que la utilidad de prueba de Django descubra los casos de prueba que tiene, se escriben los casos de prueba en secuencias de comandos cuyos nombres comiencen con test. En este paso, creará la estructura del directorio y los archivos para su conjunto de pruebas, y creará un caso de prueba vacío dentro de él.

      Si siguió la serie de tutoriales Desarrollo en Django, tendrá una aplicación de Django denominada blogsite.

      Crearemos una carpeta para contener todos nuestros scripts de prueba. Primero, active el entorno virtual:

      • cd ~/my_blog_app
      • . env/bin/activate

      Luego, diríjase al directorio de la aplicación blogsite, la carpeta que contiene los archivos models.py y views.py, y luego cree una carpeta nueva llamada tests:

      • cd ~/my_blog_app/blog/blogsite
      • mkdir tests

      A continuación, convertirá esta carpeta en un paquete Python; agregue un archivo __init__.py:

      • cd ~/my_blog_app/blog/blogsite/tests
      • touch __init__.py

      Ahora, agregue un archivo para probar sus modelos y otro para probar sus vistas:

      • touch test_models.py
      • touch test_views.py

      Por último, creará un caso de prueba vacío en test_models.py. Deberá importar la clase TestCase de Django y hacer que sea una súper clase de su propia clase de caso de prueba. Más adelante, añadirá métodos a este caso de prueba para probar la lógica en sus modelos. Abra el archivo test_models.py​​​1​​​:

      Luego, añada el siguiente código al archivo:

      ~/my_blog_app/blog/blogsite/tests/test_models.py

      from django.test import TestCase
      
      class ModelsTestCase(TestCase):
          pass
      

      De esta manera, habrá añadido correctamente un conjunto de pruebas a la aplicación blogsite. Luego, completará los detalles del caso de prueba de modelo vacío que creó aquí.

      Paso 2: Probar su código Python

      En este paso, probará la lógica del código escrito en el archivo models.py. En particular, probará el método save del modelo Post para asegurarse de que cree el slug correcto del título de una entrada cuando se invoque.

      En este caso, comenzaremos observando el código que ya tiene en su archivo models.py para ver el método save del modelo Post:

      • cd ~/my_blog_app/blog/blogsite
      • nano models.py

      Observará lo siguiente:

      ~/my_blog_app/blog/blogsite/models.py

      class Post(models.Model):
          ...
          def save(self, *args, **kwargs):
              if not self.slug:
                  self.slug = slugify(self.title)
              super(Post, self).save(*args, **kwargs)
          ...
      

      Podemos ver que verifica si la entrada que está a punto de guardar tiene un valor slug, y, si no, invoca a slugify a fin de crear un valor slug para la misma. Este es el tipo de lógica que tal vez quiera probar para asegurarse de que los slugs se creen en realidad cuando se guarde una entrada.

      Cierre el archivo.

      Para probar esto, regrese a test_models.py:

      Luego, actualícelo para que se vea como a continuación y agregue las porciones resaltadas:

      ~/my_blog_app/blog/blogsite/tests/test_models.py

      from django.test import TestCase
      from django.template.defaultfilters import slugify
      from blogsite.models import Post
      
      
      class ModelsTestCase(TestCase):
          def test_post_has_slug(self):
              """Posts are given slugs correctly when saving"""
              post = Post.objects.create(title="My first post")
      
              post.author = "John Doe"
              post.save()
              self.assertEqual(post.slug, slugify(post.title))
      

      Este nuevo método test_post_has_slug crea una nueva entrada con el título "My first post" y, luego, atribuye a esta un autor y la guarda. Después de esto, usando el método assertEqual del módulo unittest de Python, se comprueba si el slug de la entrada es correcto. El método assertEqual verifica si los dos argumentos que se le pasan son iguales, como lo determina el operador "==", y genera un error si no lo son.

      Guarde y cierre test_models.py.

      Este es un ejemplo de lo que se puede probar. Cuanta más lógica añada a su proyecto, habrá más por probar. Si añade más lógica al método save o crea nuevos métodos para el modelo Post, querrá añadir más pruebas aquí. Usted puede añadirlas al método test_post_has_slug o crear nuevos métodos de prueba, pero sus nombres deben comenzar con test.

      Creó con éxito un caso de prueba para el modelo Post, en el que validó que los slugs se crean correctamente después del guardado. En el siguiente paso, escribirá un caso de prueba para probar las vistas.

      Paso 3: Usar el cliente de prueba de Django

      En este paso, escribirá un caso de prueba que probará una vista utilizando el cliente de prueba de Django. El cliente de prueba es una clase de Python que funciona como navegador web ficticio, le permite probar sus vistas e interactuar con su aplicación Django como un usuario lo haría. Puede acceder al cliente de prueba haciendo referencia a self.client en sus métodos de prueba. Por ejemplo, crearemos un caso de prueba en test_views.py. Primero, abra el archivo test_views.py:

      Luego, agregue lo siguiente:

      ~/my_blog_app/blog/blogsite/tests/test_views.py

      from django.test import TestCase
      
      
      class ViewsTestCase(TestCase):
          def test_index_loads_properly(self):
              """The index page loads properly"""
              response = self.client.get('your_server_ip:8000')
              self.assertEqual(response.status_code, 200)
      

      El ViewsTestCase contiene un método test_index_loads_properly que utiliza el cliente de prueba de Django para visitar la página principal del sitio web (http://your_server_ip:8000, donde your_server_ip es la dirección IP del servidor que utiliza). Luego, el método de prueba comprueba si la respuesta tiene un código de estado 200, lo cual significa que la página respondió sin errores. Como resultado, puede estar seguro de que cuando el usuario visite la página también responderá sin errores.

      Además del código de estado, puede leer sobre otras propiedades de la respuesta del cliente de prueba que puede probar en la página de documentación de respuestas de prueba de Django.

      En este paso, creó un caso de prueba para probar la vista que genera la página principal y verificar que funcione sin errores. Ahora, hay dos casos de prueba en su conjunto de pruebas. En el siguiente paso, los ejecutará para ver sus resultados.

      Paso 4: Ejecutar sus pruebas

      Ahora que terminó de crear un conjunto de pruebas para el proyecto, es el momento de ejecutar estas pruebas y ver sus resultados. Para ejecutar las pruebas, diríjase a la carpeta blog (que contiene el archivo manage.py de la aplicación):

      Luego, ejecútelas con lo siguiente:

      Verá un resultado similar al siguiente en su terminal:

      Output

      Creating test database for alias 'default'... System check identified no issues (0 silenced). .. ---------------------------------------------------------------------- Ran 2 tests in 0.007s OK Destroying test database for alias 'default'...

      En este resultado, hay dos puntos .., cada uno de los cuales representa un caso de prueba aprobado. Ahora, modificará test_views.py para activar una prueba que falle. Abra el archivo con lo siguiente:

      Luego, cambie el código resaltado para ver lo siguiente:

      ~/my_blog_app/blog/blogsite/tests/test_views.py

      from django.test import TestCase
      
      
      class ViewsTestCase(TestCase):
          def test_index_loads_properly(self):
              """The index page loads properly"""
              response = self.client.get('your_server_ip:8000')
              self.assertEqual(response.status_code, 404)
      

      Aquí, cambió el código de estado de 200 a 404. Ahora, ejecute la prueba de nuevo desde su directorio con manage.py:

      Verá el siguiente resultado:

      Output

      Creating test database for alias 'default'... System check identified no issues (0 silenced). .F ====================================================================== FAIL: test_index_loads_properly (blogsite.tests.test_views.ViewsTestCase) The index page loads properly ---------------------------------------------------------------------- Traceback (most recent call last): File "~/my_blog_app/blog/blogsite/tests/test_views.py", line 8, in test_index_loads_properly self.assertEqual(response.status_code, 404) AssertionError: 200 != 404 ---------------------------------------------------------------------- Ran 2 tests in 0.007s FAILED (failures=1) Destroying test database for alias 'default'...

      Verá aparecer un mensaje de error descriptivo en el que se indicará la secuencia de comandos, el caso de prueba y el método que falló. También se mostrará la causa de la falla, con un código de estado que no es igual al 404 en este caso, con el mensaje AssertionError: 200 ! = 404. El AssertionError aquí se genera en la línea de código resaltada en el archivo test_views.py:

      ~/my_blog_app/blog/blogsite/tests/test_views.py

      from django.test import TestCase
      
      
      class ViewsTestCase(TestCase):
          def test_index_loads_properly(self):
              """The index page loads properly"""
              response = self.client.get('your_server_ip:8000')
              self.assertEqual(response.status_code, 404)
      

      Le indica que la afirmación es falsa, es decir, el código de estado de respuesta (200) no es lo que se esperaba (404). Precediendo el mensaje de error, puede ver que los dos puntos .. pasaron a ser . F, lo cual indica que el primer caso de prueba se aprobó mientras que el segundo no.

      Conclusión

      A través de este tutorial, creó un conjunto de pruebas en su proyecto de Django, añadió casos de prueba para probar el modelo y la lógica de visualización, aprendió a ejecutar pruebas y analizó el resultado de una prueba. Como siguiente paso, puede crear nuevas secuencias de comandos para código Python que no estén en models.py y views.py.

      A continuación, consulte algunos artículos que pueden ser útiles al crear y probar sitios web con Django:

      También puede consultar nuestra página de temas de Django para ver tutoriales y proyectos adicionales.



      Source link

      Cómo configurar un proyecto de React con Create React App


      El autor seleccionó Creative Commons para recibir una donación como parte del programa Write for DOnations.

      Introducción

      React es un marco de trabajo de JavaScript popular para la creación de aplicaciones de front-end. Creado originalmente por Facebook, ganó popularidad al permitir que los desarrolladores creen aplicaciones rápidas usando un paradigma de programación intuitivo que vincula JavaScript con una sintaxis similar a HTML conocida como JSX.

      Iniciar un nuevo proyecto de React solía ser un proceso complicado de varios pasos que implicaba la configuración de un sistema de compilación, un transpilador de código para convertir la sintaxis moderna en código que todos los navegadores pudieran leer y una estructura de directorios básica.  Pero, ahora, Create React App incluye todos los paquetes de JavaScript que necesita para ejecutar un proyecto de React, como transpilación de código, linting básico, pruebas y sistemas de compilación. También incluye un servidor con recarga directa que actualiza su página a medida que realiza cambios de código. Por último, creará una estructura para sus directorios y componentes para poder comenzar a codificar en minutos.

      En otras palabras, no tiene que preocuparse por configurar un sistema de compilación como Webpack. No necesita configurar Babel para que convierta a otro lenguaje su código de modo que se pueda utilizar en todos los navegadores. No tiene que preocuparse por la mayoría de los sistemas complejos de desarrollo de front-end moderno. Puede comenzar a escribir código de React con una preparación mínima.

      Al final de este tutorial, tendrá una aplicación de React en ejecución que puede usar como base para cualquier aplicación futura. Hará los primeros cambios en el código de React, actualizará los estilos y ejecutará una compilación para crear una versión totalmente reducida de su aplicación. También usará un servidor con recarga directa para obtener comentarios al instante y analizará en profundidad las partes que componen un proyecto de React. Por último, comenzará a escribir componentes personalizados y a crear una estructura que pueda evolucionar y adaptarse a su proyecto.

      Requisitos previos

      Para seguir este tutorial, necesitará lo siguiente:

      Paso 1: Crear un nuevo proyecto con Create React App

      En este paso, creará una nueva aplicación usando el administrador de paquetes npm para ejecutar una secuencia de comandos remota. La secuencia de comandos copiará los archivos necesarios en un directorio nuevo e instalará todas las dependencias.

      Cuando instaló Node, también instaló una aplicación de administración de paquetes llamada npm. La aplicación npm instalará paquetes de JavaScript en su proyecto y también llevará un registro de los detalles de este.  Si desea obtener más información sobre npm, consulte nuestro tutorial Cómo usar módulos de Node.js con npm y package.json.

      La aplicación npm también incluye una herramienta denominada npx que ejecuta los paquetes ejecutables. Esto significa que ejecutará el código de Create React App sin descargar el proyecto primero.

      El paquete ejecutable ejecutará la instalación de create-react-app en el directorio que especifique. Comenzará por crear un nuevo proyecto en un directorio que, en este tutorial, recibirá el nombre digital-ocean-tutorial. Una vez más, no es necesario que este directorio exista de antemano; el paquete ejecutable lo creará. La secuencia de comandos también ejecutará npm install dentro del directorio del proyecto, que descargará cualquier dependencia adicional.

      Para instalar el proyecto de base, ejecute el siguiente comando:

      • npx create-react-app digital-ocean-tutorial

      Este comando iniciará un proceso de compilación que descargará el código básico junto con varias dependencias.

      Cuando la secuencia de comandos finalice, verá un mensaje de operación correcta que indica lo siguiente:

      Output

      ... Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd digital-ocean-tutorial npm start Happy hacking!

      your_file_path será su ruta actual. Si es usuario de macOS, será algo similar a /Users/your_username; si está usando Ubuntu, indicara algo como /home/your_username;

      También verá una lista de comandos npm que le permitirán ejecutar, compilar, iniciar y probar su aplicación. Los veremos en detalle en la siguiente sección.

      Nota: Hay otro administrador de paquetes para JavaScript llamado yarn. Facebook lo admite y hace muchas de las mismas cosas que npm. Originalmente, yarn proporcionó funcionalidades nuevas, como archivos de bloqueo, pero ahora estas también se implementan en npm. yarn también incluye algunas características adicionales, como el almacenamiento en caché sin conexión. Puede encontrar más información sobre las diferencias en la documentación de yarn.

      Si instaló yarn en su sistema anteriormente, verá una lista de comandos yarn, como yarn start, que tienen el mismo funcionamiento que los comandos npm. Puede ejecutar comandos npm incluso si tiene yarn instalado. Si prefiere yarn, simplemente reemplace npm por yarn en todos los comandos futuros. Los resultados serán los mismos.

      Ahora, su proyecto está configurado en un directorio nuevo. Pase al directorio nuevo:

      • cd digital-ocean-tutorial

      Ahora, se encuentra en el directorio root de su proyecto. En este punto, creó un proyecto nuevo y añadió todas las dependencias. Pero no hizo nada para ejecutarlo. En la siguiente sección, ejecutará secuencias de comandos personalizadas para compilar y probar el proyecto.

      Paso 2: Usar react-scripts

      En este paso, aprenderá los distintos react-scripts que se instalan con el repositorio. Primero, ejecutará la secuencia de comandos test para ejecutar el código de prueba. Luego, ejecutará la secuencia de comandos build para crear una versión reducida. Por último, analizará la forma en que la secuencia de comandos eject puede permitirle controlar la personalización por completo.

      Ahora que se encuentra en el directorio del proyecto, obsérvelo. Puede abrir todo el directorio en su editor de texto o, si está en la terminal, puede enumerar los archivos con el siguiente comando:

      El indicador -a garantiza que el resultado también incluya archivos ocultos.

      De cualquier manera, verá una estructura como la siguiente:

      Output

      node_modules/ public/ src/ .gitignore README.md package-lock.json package.json

      Veamos la explicación de cada uno de estos componentes:

      • node_modules/ contiene todas las bibliotecas de JavaScript externas que utiliza la aplicación. Rara vez necesitará abrirlo.

      • El directorio public/ contiene algunos archivos de imagen, HTML y JSON. Estos son los directorios root de su proyecto. Los analizaremos en más detalle en el paso 4.

      • El directorio src/ contiene el código JavaScript React de su proyecto. La mayor parte del trabajo que haga se encontrará en ese directorio. Veremos este directorio en detalle en el paso 5.

      • El archivo .gitignore contiene algunos directorios y archivos predeterminados que git, su control de código fuente, ignorará, como el directorio node_modules. Los elementos ignorados suelen ser directorios o archivos de registro de mayor tamaño que no necesitará en el control de código fuente. También incluirá algunos directorios que creará con ciertas secuencias de comandos de React.

      • README.md es un archivo markdown que contiene mucha información útil sobre Create React App, como, por ejemplo, un resumen de los comandos y enlaces a la configuración avanzada. Por ahora, es mejor dejar el archivo README.md como lo ve. A medida que vaya avanzando con su proyecto, sustituirá la información predeterminada por información más detallada sobre él.

      El administrador de paquetes usa los dos últimos archivos. Cuando ejecutó el comando inicial npx, no solo creó el proyecto de base, también instaló las dependencias adicionales. Al instalar las dependencias, creó un archivo package-lock.json. El administrador de paquetes npm usa este archivo para garantizar que los paquetes coincidan con versiones exactas. De esta manera, si otra persona instala su proyecto, puede asegurarse de que tendrá dependencias idénticas. Debido a que este archivo se crea de forma automática, rara vez editará este archivo directamente.

      El último archivo es package.json. Contiene metadatos sobre su proyecto, como el título, el número de versión y las dependencias. También contiene secuencias de comandos que puede usar para ejecutar su proyecto.

      Abra el archivo package.json en el editor de texto que prefiera:

      Al abrir el archivo, verá un objeto JSON que contiene todos los metadatos. Si observa el objeto scripts, notará que contiene cuatro secuencias de comandos diferentes: start, build, test y eject.

      Estas secuencias de comandos se enumeran en orden de importancia. La primera comienza el entorno de desarrollo local; la veremos en el siguiente paso. La segunda compilará su proyecto. Verá esto en detalle en el paso 4, pero es bueno ejecutarla ahora para ver qué sucede.

      La secuencia de comandos build

      Para ejecutar cualquier secuencia de comandos npm, simplemente debe escribir npm run script_name en su terminal. Hay algunas secuencias de comandos especiales en las que se puede omitir la parte de run, pero siempre se puede ejecutar todo el comando sin problemas. Para ejecutar la secuencia de comandos build, escriba lo siguiente en su terminal:

      Verá el siguiente mensaje de inmediato:

      Output

      > digital-ocean-tutorial@0.1.0 build your_file_path/digital-ocean-tutorial > react-scripts build Creating an optimized production build... ...

      Esto le indica que Create React App está compilando su código en un paquete que se puede utilizar.

      Una vez que haya terminado, verá el siguiente resultado:

      Output

      ... Compiled successfully. File sizes after gzip: 39.85 KB build/static/js/9999.chunk.js 780 B build/static/js/runtime-main.99999.js 616 B build/static/js/main.9999.chunk.js 556 B build/static/css/main.9999.chunk.css The project was built assuming it is hosted at the server root. You can control this with the homepage field in your package.json. For example, add this to build it for GitHub Pages: "homepage" : "http://myname.github.io/myapp", The build folder is ready to be deployed. You may serve it with a static server: serve -s build Find out more about deployment here: bit.ly/CRA-deploy

      Enumere el contenido del proyecto; verá algunos directorios nuevos:

      Output

      build/ node_modules/ public/ src/ .gitignore README.md package-lock.json package.json

      Ahora tiene un directorio build. Si abrió el archivo .gitignore, debe haber notado que git ignora el directorio build. Esto se debe a que el directorio build es solo una versión reducida y optimizada de los otros archivos. No es necesario usar el control de versiones, dado que siempre puede ejecutar el comando build. Analizaremos el resultado más adelante; ahora, es momento de pasar a la secuencia de comandos test.

      La secuencia de comandos test

      La secuencia de comandos test es una de esas secuencias especiales que no requieren la palabra clave run, pero funcionará aun cuando la incluya. Esta secuencia de comandos iniciará un ejecutor de pruebas llamado Jest. El ejecutor de pruebas busca archivos con extensión .spec.js o .test.js en su proyecto y luego los ejecuta.

      Para ejecutar la secuencia de comandos test, escriba el siguiente comando:

      Después de ejecutar esta secuencia de comandos, tendrá el resultado del conjunto de pruebas en su terminal y el símbolo del sistema de la terminal desaparecerá. Se parecerá a esto:

      Output

      PASS src/App.test.js ✓ renders learn react link (67ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 4.204s Ran all test suites. Watch Usage › Press f to run only failed tests. › Press o to only run tests related to changed files. › Press q to quit watch mode. › Press p to filter by a filename regex pattern. › Press t to filter by a test name regex pattern. › Press Enter to trigger a test run.

      Hay algunas cosas que es necesario observar aquí. En primer lugar, como se indicó anteriormente, detecta automáticamente cualquier archivo que tenga una extensión de prueba, como .test.js y .spec.js.  En este caso, hay un solo conjunto de pruebas, es decir, un solo archivo con extensión .test.js, y ese conjunto de pruebas contiene una sola prueba. Jest puede detectar pruebas en su jerarquía de código; por lo tanto, puede anidar pruebas en un directorio y Jest las encontrará.

      En segundo lugar, Jest no ejecuta el conjunto de pruebas y, luego, sale. En su lugar, continúa ejecutándose en la terminal. Si realiza algún cambio del código fuente, volverá a ejecutar las pruebas.

      También puede limitar las pruebas que ejecuta usando una de las opciones del teclado. Si escribe o, por ejemplo, solo ejecutará pruebas en los archivos que se hayan modificado. Esto puede ahorrarle mucho tiempo cuando sus conjuntos de pruebas sean de mayor tamaño.

      Por último, puede salir del ejecutor de pruebas escribiendo q. Hágalo ahora para regresar al símbolo del sistema.

      La secuencia de comandos eject

      La última secuencia de comandos es npm eject. Esta secuencia copia sus dependencias y archivos de configuración a su proyecto, lo que le proporciona pleno control sobre su código y retira el proyecto de la cadena de herramientas integradas de Create React App. No la ejecutará en este momento, ya que si lo hace no podrá deshacer la acción y perderá toda actualización futura de Create React App.

      La ventaja de Create React App es que no debe preocuparse por realizar un trabajo de configuración considerable. La compilación de aplicaciones de JavaScript modernas requiere muchas herramientas, desde sistemas de compilación, como Webpack, hasta herramientas de compilación, como Babel. Create React App gestiona toda la configuración, por lo tanto, si retira el proyecto, deberá lidiar con esta complejidad usted mismo.

      La desventaja de Create React App es que no podrá personalizar del todo el proyecto.  Para la mayoría de los proyectos, no es un problema. Sin embargo, si alguna vez quiere tener el control de todos los aspectos del proceso de compilación, deberá retirar el código. Sin embargo, como se mencionó anteriormente, una vez que lo retire, no podrá actualizar a nuevas versiones de Create React App y deberá agregar cualquier mejora usted mismo de forma manual.

      En este punto, ejecutó secuencias de comandos para compilar y probar su código. En el siguiente paso, iniciará el proyecto en un servidor activo.

      Paso 3: Iniciar el servidor

      En este paso, iniciará un servidor local y ejecutará el proyecto en su navegador.

      Iniciará su proyecto con otra secuencia de comandos npm. Al igual que npm test, esta secuencia de comandos no requiere el comando run. Al ejecutar la secuencia de comandos, iniciará un servidor local, ejecutará el código del proyecto, iniciará un observador que detectará los cambios en el código y abrirá el proyecto en un navegador web.

      Inicie el proyecto escribiendo el siguiente comando en el directorio root de su proyecto. En este tutorial, el directorio root de su proyecto es digital-ocean-tutorial. Asegúrese de abrirlo en una terminal o una pestaña independiente, dado que esta secuencia de comandos seguirá ejecutándose mientras lo permita:

      Verá un texto de marcador de posición por un breve momento antes de que el servidor se inicie, lo que generará este resultado:

      Output

      Compiled successfully! You can now view digital-ocean-tutorial in the browser. http://localhost:3000 Note that the development build is not optimized. To create a production build, use npm run build.

      Si ejecuta la secuencia de comandos de forma local, abrirá el proyecto en la ventana de su navegador y cambiará el enfoque de la terminal al navegador.

      Si eso no sucede, puede visitar http://localhost:3000/ para ver el sitio en acción. Si ya tiene otro servidor en ejecución en el puerto 3000, no hay problema. Create React App detectará el siguiente puerto disponible y ejecutará el servidor en él. En otras palabras, si ya tiene un proyecto en ejecución en el puerto 3000, este nuevo proyecto se iniciará en el puerto 3001.

      Si ejecuta la secuencia de comandos desde un servidor remoto, de todos modos, puede ver su sitio sin configuración adicional. La dirección será http://your_server_ip:3000. Si tiene un firewall configurado, deberá abrir el puerto en su servidor remoto.

      En el navegador, verá el siguiente proyecto de plantilla de React:

      Proyecto de plantilla de React

      Tendrá un servidor local activo siempre que la secuencia de comandos se esté ejecutando. Para detener la secuencia de comandos, cierre la pestaña o la ventana de la terminal o escriba CTRL+C o ⌘-+c en la pestaña o la ventana de la terminal en donde se esté ejecutando.

      En este punto, inició el servidor y está ejecutando su primer código de React. Pero, antes de realizar modificaciones en el código JavaScript React, veremos cómo muestra React la representación en la página.

      Paso 4: Modificar la página de inicio

      En este paso, modificará el código en el directorio public/. El directorio public contiene su página HTML de base. Esta es la página que funcionará como root en su proyecto. Rara vez editará este directorio en el futuro, pero es la base desde la que se inicia el proyecto y es un elemento esencial de los proyectos de React.

      Si canceló su servidor, reinícielo con npm start, y luego abra public/ en el editor de texto que prefiera, en una ventana de terminal nueva:

      Alternativamente, puede enumerar los archivos con el comando ls:

      Verá una lista de archivos como la siguiente:

      Output

      favicon.ico logo192.png manifest.json index.html logo512.png robots.txt

      favicon.ico, logo192.png y logo512.png son íconos que los usuarios verían, ya sea en pestañas de sus navegadores o en sus teléfonos. El navegador seleccionará íconos del tamaño adecuado. Eventualmente, querrá sustituirlos por iconos que sean más adecuados para su proyecto. Por ahora, puede dejarlos como están.

      El archivo manifest.json es un conjunto estructurado de metadatos que describe su proyecto. Entre otras cosas, indica el icono que se usará para las distintas opciones de tamaños.

      El archivo robots.txt contiene información para los rastreadores web. Indica a los rastreadores las páginas que tienen permitido o no indexar. No necesitará cambiar ninguno de estos archivos a menos que haya un motivo imperioso para hacerlo. Por ejemplo, si quisiera darles a algunos usuarios la URL de un contenido especial que no desea que sea de fácil acceso, podría añadirla a robots.txt y seguiría estando disponible públicamente, pero los motores de búsqueda no la indexarían.

      El archivo index.html es el root de su aplicación. Este es el archivo que lee el servidor y el que se visualizará en su navegador. Ábralo en su editor de texto y obsérvelo.

      Si está trabajando en la línea de comandos, puede abrirla con el siguiente comando:

      Esto es lo que verá:

      digital-ocean-tutorial/public/index.html

      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          <link rel="icon" href="https://www.digitalocean.com/%PUBLIC_URL%/favicon.ico" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <meta name="theme-color" content="#000000" />
          <meta
            name="description"
            content="Web site created using create-react-app"
          />
          <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
          <!--
            manifest.json provides metadata used when your web app is installed on a
            user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
          -->
          <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
          <!--
            Notice the use of %PUBLIC_URL% in the tags above.
            It will be replaced with the URL of the `public` folder during the build.
            Only files inside the `public` folder can be referenced from the HTML.
      
            Unlike "https://www.digitalocean.com/favicon.ico" or "favicon.ico", "https://www.digitalocean.com/%PUBLIC_URL%/favicon.ico" will
            work correctly both with client-side routing and a non-root public URL.
            Learn how to configure a non-root public URL by running `npm run build`.
          -->
          <title>React App</title>
        </head>
        <body>
          <noscript>You need to enable JavaScript to run this app.</noscript>
          <div id="root"></div>
          <!--
            This HTML file is a template.
            If you open it directly in the browser, you will see an empty page.
      
            You can add webfonts, meta tags, or analytics to this file.
            The build step will place the bundled scripts into the <body> tag.
      
            To begin the development, run `npm start` or `yarn start`.
            To create a production bundle, use `npm run build` or `yarn build`.
          -->
        </body>
      </html>
      

      El archivo es bastante pequeño. No hay imágenes ni palabras en <body>. Esto se debe a que React crea toda la estructura HTML y la inserta con JavaScript. Pero React necesita saber dónde insertar el código, y esa es la función que cumple index.html.

      En su editor de texto, cambie la etiqueta <title> de React App a Sandbox:

      digital-ocean-tutorial/public/index.html

      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          <link rel="icon" href="https://www.digitalocean.com/%PUBLIC_URL%/favicon.ico" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <meta name="theme-color" content="#000000" />
          ...
          <title>Sandbox</title>
        </head>
        <body>
          <noscript>You need to enable JavaScript to run this app.</noscript>
          <div id="root"></div>
          <!--
            This HTML file is a template.
            If you open it directly in the browser, you will see an empty page.
      
            You can add webfonts, meta tags, or analytics to this file.
            The build step will place the bundled scripts into the <body> tag.
      
            To begin the development, run `npm start` or `yarn start`.
            To create a production bundle, use `npm run build` or `yarn build`.
          -->
        </body>
      </html>
      
      

      Guarde y salga del editor de texto. Revise su navegador. El título es el nombre que se encuentra en la pestaña del navegador. Se actualizará automáticamente. Si no es así, actualice la página y observe el cambio.

      Ahora, regrese al editor de texto. Todos los proyectos de React se inician a partir de un elemento root. Puede haber varios elementos root en una página, pero siempre debe haber uno como mínimo. Así es cómo React puede saber dónde agregar el código HTML generado. Busque el elemento <div id="root">. Este es el div que React usará para todas las actualizaciones futuras. Cambie la id de root a base:

      digital-ocean-tutorial/public/index.html

      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          ...
        <body>
          <noscript>You need to enable JavaScript to run this app.</noscript>
          <div id="base"></div>
          <!--
            This HTML file is a template.
            If you open it directly in the browser, you will see an empty page.
      
            You can add webfonts, meta tags, or analytics to this file.
            The build step will place the bundled scripts into the <body> tag.
      
            To begin the development, run `npm start` or `yarn start`.
            To create a production bundle, use `npm run build` or `yarn build`.
          -->
        </body>
      </html>
      

      Guarde los cambios.

      Verá un error en su navegador:

      Mensaje de error con la leyenda "Target container is not a DOM element"

      React buscaba un elemento con id root. Ahora que no está, React no puede iniciar el proyecto.

      Vuelva a cambiar el nombre de base a root:

      digital-ocean-tutorial/public/index.html

      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          ...
        <body>
          <noscript>You need to enable JavaScript to run this app.</noscript>
          <div id="root"></div>
          <!--
            This HTML file is a template.
            If you open it directly in the browser, you will see an empty page.
      
            You can add webfonts, meta tags, or analytics to this file.
            The build step will place the bundled scripts into the <body> tag.
      
            To begin the development, run `npm start` or `yarn start`.
            To create a production bundle, use `npm run build` or `yarn build`.
          -->
        </body>
      </html>
      

      Guarde y cierre index.html.

      En este punto, inició el servidor y realizó un cambio menor en la página HTML root. Todavía no cambió nada de código JavaScript. En la siguiente sección, actualizará el código de JavaScript React.

      Paso 5: Modificar la etiqueta de encabezado y el estilo

      En este paso, realizará su primer cambio a un componente de React en el directorio src/. Realizará un cambio menor en el código CSS y JavaScript que se actualizará de forma automática en su navegador con la recarga directa incorporada.

      Si detuvo el servidor, asegúrese de reiniciarlo con npm start. Ahora, tómese un tiempo para observar los componentes del directorio src/. Puede abrir todo el directorio en el editor de texto que prefiera o enumerar el proyecto en una terminal con el siguiente comando:

      Verá los siguientes archivos en su terminal o editor de texto.

      Output

      App.css App.js App.test.js index.css index.js logo.svg serviceWorker.js setupTests.js

      Analicemos cada uno de estos archivos.

      Al principio, no invertirá mucho tiempo en el archivo serviceWorker.js, pero puede ser importante al comenzar a crear aplicaciones web progresivas. El trabajo de servicio puede hacer muchas cosas, entre ellas, insertar notificaciones y almacenar en caché sin conexión, pero, por el momento, es mejor no modificarlo.

      Los siguientes archivos que analizaremos son setupTests.js y App.test.js. Se utilizan para los archivos de prueba. De hecho, cuando ejecutó npm test en el paso 2, la secuencia de comandos ejecutó estos archivos. El archivo setupTests.js es pequeño; solo incluye algunos métodos expect personalizados. Obtendrá más información sobre estos archivos en tutoriales futuros de esta serie.

      Abra App.test.js:

      Al abrirlo, verá una prueba básica:

      digital-ocean-tutorial/src/App.test.js

      import React from 'react';
      import { render } from '@testing-library/react';
      import App from './App';
      
      test('renders learn react link', () => {
        const { getByText } = render(<App />);
        const linkElement = getByText(/learn react/i);
        expect(linkElement).toBeInTheDocument();
      });
      

      La prueba busca la frase learn react en el documento. Si regresa al navegador en el que se ejecuta su proyecto, verá la frase en la página. Las pruebas de React son diferentes de la mayoría de las pruebas de unidades. Dado que los componentes pueden incluir información visual, como marcado, además de la lógica para manipular datos, las pruebas unitarias tradicionales no funcionan tan fácilmente.  Las pruebas de React son más similares a una clase de pruebas funcionales o de integración.

      A continuación, veremos algunos archivos de estilo: App.css, index.css y logo.svg. Hay varias formas de trabajar con estilos en React, pero lo más sencillo es escribir en CSS simple, ya que no requiere configuración adicional.

      Hay varios archivos CSS porque puede importar los estilos en un componente como si fueran otro archivo de JavaScript.  Como puede importar CSS directamente a un componente, también podría dividirlo para que solo se aplique a un componente individual. Lo que hará es separar cuestiones.  No mantendrá todo el CSS separado del JavaScript. Lo que está haciendo es mantener todo el CSS, el JavaScript, el marcado y las imágenes relacionados agrupados.

      Abra App.css en su editor de texto. Si trabaja en la línea de comandos, puede abrirla con el siguiente comando:

      Este es el código que verá:

      digital-ocean-tutorial/src/App.css

      .App {
        text-align: center;
      }
      
      .App-logo {
        height: 40vmin;
        pointer-events: none;
      }
      
      @media (prefers-reduced-motion: no-preference) {
        .App-logo {
          animation: App-logo-spin infinite 20s linear;
        }
      }
      
      .App-header {
        background-color: #282c34;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: calc(10px + 2vmin);
        color: white;
      }
      
      .App-link {
        color: #61dafb;
      }
      
      @keyframes App-logo-spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      

      Este es un archivo CSS estándar sin preprocesadores especiales. Si lo desea, puede agregarlos más adelante, pero, al principio, solo tendrá CSS simple. Create React App trata de mantenerse flexible sin dejar de proporcionar un entorno listo para usar.

      Volviendo a App.css, uno de los beneficios de usar Create React App es que inspecciona todos los archivos; por lo tanto, si realiza un cambio lo verá en su navegador sin volver a cargarlo.

      Para ver cómo funciona, haga un cambio menor a background-color en App.css. Cambie el valor de #282c34 a blue y guarde el archivo. El estilo final tendrá el siguiente aspecto:

      digital-ocean-tutorial/src/App.css

      .App {
        text-align: center;
      }
      ...
      .App-header {
        background-color: blue
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: calc(10px + 2vmin);
        color: white;
      }
      ...
      
      @keyframes App-logo-spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      

      Revise su navegador. Así es como se veía anteriormente:

      React app con fondo oscuro

      Así es como se verá después del cambio:

      React app con fondo azul

      Vuelva a cambiar background-color a #282c34.

      digital-ocean-tutorial/src/App.css

      .App {
        text-align: center;
      
      ...
      
      .App-header {
        background-color: #282c34
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: calc(10px + 2vmin);
        color: white;
      }
      
      ...
      
      @keyframes App-logo-spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      

      Guarde el archivo y ciérrelo.

      Hizo un cambio menor en CSS. Ahora, es momento de realizar cambios en el código JavaScript React. Comience abriendo index.js.

      Esto es lo que verá:

      digital-ocean-tutorial/src/index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import './index.css';
      import App from './App';
      import * as serviceWorker from './serviceWorker';
      
      ReactDOM.render(<App />, document.getElementById('root'));
      
      // If you want your app to work offline and load faster, you can change
      // unregister() to register() below. Note this comes with some pitfalls.
      // Learn more about service workers: https://bit.ly/CRA-PWA
      serviceWorker.unregister();
      

      En la parte superior, importará React, ReactDOM, index.css, App y serviceWorker. Al importar React, en realidad, está extrayendo código para convertir JSX a JavaScript. JSX son elementos similares a HTML. Por ejemplo, observe cómo cuando usa App lo trata como un elemento HTML <App />. Verá esto en más detalle en tutoriales futuros de esta serie.

      ReactDOM es el código que conecta su código de React con los elementos básicos, como la página index.html que vio en public/. Observe la siguiente línea resaltada:

      digital-ocean-tutorial/src/index.js

      ...
      import * as serviceWorker from './serviceWorker';
      
      ReactDOM.render(<App />, document.getElementById('root'));
      ...
      serviceWorker.unregister();
      

      Este código indica a React que busque un elemento con id root e inserte su código allí. <App/> es su elemento root, y todo partirá de allí. Este es el punto de partida para todo el código de React futuro.

      En la parte superior del archivo, verá algunas importaciones. Importa index.css, pero en realidad no hace nada con él. Al importarlo, indica a Webpack, a través de las secuencias de comandos de React, que incluya el código CSS en el paquete compilado final. Si no lo importa, no aparecerá.

      Cierre src/index.js.

      En este punto, todavía no vio nada que de lo que está viendo en su navegador. Para verlo, abra App.js:

      El código de este archivo se verá como una serie de elementos HTML comunes. Esto es lo que verá:

      digital-ocean-tutorial/src/App.js

      import React from 'react';
      import logo from './logo.svg';
      import './App.css';
      
      function App() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                Edit <code>src/App.js</code> and save to reload.
              </p>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              </a>
            </header>
          </div>
        );
      }
      
      export default App;
      

      Cambie el contenido de la etiqueta <p> de Edit <code>src/App.js</code> and save to reload. a Hello world y guarde los cambios.

      digital-ocean-tutorial/src/App.js

      ...
      
      function App() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                  Hello, world
              </p>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              </a>
            </header>
          </div>
        );
      }
      ...
      

      Diríjase a su navegador para ver el cambio:

      React app con "Hello, world" en la etiqueta de párrafo

      Ahora, hizo su primera actualización de un componente de React.

      Antes de terminar, observe algunas cosas más. En este componente, importa el archivo logo.svg y lo asigna a una variable. Luego, en el elemento <img>, añade ese código como src.

      Aquí están ocurriendo algunas cosas. Observe el elemento img:

      digital-ocean-tutorial/src/App.js

      ...
      function App() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                  Hello, world
              </p>
      ...
      

      Observe que logo se pasa entre llaves. Para pasar atributos que no senn cadenas ni números, debe usar llaves. React los tratará como JavaScript en vez de cadenas. En este caso, en realidad, no importará la imagen: hará referencia a ella. Cuando Webpack crea el proyecto, maneja la imagen y establece la fuente en el lugar correspondiente.

      Cierre el editor de texto.

      Si observa los elementos DOM en su navegador, verá que añade una ruta. Si usa Chrome, puede inspeccionar el elemento haciendo clic en él y seleccionando Inspeccionar.

      Así es como se verá en el navegador:

      Inspeccionar elementos con herramientas de desarrollo de Chrome

      El DOM tiene esta línea:

      <img src="https://www.digitalocean.com/static/media/logo.5d5d9eef.svg" class="App-logo" alt="logo">
      

      Su código será ligeramente distinto, ya que el logo tendrá un nombre diferente. Webpack quiere asegurarse de que la ruta a la imagen sea única. Por lo tanto, incluso si importa imágenes con el mismo nombre, se guardarán en diferentes rutas.

      En este punto, realizó un cambio menor en el código Javascript React. En el siguiente paso, usará el comando build para reducir el código a un archivo pequeño que se puede implementar en un servidor.

      Paso 6: Compilar el proyecto

      En este paso, compilará el código en un paquete que se puede implementar en servidores externos.

      Regrese a su terminal y compile el proyecto. Ejecutó este comando antes, pero recuerde que este comando ejecutará la secuencia de comandos build. Creará un directorio nuevo con los archivos combinados y reducidos. Para ejecutar la compilación, ejecute el siguiente comando desde el root de su proyecto:

      La compilación del código tomará un tiempo y, cuando se complete, tendrá un directorio nuevo denominado build/.

      Abra build/index.html en un editor de texto.

      Verá algo similar a esto:

      digital-ocean-tutorial/build/index.html

      <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="https://www.digitalocean.com/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="http://www.digitalocean.com/logo192.png"/><link rel="manifest" href="http://www.digitalocean.com/manifest.json"/><title>React App</title><link href="http://www.digitalocean.com/static/css/main.d1b05096.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,p=r[0],l=r[1],c=r[2],i=0,s=[];i<p.length;i++)a=p[i],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,p=1;p<t.length;p++){var l=t[p];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/";var p=this["webpackJsonpdo-create-react-app"]=this["webpackJsonpdo-create-react-app"]||[],l=p.push.bind(p);p.push=r,p=p.slice();for(var c=0;c<p.length;c++)r(p[c]);var f=l;t()}([])</script><script src="/static/js/2.c0be6967.chunk.js"></script><script src="/static/js/main.bac2dbd2.chunk.js"></script></body></html>
      

      El directorio build toma todo el código y lo compila y reduce al menor estado utilizable. No importa si un humano puede leerlo o no, dado que no es una porción de código que estará disponible al público. Esta reducción hará que el código ocupe menos espacio, pero siga funcionando.  A diferencia de algunos lenguajes como Python, el espacio en blanco no modifica la forma en que la computadora interpreta el código.

      Conclusión

      En este tutorial, creó su primera aplicación de React y configuró su proyecto con herramientas de compilación de JavaScript sin necesidad de entrar en detalles técnicos. Ese es el beneficio de Create React App: no es necesario conocerla a fondo para comenzar a usarla. Le permite ignorar los pasos complicados de la compilación para que se pueda centrar exclusivamente en el código de React.

      Aprendió los comandos para iniciar, probar y compilar un proyecto. Usará estos comandos de forma regular; por lo tanto, tome nota de ellos para tutoriales futuros. Lo más importante es que actualizó su primer componente de React.

      Si desea ver React en acción, consulte nuestro tutorial Cómo visualizar datos de la API de DigitalOcean con React.



      Source link