One place for hosting & domains

      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

      Comment configurer un projet React avec Create React App


      L’auteur a choisi Creative Commons​​​ pour recevoir un don dans le cadre du programme Write for DOnations.

      Introduction

      React est un framework JavaScript populaire pour créer des applications front-end. Créé à l’origine par Facebook, il a gagné en popularité en permettant aux développeurs de créer des applications rapides en utilisant un paradigme de programmation intuitive qui lie JavaScript à une syntaxe de type HTML connue sous le nom de JSX.

      Le lancement d’un nouveau projet React était auparavant un processus complexe en plusieurs étapes qui impliquait la mise en place d’un système de construction, d’un transpileur de code pour convertir la syntaxe moderne en un code lisible par tous les navigateurs, et d’une structure de répertoire de base. Mais maintenant, Create React App comprend tous les paquets JavaScript dont vous avez besoin pour exécuter un projet React, y compris le transpiling de code, le linting de base, les tests et les systèmes de construction. Il comprend également un serveur avec hot reloading qui rafraîchira votre page au fur et à mesure que vous effectuerez des changements de code.  Enfin, il créera une structure pour vos répertoires et vos composants afin que vous puissiez vous lancer dans le codage en quelques minutes seulement.

      En d’autres termes, vous n’avez pas à vous soucier de configurer un système de construction comme Webpack. Vous n’avez pas besoin de configurer Babel pour transpiler votre code afin qu’il soit utilisable par tous les navigateurs. Vous n’avez pas à vous soucier de la plupart des systèmes compliqués du développement front-end moderne. Vous pouvez commencer à écrire React code avec une préparation minimale.

      À la fin de ce tutoriel, vous aurez une application React en cours d’exécution que vous pourrez utiliser comme base pour toute application future. Vous allez apporter vos premiers changements au code de React, mettre à jour les styles et lancer un build pour créer une version entièrement réduite de votre application. Vous utiliserez également un serveur avec hot reloading pour vous donner un feed-back instantané et vous explorerez en profondeur les composantes d’un projet React. Enfin, vous commencerez à écrire des composants personnalisés et à créer une structure qui pourra se développer et s’adapter à votre projet.

      Conditions préalables

      Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

      Étape 1 — Création d’un nouveau projet avec Create React App

      Au cours de cette étape, vous allez créer une nouvelle application en utilisant le manager de packages npm pour exécuter un script distant. Le script copiera les fichiers nécessaires dans un nouveau répertoire et installera toutes les dépendances.

      Lorsque vous avez installé Node, vous avez également installé une application de gestion de paquets appelée npm. npm installera les paquets JavaScript dans votre projet et gardera également une trace des détails du projet. Si vous souhaitez en savoir plus sur npm, consultez notre tutoriel Comment utiliser les modules Node.js avec npm et package.json.

      npm comprend également un outil appelé npx, qui exécutera des paquets exécutables. Cela signifie que vous allez exécuter le code Create React App sans télécharger le projet au préalable.

      Le package exécutable exécutera l’installation de create-react-app dans le répertoire que vous spécifiez. Il commencera par réaliser un nouveau projet dans un répertoire, qui dans ce tutoriel sera appelé digital-ocean-tutorial. Là encore, ce répertoire n’a pas besoin d’exister au préalable ; le package exécutable le créera pour vous. Le script va également exécuter npm install dans le répertoire du projet, qui téléchargea toute dépendances supplémentaires.

      Pour installer le projet de base, exécutez la commande suivante :

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

      Cette commande lancera un processus de construction qui téléchargera le code de base ainsi qu’un certain nombre de dépendances.

      Lorsque le script se terminera, vous verrez un message de réussite qui indiquera :

      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 sera votre chemin actuel. Si vous êtes un utilisateur macOS, ce sera quelque chose comme /Users/your_username; ; si vous êtes sur un serveur Ubuntu, il dira quelque chose comme /home/your_username.

      Vous verrez également une liste de commandes npm qui vous permettra d’exécuter, de construire, de démarrer et de tester votre application. Vous en apprendrez davantage dans la section suivante.

      Remarque : il existe un autre gestionnaire de paquets pour JavaScript appelé yarn. Il est soutenu par Facebook et fait beaucoup de choses identiques à npm. À l’origine, yarn fournissait de nouvelles fonctionnalités telles que les fichiers de verrouillage, mais celles-ci sont maintenant également implémentées dans npm. yarn comprend également quelques autres fonctionnalités telles que la mise en cache hors ligne. D’autres différences peuvent être trouvées dans la documentation de yarn.

      Si vous avez déjà installé yarn sur votre système, vous verrez une liste de commandes yarn telles que yarn start qui fonctionnent de la même manière que les commandes npm. Vous pouvez exécuter des commandes npm même si yarn est installé. Si vous préférez yarn, remplacez simplement npm par yarn dans toutes commandes futures. Les résultats seront les mêmes.

      Votre projet est maintenant configuré dans un nouveau répertoire. Entrez dans le nouveau répertoire :

      • cd digital-ocean-tutorial

      Vous êtes maintenant à l’intérieur de la racine de votre projet. À ce stade, vous avez créé un nouveau projet et ajouté toutes les dépendances. Mais vous n’avez pas pris de mesures pour exécuter le projet. Dans la section suivante, vous allez exécuter des scripts personnalisés pour construire et tester le projet.

      Étape 2 — Utilisation de react-scripts

      Au cours de cette étape, vous découvrirez les différents react-scripts qui sont installés avec le référentiel. Vous allez d’abord exécuter le script test pour exécuter le code test. Ensuite, vous lancerez le script build pour créer une version miniaturisée. Enfin, vous verrez comment le script eject peut vous donner un contrôle complet sur la personnalisation.

      Maintenant que vous êtes dans le répertoire du projet, jetez y un coup d’œil. Vous pouvez soit ouvrir le répertoire entier dans votre éditeur de texte, soit, si vous êtes sur le terminal, vous pouvez lister les fichiers avec la commande suivante :

      Le drapeau -a garantit que la sortie comprend également des fichiers cachés.

      Quoi qu’il en soit, vous verrez une structure comme celle-ci :

      Output

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

      Expliquons-les un par un :

      • node_modules/ contient toutes les bibliothèques JavaScript externes utilisées par l’application. Vous aurez rarement besoin de l’ouvrir.

      • Le répertoire public/ contient quelques fichiers HTML, JSON et images de base.  Ce sont les racines de votre projet. Vous aurez la possibilité de les explorer davantage à l’étape 4.

      • Le répertoire src/ contient le code JavaScript React pour votre projet. La plupart de vos travaux figureront dans ce répertoire. Vous allez explorer ce répertoire en détail à l’étape 5.

      • Le fichier .gitignore contient quelques répertoires par défaut et des fichiers que git—votre contrôle de source— ignorera, comme le répertoire node_modules. Les éléments ignorés ont tendance à être des répertoires ou des fichiers journaux plus importants dont vous n’auriez pas besoin dans le contrôle des sources. Il comprendra également quelques répertoires que vous allez créer avec certains des scripts React.

      • README.md est un fichier markdown qui contient beaucoup d’informations utiles sur Create React App, telles qu’un résumé des commandes et liens vers une configuration avancée. Pour l’instant, il est préférable de laisser le fichier README.md tel quel. Au fur et à mesure de l’avancement de votre projet, vous remplacerez les informations par défaut par des informations plus détaillées sur votre projet.

      Les deux derniers fichiers sont utilisés par votre gestionnaire de paquets. Lorsque vous avez lancé la commande npx initiale, vous avez créé le projet de base, mais vous avez également installé les dépendances supplémentaires. Lorsque vous avez installé les dépendances, vous avez créé un fichier package-lock.json. Ce fichier est utilisé par npm pour s’assurer que les paquets correspondent aux versions exactes. De cette façon, si quelqu’un d’autre installe votre projet, vous pouvez vous assurer qu’ils ont des dépendances identiques. Comme ce fichier est créé automatiquement, vous allez rarement modifier ce fichier directement.

      Le dernier fichier est un package.json. Il contient des métadonnées sur votre projet, telles que le titre, le numéro de version et les dépendances. Il contient également des scripts que vous pouvez utiliser pour exécuter votre projet.

      Ouvrez le fichier package.json dans votre éditeur de texte préféré :

      Lorsque vous ouvrez le fichier, vous verrez un objet JSON contenant toutes les métadonnées. Si vous regardez l’objet scripts, vous trouverez quatre scripts différents : start, build, test et eject.

      Ces scripts sont listés par ordre d’importance. Le premier script démarre l’environnement de développement local ; vous verrez cela à l’étape suivante. Le deuxième script va construire votre projet. Vous allez en explorer cela en détail à l’étape 4, mais cela vaut la peine de l’exécuter maintenant pour voir ce qui se passe.

      Le script build

      Pour exécuter n’importe quel script npm, vous devez simplement taper npm run script_name dans votre terminal. Il existe quelques scripts spéciaux où vous pouvez omettre la partie run de la commande, mais il est toujours bon d’exécuter la commande complète. Pour exécuter le script build, tapez ce qui suit dans votre terminal :

      Vous verrez immédiatement le message suivant :

      Output

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

      Cela vous indique que Create React App compile votre code en un bundle utilisable.

      Lorsque cela sera terminé, vous verrez la sortie suivante  :

      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

      Dressez la liste du contenu du projet et vous verrez quelques nouveaux répertoires :

      Output

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

      Vous disposez maintenant d’un répertoire build. Si vous avez ouvert le fichier .gitignore, vous avez pu constater que le répertoire build est ignoré par git. C’est parce que le répertoire build n’est qu’une version minifiée et optimisée des autres fichiers. Il n’est pas nécessaire d’utiliser le contrôle des versions puisque vous pouvez toujours exécuter la commande build. Vous allez regrader la sortie plus tard ; pour l’instant, il est temps de passer au test script.

      Le script test

      Le script test est l’un de ces scripts spéciaux qui ne nécessite pas le mot-clé run, mais fonctionne même si vous l’incluez. Ce script lancera un exécuteur de test appelé Jest. L’exécuteur de test recherche dans votre projet tous les fichiers portant une extension .spec.js ou .test.js, puis exécute ces fichiers.

      Pour exécuter le script test, tapez la commande suivante :

      Après l’exécution de ce script, votre terminal aura la sortie de la suite de tests et l’invite du terminal disparaîtra. Ils ressembleront à cela :

      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.

      Il y a quelques éléments à noter ici. Tout d’abord, comme indiqué précédemment, il détecte automatiquement tous les fichiers avec des extensions de test telles que .test.js et .spec.js. Dans ce cas, il n’y a qu’une seule suite de tests – c’est-à-dire un seul fichier avec une extension .test.js – et cette suite de tests ne contient qu’un seul test. Jest peut détecter des tests dans votre hiérarchie de code, de sorte que vous pouvez nicher des tests dans un répertoire et Jest les trouvera.

      Deuxièmement, Jest n’exécute pas votre suite de tests une seule fois pour ensuite quitter. Au contraire, il continue à fonctionner dans le terminal. Si vous apportez des changements dans le code source, il exécutera à nouveau les tests.

      Vous pouvez également limiter les tests que vous effectuez en utilisant l’une des options clavier. Si vous tapez o, par exemple, vous n’exécuterez les tests que sur des fichiers qui ont changé. Cela peut vous sauver beaucoup de temps à mesure que vos suites de tests grandissent.

      Enfin, vous pouvez quitter l’exécuteur de test en tapant q. Faites cela maintenant pour récupérer votre invite de commande.

      Le script eject

      Le script final est npm eject. Ce script copie vos dépendances et vos fichiers de configuration dans votre projet, vous donnant un contrôle total sur votre code mais éjectant le projet de la chaîne d’outils intégrée de Create React App. Vous n’allez pas l’exécuter maintenant car, une fois que vous aurez exécuté ce script, vous ne pourrez pas annuler cette action et vous perdrez toutes les futures mises à jour de Create React App.

      L’intérêt de Create React App est que vous n’avez pas à vous soucier d’une quantité importante de configurations. La création d’applications JavaScript modernes nécessite beaucoup d’outils, depuis les systèmes de construction, tels que Webpack, jusqu’aux outils de compilation, tels que Babel.  Create React App s’occupe de toute la configuration pour vous, donc s’éjecter signifie affronter cette complexité vous-même.

      L’inconvénient de Create React App est que vous ne pourrez pas personnaliser entièrement le projet. Pour la plupart des projets, ce n’est pas un problème, mais si vous voulez un jour prendre le contrôle de tous les aspects du processus de construction, vous devrez éjecter le code. Cependant, comme mentionné précédemment, une fois que vous aurez éjecté le code, vous ne pourrez plus mettre à jour les nouvelles versions de Create React App, et vous devrez ajouter manuellement toute amélioration par vous-même.

      À ce stade, vous avez exécuté des scripts pour construire et tester votre code. Au cours de l’étape suivante, vous allez démarrer le projet sur un serveur en direct.

      Étape 3 — Démarrage du serveur

      Au cours de cette étape, vous allez initialiser un serveur local et exécuter le projet dans votre navigateur.

      Vous démarrez votre projet avec un autre script npm. Comme npm test, ce script n’a pas besoin de la commande run. Lorsque vous exécutez le script, vous démarrez un serveur local, vous exécutez le code du projet, vous lancez un watcher qui écoute les changements de code et vous ouvrez le projet dans un navigateur web.

      Lancez le projet en tapant la commande suivante dans la racine de votre projet. Pour ce tutoriel, la racine de votre projet est le répertoire digital-ocean-tutorial Veillez à l’ouvrir dans un terminal ou un onglet séparé, car ce script continuera à fonctionner autant que vous l’autorisez :

      Vous verrez un espace texte réservé pendant un bref instant avant le démarrage du serveur, ce qui donnera cette sortie :

      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 vous exécutez le script localement, il ouvrira le projet dans la fenêtre de votre navigateur et déplacera le focus du terminal vers le navigateur.

      Si cela n’est pas le cas, vous pouvez visiter http://localhost:3000/ pour voir le site en action. Si vous avez déjà eu un autre serveur fonctionnant sur le port 3000, ce n’est pas grave. Create React App détectera le port disponible suivant et exécutera le serveur avec cela. En d’autres termes, si vous avez déjà un projet qui s’exécute sur le port 3000, ce nouveau projet démarrera sur le port 3001.

      Si vous l’exécutez depuis un serveur distant, vous pouvez toujours voir votre site sans aucune configuration supplémentaire. L’adresse sera http://your_server_ip:3000. Si vous avez configuré un pare-feu, vous devrez ouvrir le port sur votre serveur distant.

      Dans le navigateur, vous verrez le modèle de projet React suivant :

      Modèle de projet React

      Tant que le script est en cours d’exécution, vous aurez un serveur local actif. Pour arrêter le script, fermez la fenêtre du terminal ou de l’onglet ou tapez CTRL+C or ⌘-+c dans la fenêtre ou l’onglet du terminal qui exécute votre script.

      À ce stade, vous avez lancé le serveur et vous exécutez votre premier code React. Mais avant d’apporter des modifications au code JavaScript de React, vous allez voir comment React montre la page au départ.

      Étape 4 — Modification de la page d’accueil

      Au cours de cette étape, vous allez modifier le code dans le répertoire public/. Le répertoire public contient votre page HTML de base. C’est la page qui servira de racine pour votre projet. Vous allez rarement modifier ce répertoire à l’avenir, mais c’est la base pour laquelle le projet démarre et une partie cruciale d’un projet React.

      Si vous avez annulé votre serveur, continuez et redémarrez-le avec npm start, puis ouvrez public/ dans votre éditeur de texte préféré dans une nouvelle fenêtre de terminal :

      Vous pouvez également liste les fichiers avec la commande ls :

      Vous verrez une liste de fichiers tels que ceci :

      Output

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

      favicon.ico, logo192.png, et logo512.png sont des icônes qu’un utilisateur verrait soit dans l’onglet de son navigateur, soit sur son téléphone. Le navigateur sélectionnera les icônes de taille appropriée. Finalement, vous allez vouloir les remplacer par des icônes qui conviennent mieux à votre projet. Pour l’instant, vous pouvez les laisser telles qu’elles.

      Le manifest.json est un ensemble structuré de métadonnées qui décrivent votre projet. Il liste entre autres l’icône qui sera utilisée pour les différentes options de taille.

      Le fichier robots.txt est une informations pour les crawlers web. Il indique aux crawlers les pages qu’ils sont ou ne sont pas autorisés à indexer. Vous n’aurez pas besoin de modifier l’un des deux fichiers, sauf s’il y a une bonne raison de le faire. Par exemple, si vous souhaitez donner à certains utilisateurs une URL vers un contenu spécial que vous ne souhaitez pas facilement accessible, vous pouvez l’ajouter à robots.txt et il sera toujours accessible au public, mais non indexé par les moteurs de recherche.

      Le fichier index.html est la racine de votre application. C’est le fichier que le serveur lit, et c’est le fichier que votre navigateur affichera. Ouvrez-le dans votre éditeur de texte et regardez.

      Si vous travaillez depuis la ligne de commande, vous pouvez l’ouvrir avec la commande suivante :

      Voici ce que vous verrez :

      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>
      

      Le fichier est assez court. Il n’y a pas d’images ou de mots dans le <body>. C’est parce que React construit lui-même toute la structure HTML et l’injecte avec du JavaScript. Mais React doit savoir où injecter le code, et c’est le rôle d’index.html.

      Dans votre éditeur de texte, modifiez l’étiquette <title> de React App à 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>
      
      

      Enregistrez et quittez votre éditeur de texte. Vérifiez votre navigateur. Le titre est le nom situé dans l’onglet du navigateur. Il se mettra à jour automatiquement. Sinon, rafraîchissez la page et observez le changement.

      Revenez maintenant à votre éditeur de texte. Tout projet React démarre à partir d’un élément racine. Il peut y avoir plusieurs éléments racine sur une page, mais il doit y en avoir au moins un. C’est ainsi que React sait où placer le code HTML généré. Trouvez l’élément <div id="root">. Il s’agit du div que React va utiliser pour toutes les futures mises à jour. Changez l’id de root à 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>
      

      Enregistrez les changements.

      Vous allez voir une erreur dans votre navigateur :

      Message d'erreur indiquant "Le conteneur cible n'est pas un élément DOM"

      React cherchait un élément avec une id de root. Maintenant qu’il est parti, React ne peut pas démarrer le projet.

      Changez le nom de base à 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>
      

      Enregistrez et quittez index.html.

      À ce stade, vous avez lancé le serveur et apporté un petit changement à la page HTML racine. Vous n’avez pas encore changé de code JavaScript. Dans la section suivante, vous allez mettre à jour le code JavaScript React.

      Étape 5 — Modification de la balise de titre et du style

      Au cours de cette étape, vous allez apporter votre premier changement à un composant React dans le répertoire src/. Vous allez apporter une petite modification au CSS et au code JavaScript qui se mettront automatiquement à jour dans votre navigateur grâce hot reloading intégré.

      Si vous avez arrêté le serveur, assurez-vous de le redémarrer avec npm start. Maintenant, prenez le temps pour voir les parties du répertoire src/. Vous pouvez soit ouvrir le répertoire complet dans votre éditeur de texte préféré, soit vous pouvez lister le projet dans un terminal avec la commande suivante :

      Vous allez voir les fichiers suivants dans votre terminal ou éditeur de texte.

      Output

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

      Examinons ces fichiers un par un.

      Vous ne consacrerez pas beaucoup de temps au fichier serviceWorker.js au début, mais cela peut être important lorsque vous commencez à faire des applications web progressives.  Le service worker peut faire beaucoup de choses, y compris les notifications push et la mise en cache hors ligne, mais pour l’instant, il vaut mieux ne pas s’en occuper.

      Les prochains fichiers à examiner sont setupTests.js et App.test.js. Elles sont utilisées pour des fichiers de test. En fait, lorsque vous avez exécuté npm test à l’étape 2, le script a exécuté ces fichiers. Le fichier setupTests.js est court ; il ne contient que quelques méthodes d'attente personnalisées.  Vous allez en apprendre davantage à ce sujet dans les futurs tutoriels de cette série.

      Ouvrez App.test.js :

      Lorsque vous l’avez ouvert, vous allez voir un test de base :

      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();
      });
      

      Le test recherche la phrase learn react figurant dans le document. Si vous retournez au navigateur qui exécute votre projet, vous verrez la phrase sur la page. Le test de React est différent de la plupart des tests unitaires. Comme les composants peuvent inclure des informations visuelles (telles que le balisage) ainsi qu’une logique de manipulation des données, les tests unitaires traditionnels ne fonctionnent pas aussi facilement. Le test de React est plus proche d’une forme de tests fonctionnels ou d’intégration.

      Ensuite, vous allez voir quelques fichiers styling : App.css, index.css, et logo.svg. Il y a plusieurs façons de travailler avec le style dans React, mais la plus simple est d’écrire du CSS simple puisque cela ne nécessite aucune configuration supplémentaire.

      Il y a plusieurs fichiers CSS, car vous pouvez importer les styles dans un composant, comme il s’agissait d’un autre fichier JavaScript. Comme vous avez le pouvoir d’importer du CSS directement dans un composant, vous pouvez tout aussi bien diviser le CSS pour ne l’appliquer qu’à un composant individuel. Ce que vous faites, c’est séparer les problèmes. Vous ne gardez pas tout le CSS séparé du JavaScript. Au lieu de cela, vous gardez tous les CSS, JavaScript, balisage et images associés regroupés.

      Ouvrez App.css dans votre éditeur de texte. Si vous travaillez depuis la ligne de commande, vous pouvez l’ouvrir avec la commande suivante :

      Voici le code que vous allez voir :

      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);
        }
      }
      

      Il s’agit d’un fichier CSS standard sans préprocesseurs CSS spéciaux. Vous pouvez les ajouter plus tard si vous le souhaitez, mais au début, vous n’avez que du CSS simple. Create React App tente de rester neutre tout en offrant un environnement original.

      Pour en revenir à App.css, un des avantages de l’utilisation de Create React App est qu’il surveille tous les fichiers, donc si vous faites une modification, vous la verrez dans votre navigateur sans avoir à recharger.

      Pour voir cela en action, modifiez légèrement la couleur de fond dans App.css. Changez-le de #282c34 à bleu, puis enregistrez le fichier. Le style final du Dockerfile ressemblera à ceci :

      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);
        }
      }
      

      Regardez votre navigateur. Voici à quoi cela ressemblait avant :

      React app avec un arrière-plan sombre

      Voici à quoi cela ressemblera après la modification :

      React app avec un arrière-plan bleu

      Continuez et changez la couleur de fond pour revenir à 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);
        }
      }
      

      Enregistrez et quittez le fichier.

      Vous avez fait une petite modification CSS. Maintenant, il est temps d’apporter des changements au code JavaScript de React. Commencez par ouvrir index.js.

      Voici ce que vous allez voir :

      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 haut, vous allez importer React, ReactDOM, index.css, App et serviceWorker. En important React, vous introduisez en fait du code pour convertir JSX en JavaScript. JSX sont les éléments de type HTML. Par exemple, remarquez à quoi lorsque vous utilisez App, vous le traitez comme un élément HTML <App />. Vous verrez cela plus en détail dans les futurs tutoriels de cette série.

      ReactDOM est le code qui relie votre code React aux éléments de base, comme la page index.html que vous avez vue dans public/. Regardez la ligne surlignée suivante :

      digital-ocean-tutorial/src/index.js

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

      Ce code demande à React de trouver un élément avec une id de root et d’y injecter le code React. <App/> est votre élément racine,et tout se ramifiera à partir de là. C’est le point de départ pour tout futur code React.

      En haut du fichier, vous verrez quelques importations. Vous importez index.css, mais vous n’en faites rien. En l’important, vous dites à Webpack, via les scripts React, d’inclure ce code CSS dans le bundle compilé final. Si vous ne l’importez pas, il n’apparaîtra pas.

      Quittez src/index.js.

      À ce stade, vous n’avez encore rien vu de ce que vous visualisez dans votre navigateur. Pour le voir, ouvrez App.js :

      Le code dans ce fichier ressemblera à une série d’éléments HTML ordinaires. Voici ce que vous allez voir :

      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;
      

      Changez le contenu de la balise <p> de Edit <code>src/App.js</code> and save to reload. à Hello, world et enregistrez vos changements.

      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>
        );
      }
      ...
      

      Allez sur votre navigateur et vous verrez le changement :

      React app avec "Hello, world" dans la balise paragraphe

      Vous avez maintenant fait votre première mise à jour vers un composant React.

      Avant d’y aller, observez quelques autres choses. Dans ce composant, vous importez le fichier logo.svg et vous l’attribuez à une variable. Ensuite, dans l’élément <img>, vous ajoutez ce code comme la src.

      Il y a un certain nombre de choses qui se passent ici. Regardez l’élément 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>
      ...
      

      Remarquez comment vous passez le logo dans des accolades. Chaque fois que vous passez des attributs qui ne sont pas des chaînes de caractères ou des chiffres, vous devez utiliser les accolades. React traitera ceux-ci comme du JavaScript au lieu de chaînes. Dans ce cas, vous n’importez pas réellement l’image, mais vous la référencez. Lorsque Webpack construit le projet, il traite l’image et place la source à l’endroit approprié.

      Quittez l’éditeur de texte.

      Si vous regardez les éléments DOM dans votre navigateur, vous verrez qu’il ajoute un chemin d’accès. Si vous utilisez Chrome, vous pouvez inspecter l’élément en cliquant sur l’élément avec le bouton droit de la souris et en sélectionnant Inspecter.

      Voici à quoi cela ressemblera dans le navigateur :

      Inspecter un élément à l'aide des outils de développement de chrome

      Le DOM a cette ligne :

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

      Votre code sera légèrement différent puisque le logo aura un nom différent. Webpack veut s’assurer que le chemin de l’image est unique. Donc même si vous importez des images avec le même nom, elles seront enregistrées avec des chemins différents.

      À ce stade, vous avez apporté un petit changement au code JavaScript de React. Dans l’étape suivante, vous utiliserez la commande build pour minifier le code dans un petit fichier qui peut être déployé sur un serveur.

      Étape 6 — Construction du projet

      Au cours de cette étape, vous allez intégrer le code dans un bundle qui peut être déployé sur des serveurs externes.

      Revenez à votre terminal et construisez le projet. Vous avez exécuté cette commande avant, mais à titre de rappel, cette commande va exécuter le script build. Il créera un nouveau répertoire avec les fichiers combinés et minifiés. Pour exécuter le build, exécutez la commande suivante à partir de la racine de votre projet :

      Il y aura un temps d’attente à mesure que le code se compile et quand il sera terminé, vous aurez un nouveau répertoire appelé build/.

      Ouvrez build/index.html dans un éditeur de texte.

      Vous verrez quelque chose de ce genre :

      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>
      

      Le répertoire build prend tout votre code, le compile et le minifie dans le plus petit état utilisable possible. Peu importe qu’un humain puisse le lire, puisqu’il ne s’agit pas d’un code destiné au public. Minifié ainsi, le code prendra moins de place tout en pouvant continuer à fonctionner. Contrairement à certains langages comme Python, l’espace blanc ne change pas la façon dont l’ordinateur interprète le code.

      Conclusion

      Dans ce tutoriel, vous avez créé votre première application React, configuré votre projet à l’aide des outils de construction JavaScript sans avoir à entrer dans les détails techniques. C’est l’intérêt de Create React App : vous n’avez pas besoin de tout savoir pour commencer. Il vous permet d’ignorer les étapes de construction compliquées afin que vous puissiez vous concentrer exclusivement sur le code de React.

      Vous avez appris les commandes pour démarrer, tester et construire un projet. Vous utiliserez ces commandes régulièrement, alors prenez-en note pour les futurs tutoriels. Plus important encore, vous avez mis à jour votre premier composant React.

      Si vous souhaitez voir React en action, essayez notre tutoriel Comment afficher les données de l’API DigitalOcean avec React.



      Source link

      Создание и настройка проекта React с помощью приложения Create React App


      Автор выбрал Creative Commons для получения пожертвования в рамках программы Write for DOnations.

      Введение

      React — популярная система JavaScript для создания клиентских приложений. Первоначально эта система была разработана Facebook и быстро стала популярной, поскольку она позволяет разработчикам создавать быстрые приложения на основе интуитивно понятной парадигмы программирования, соединяющей JavaScript с похожим на HTML синтаксисом под названием JSX.

      Раньше для создания нового проекта React требовался сложный процесс, состоящий из множества шагов и включающий систему для сборки, компилятор для конвертации современного синтаксиса в читаемый всеми браузерами код, а также базовую структуру директорий. Однако сейчас появилось приложение Create React App, включающее все пакеты JavaScript, необходимые для запуска проекта React, включая системы компиляции кода, проверки соблюдения стандартов кодирования, тестирования и сборки. Также приложение включает сервер с функцией горячей перезагрузки, обновляющей страницу при внесении изменений в код. Также оно создает структуру директорий и компонентов, позволяя перейти к программированию уже через несколько минут.

      Другими словами, вам не нужно беспокоиться о настройке Webpack или другой системы сборки. Вам не нужно настраивать Babel для компиляции кода для совместимости с разными браузерами. Вам не нужно беспокоиться о работе со сложными системами разработки современных клиентских интерфейсов. Вы можете начать создание кода React с минимумом начальной подготовки.

      К завершению этого обучающего руководства у вас будет работающее приложение React, которое вы сможете использовать как основу для любых будущих приложений. Вы внесете первые изменения в код React, обновите стили и выполните сборку для создания полностью минифицированной версии вашего приложения. Также вы будете использовать сервер с горячей перезагрузкой, чтобы мгновенно получать обратную связь и детально изучать компоненты проекта React. Наконец, вы начнете писать собственные компоненты и создадите структуру, которая сможет расти и адаптироваться вместе с вашим проектом.

      Предварительные требования

      Для прохождения этого обучающего руководства вам потребуется следующее:

      • Node.js версии 10.16.0, установленный на вашем компьютере. Чтобы установить его в macOS или Ubuntu 18.04, следуйте указаниям руководства Установка Node.js и создание локальной среды разработки в macOS или раздела Установка с помощью PPA руководства Установка Node.js в Ubuntu 18.04.

      • Также вам нужно понимать основы языка JavaScript, для изучения которого вам подойдет серия Программирование на JavaScript, а также обладать базовыми знаниями языков HTML и CSS.

      Шаг 1 — Создание нового проекта с помощью приложения Create React App

      На этом шаге мы создадим новое приложение, используя диспетчер пакетов npm для запуска удаленного скрипта. Скрипт скопирует необходимые файлы в новую директорию и установит все зависимости.

      При установке Node вы также установили приложение для управления пакетами npm. npm установит пакеты JavaScript для вашего проекта и будет отслеживать детали проекта. Если вы хотите узнать больше об npm, воспользуйтесь обучающим руководством Использование модулей Node.js с npm и package.json.

      npm также включает инструмент npx, отвечающий за запуск исполняемых пакетов. Это означает, что вы сможете запускать код приложения Create React App без предварительной загрузки проекта.

      Используемый пакет выполнит установку create-react-app в указанную вами директорию. Для начала он создаст в директории новый пакет, которому в этом обучающем руководстве мы присвоим имя digital-ocean-tutorial. Если этой директории не существует, исполняемый пакет просто создаст ее. Скрипт также запустит команду npm install в директории проекта для загрузки всех дополнительных зависимостей.

      Для установки базового проекта выполните следующую команду:

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

      Эта команда запустит процесс сборки, во время которого будет загружен базовый код вместе с определенным числом зависимостей.

      После успешного выполнения скрипта вы увидите соответствующее сообщение:

      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 будет текущим путем. Если вы используете macOS, путь будет выглядеть как /Users/your_username; а если вы используете сервер Ubuntu — /home/your_username.

      Также вы увидите список команд npm для выполнения, сборки, запуска и тестирования вашего приложения. Более подробно вы узнаете об этом в следующем разделе.

      Примечание. Также для JavaScript можно использовать диспетчер пакетов yarn. Он поддерживается Facebook и во многом аналогичен по функционалу npm. Изначально в yarn были добавлены некоторые новые функции, такие как блокировка файлов, однако сейчас они реализованы и в npm. Кроме того, в yarn имеются и другие функции, такие как кэширование в автономном режиме. О других отличиях можно узнать из документации по yarn.

      Если вы ранее устанавливали yarn в вашей системе, вы увидите список команд yarn, таких как yarn start. Эти команды работают так же, как и команды npm. Вы можете запускать команды npm, даже если у вас установлен yarn. Если вы предпочитаете yarn, просто заменяйте npm на yarn во всех будущих командах. Результат будет точно таким же.

      Теперь ваш проект настроен в новой директории. Перейдите в новую директорию:

      • cd digital-ocean-tutorial

      Теперь вы находитесь в корневой директории вашего проекта. Вы уже создали новый проект и добавили в него все зависимости. Однако вы не предприняли никаких действий для запуска проекта. В следующем разделе вы научитесь использовать пользовательские скрипты для сборки и тестирования проекта.

      Шаг 2 — Использование скриптов react-scripts

      На этом шаге вы узнаете о различных скриптах react-scripts, устанавливаемых вместе с репозиторием. Вначале вы запустите скрипт test для выполнения тестового кода. Затем вы запустите скрипт build для создания минифицированной версии. В заключение вы узнаете, как использовать скрипт eject для полного контроля персонализированной настройки.

      Перейдите в директорию проекта и изучите ее. Вы можете открыть всю директорию в текстовом редакторе или вывести файлы из него в терминале с помощью следующей команды:

      Флаг -a обеспечивает добавление в вывод скрытых файлов.

      В любом случае вы увидите примерно следующую структуру:

      Output

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

      Расскажем обо всех элементах подробнее:

      • node_modules/ содержит все внешние библиотеки JavaScript, используемые приложением. Вам нечасто потребуется использовать его.

      • Директория public/ содержит базовые файлы HTML, JSON и изображений. Это корневые ресурсы вашего проекта. Вы сможете узнать о них более подробно на шаге 4.

      • В директории src/ содержится код React JavaScript для вашего проекта. В основном вы будете работать именно с этой директорией. Более подробно мы расскажем об этой директории на шаге 5.

      • Файл .gitignore содержит несколько директорий и файлов по умолчанию, которые система контроля исходного кода git будет игнорировать, в том числе директорию node_modules. Игнорируемые элементы — это большие директории или файлы журнала, которые не нужны при контроле исходного кода. Также здесь указаны некоторые директории, которые вы создадите с помощью некоторых скриптов React.

      • README.md — это файл разметки, содержащий много полезной информации о приложении Create React App, в том числе обзор команд и ссылки на расширенные опции конфигурации. Сейчас лучше оставить файл README.md в первозданном виде. По мере развития проекта вы будете заменять данные по умолчанию более подробной информацией о вашем проекте.

      Последние два файла используются вашим диспетчером пакетов. При запуске первоначальной команды npx вы создали базовый проект, а также установили дополнительные зависимости. При установке зависимостей вы создали файл package-lock.json. Этот файл используется npm для проверки точного соответствия версий пакетов. Так вы можете быть уверены, что если кто-то другой установит ваш проект, у него будут идентичные зависимости. Поскольку этот файл создается автоматически, вам нечасто потребуется редактировать его.

      Последний файл — package.json. Он содержит метаданные о вашем проекте, включая заголовок, номер версии и зависимости. Также он содержит скрипты, которые вы можете использовать для запуска проекта.

      Откройте файл package.json в предпочитаемом текстовом редакторе:

      Открыв файл, вы увидите объект JSON, содержащий все метаданные. Если посмотреть на объект scripts, вы увидите, что он содержит четыре разных скрипта: start, build, test и eject.

      Эти скрипты перечислены в порядке важности. Первый скрипт запускает локальную среду разработки, к чему мы перейдем на следующем шаге. Второй скрипт выполняет сборку вашего проекта. Вы узнаете об этом более подробно на шаге 4, но лучше запустить его сейчас и посмотреть, что произойдет.

      Скрипт build

      Для запуска любого скрипта npm нужно просто ввести в терминале команду npm run script_name. Существует несколько особых скриптов, где можно опустить run в составе команды, но вводить команду полностью никогда не будет ошибкой. Чтобы запустить скрипт build, введите в терминале следующую команду:

      Вы немедленно увидите следующее сообщение:

      Output

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

      Это покажет вам, что приложение Create React App компилирует ваш код в пригодный для использования пакет.

      После завершения вы увидите следующее:

      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

      Выведите содержимое проекта, и вы увидите несколько новых директорий:

      Output

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

      Теперь у вас появилась директория build. Если вы открывали файл .gitignore, вы могли заметить, что директория build игнорируется git. Это связано с тем, что директория build просто представляет собой минифицированную и оптимизированную версию других файлов. Контроль версий не требуется, поскольку вы можете в любое время запустить команду build. О результатах выполнения этого скрипта мы поговорим чуть позже, а пока что перейдем к скрипту test.

      Скрипт test

      Скрипт test — один из специальных скриптов, для которых не требуется ключевое слово run, однако он будет работать и с этим ключевым словом. Этот скрипт запускает программу тестирования Jest. Программа тестирования ищет в проекте файлы с расширением .spec.js или .test.js, а затем запускает эти файлы.

      Для запуска скрипта test введите следующую команду:

      После запуска этого скрипта на вашем терминале будут выведены результаты тестирования, а командная строка терминала будет скрыта. Он будет выглядеть примерно так:

      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.

      Здесь нужно обратить внимание на несколько вещей. Во-первых, как говорилось выше, тест автоматически обнаруживает все файлы с тестовыми расширениями, включая .test.js и .spec.js. В нашем случае у нас имеется только один тестовый набор, то есть только один файл с расширением .test.js, и этот набор содержит только один тест. Jest может обнаруживать тесты в иерархии кода, то есть вы можете размещать тесты в директории, и Jest найдет их там.

      Во-вторых, Jest не просто запускает тест один раз и закрывается. Он продолжает работать в терминале. Если вы внесете изменения в исходный код, он проведет тесты снова.

      Также вы можете ограничить состав запускаемых тестов, использовав одну из опций с клавиатуры. Например, если вы наберете o, тесты будут выполняться только с файлами, в которые были внесены изменения. Это поможет вам сэкономить много времени при увеличении объемов тестовых наборов.

      Для выхода из системы тестирования следует ввести q. Сделайте это сейчас, чтобы вернуться в командную строку.

      Скрипт eject

      Последний скрипт называется npm eject. Этот скрипт копирует зависимости и файлы конфигурации в ваш проект, обеспечивая полный контроль над кодом, но при этом извлекая проект из интегрированной системы инструментов приложения Create React App. Сейчас мы не будем запускать этот скрипт, поскольку это действие нельзя отменить, а при его запуске вы потеряете все будущие обновления приложения Create React App.

      Ценность приложения Create React App заключается в том, что вам не нужно беспокоиться о значительном количестве аспектов настройки конфигурации. Для создания современных приложений JavaScript требуется множество разных инструментов, от Webpack и других сборочных систем до Babel и других средств компиляции. Приложение Create React App выполняет за вас все задачи по настройке конфигурации, поэтому извлечение проекта из приложения означает, что вам придется вносить все сложные настройки самостоятельно.

      Минус приложения Create React App заключается в том, что вы не можете полностью персонализировать проект. Для большинства проектов это неважно, однако если вы захотите полностью контролировать все аспекты процесса сборки, вам нужно будет выполнить извлечение кода. Однако, как мы уже говорили выше, после извлечения кода вы не сможете обновлять его с новыми версиями приложения Create React App, и вам придется вручную добавлять все улучшения.

      На данный момент вы выполнили скрипты для сборки и тестирования вашего кода. На следующем шаге мы запустим проект на рабочем сервере.

      Шаг 3 — Запуск сервера

      На этом шаге вы инициализируете локальный сервер и запустите проект в своем браузере.

      Для запуска проекта используется еще один скрипт npm. Как и скрипт npm test, этот скрипт не требует использования команды run. Этот скрипт запускает локальный сервер, выполняет код проекта, запускает программу отслеживания изменений кода и открывает проект в браузере.

      Запустите проект, введя следующую команду в корневой директории проекта. В данном обучающем руководстве в качестве корневой директории проекта выступает директория digital-ocean-tutorial. Откройте ее на отдельном терминале или вкладке, поскольку этот скрипт будет работать все время, пока вы это разрешаете:

      Перед запуском сервера вы ненадолго увидите замещающий текст, а потом появится следующий экран:

      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.

      Если вы запускаете скрипт в локальной системе, он откроет проект в окне браузера и переключит фокус с терминала на браузер.

      Если этого не произойдет, вы можете открыть URL-адрес http://localhost:3000/, чтобы увидеть сайт в работе. Если на порту 3000 уже запущен другой сервер, это не представляет проблемы. Приложение Create React App найдет следующий доступный порт и запустит сервер на нем. Другими словами, если у вас уже запущен проект на порту 3000, новый проект будет запущен на порту 3001.

      При запуске с удаленного сервера вы все равно сможете увидеть свой сайт без дополнительной настройки. Он будет иметь адрес http://your_server_ip:3000. Если у вас включен и настроен брандмауэр, вам нужно будет открыть данный порт на удаленном сервере.

      В браузере вы увидите следующий шаблон проекта React:

      Шаблон проекта React

      Пока скрипт работает, у вас будет активный локальный сервер. Для остановки скрипта следует закрыть окно или вкладку терминала или ввести CTRL+C или ⌘-+c в окне или на вкладке терминала, где выполняется ваш скрипт.

      Вы запустили сервер, и ваш первый код React уже выполняется. Прежде чем вносить любые изменения в код React JavaScript, вам нужно увидеть рендеринг React на странице.

      Шаг 4 — Изменение главной страницы

      На этом шаге мы изменим код в директории public/. В директории public содержится ваша базовая страница HTML. Эта страница будет выступать в качестве корневой для вашего проекта. В будущем вам редко придется изменять эту директорию, однако она представляет собой основу запуска проекта и является ключевой частью проекта React.

      Если вы отключили сервер, запустите его с помощью команды npm start, а затем откройте public/ в предпочитаемом текстовом редакторе в новом окне терминала:

      Также вы можете вывести список файлов с помощью команды ls:

      Вы увидите список файлов следующего вида:

      Output

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

      favicon.ico, logo192.png и logo512.png — это значки, которые пользователь будет видеть на вкладке браузера или в телефоне. Браузер автоматически выберет значок подходящего размера. Впоследствии вы можете заменить их на другие значки, которые лучше подойдут для вашего проекта. Пока же вы можете использовать их как есть.

      Файл manifest.json содержит структурированный набор метаданных, описывающий ваш проект. Помимо прочего, в нем указывается, какие значки следует использовать для разных размеров экрана.

      Файл robots.txt содержит информацию для поисковых роботов. Он указывает роботам, какие страницы можно индексировать, а какие нельзя. Вам не нужно изменять ни один из этих файлов, если у вас нет на это важных причин. Например, если вы хотите дать некоторым пользователям URL для доступа к особому контенту, который не должен быть общедоступным, вы можете добавить этот URL в файл robots.txt, и он останется общедоступным, но не будет индексироваться поисковыми системами.

      Файл index.html представляет собой корневую часть вашего приложения. Именно этот файл считывает сервер, и именно его отображает ваш браузер. Откройте файл в текстовом редакторе и посмотрите на него.

      Если вы работаете из командной строки, вы можете использовать следующую команду:

      Вот что вы увидите:

      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>
      

      Сам файл довольно короткий. В части <body> нет изображений или слов. Это связано с тем, что React самостоятельно строит всю структуру HTML и вставляет ее с помощью JavaScript. Однако React нужно знать, куда вставлять код, и для этого и используется файл index.html.

      В текстовом редакторе измените значение тега <title> с React App на 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>
      
      

      Сохраните изменения и закройте текстовый редактор. Откройте файл в браузере. Заголовок отображается на вкладке браузера и должен обновиться автоматически. Если этого не произойдет, обновите страницу и посмотрите на изменения.

      Теперь вернитесь в текстовый редактор. Каждый проект React начинается с корневого элемента. На странице может быть несколько корневых элементов, но один должен присутствовать обязательно. Так React узнает, куда поместить сгенерированный код HTML. Найдите элемент <div id="root">. Этот элемент div будет использоваться React для всех будущих обновлений. Измените id с root на 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>
      

      Сохраните изменения.

      В браузере вы увидите сообщение об ошибке:

      Сообщение об ошибке гласит «Target container is not a DOM element» (целевой контейнер не является элементом DOM)

      React искал элемент с id root. Теперь этого элемента нет, и React не может запустить проект.

      Измените имя с base на 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>
      

      Сохраните и закройте файл index.html.

      Вы запустили сервер и внесли небольшое изменение в корневую страницу HTML. Пока еще вы не меняли код JavaScript. В следующем разделе мы начнем изменять код React JavaScript.

      Шаг 5 — Изменение тега заголовка и стилей

      На этом шаге вы внесете первое изменение в компонент React в директории src/. Вы внесете небольшое изменение в код CSS и JavaScript, который будет автоматически обновляться в браузере с помощью встроенной функции горячей перезагрузки.

      Если вы остановили сервер, обязательно перезапустите его с помощью команды npm start. Познакомьтесь с содержимым директории src/. Вы можете открыть полную директорию в предпочитаемом текстовом редакторе или вывести проект на терминал с помощью следующей команды:

      Вы увидите в терминале или текстовом редакторе следующие файлы.

      Output

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

      Рассмотрим каждый из этих файлов по отдельности.

      Вначале вы не будете тратить много времени на файл serviceWorker.js, но он может оказаться важным, когда вы начнете создавать прогрессивные веб-приложения. Сервисный рабочий может выполнять много разных задач, в том числе отправлять push-уведомления и обеспечивать кэширование в автономном режиме, но пока что мы не будем его трогать.

      Далее взглянем на файлы setupTests.js и App.test.js. Они используются для тестовых файлов. При запуске npm test на шаге 2 скрипт уже запускал эти файлы. Файл setupTests.js небольшой и содержит несколько настраиваемых методов expect. Вы узнаете о них больше в следующих обучающих руководствах этой серии.

      Откройте файл App.test.js:

      Когда вы откроете этот файл, вы увидите простой тест:

      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();
      });
      

      Этот тест проверяет наличие в документе фразы learn react. Если вы вернетесь в браузер, где запущен ваш проект, вы увидите фразу на странице. Тестирование React отличается от большинства блочных тестов. Поскольку компоненты могут содержать и визуальную информацию (например разметку), и логику управления данными, традиционные блочные тесты могут не сработать. Тестирование React скорее является формой функционального тестирования или тестирования интеграции.

      Далее вы видите несколько файлов стилей: App.css, index.css и logo.svg. Существует много вариантов работы со стилями в React, но проще всего написать простой код CSS, не требующий дополнительной настройки.

      Здесь имеется несколько файлов CSS, поскольку вы можете импортировать стили в компонент, как если бы они представляли собой другой файл JavaScript. Поскольку у вас имеется возможность импортировать CSS в компонент напрямую, вы также можете разделить файл CSS для его применения к отдельному компоненту. Так вы разделяете области беспокойства. Вы не храните все файлы CSS отдельно от JavaScript. Вместо этого все элементы CSS, JavaScript, разметки и изображений сгруппированы вместе.

      Откройте файл App.css в предпочитаемом текстовом редакторе. Если вы работаете из командной строки, вы можете использовать следующую команду:

      Вы увидите следующий код:

      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);
        }
      }
      

      Это стандартный файл CSS без специальных инструментов предварительной обработки CSS. Если хотите, вы можете добавить их позднее, но вначале у вас будут только простые файлы CSS. Создатели приложения Create React App старались не делать его безапелляционным, но при этом предоставить полностью готовую среду.

      Вернемся к файлу App.css. Одно из преимуществ приложения Create React заключается в том, что оно наблюдает за всеми файлами, и при внесении изменения вы увидите его в браузере без перезагрузки.

      Чтобы увидеть это, внесем небольшое изменение в параметр background-color в файле App.css. Измените его с #282c34 на blue, а затем сохраните файл. Окончательный стиль будет выглядеть следующим образом:

      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);
        }
      }
      

      Проверьте браузер. Вот как это выглядело раньше:

      Приложение React с темным фоном

      Вот как это будет выглядеть после изменения:

      Приложение React с синим фоном

      Измените значение background-color обратно на #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);
        }
      }
      

      Сохраните и закройте файл.

      Вы внесли небольшое изменение в файл CSS. Теперь внесем изменения в код React JavaScript. Для начала откройте файл index.js.

      Вы увидите следующее:

      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();
      

      Прежде всего, вы импортируете React, ReactDOM, index.css, App и serviceWorker. Импортируя React, вы фактически извлекаете код для конвертации JSX в JavaScript. JSX — это элементы в стиле HTML. Обратите внимание, что при использовании App вы обращаетесь с ним как с элементом HTML <App />. Вы узнаете об этом подробнее из следующих обучающих руководств этой серии.

      ReactDOM — это код, который связывает ваш код React с базовыми элементами, такими как страница index.html, которую мы увидели в public/. Посмотрите на следующую выделенную строку:

      digital-ocean-tutorial/src/index.js

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

      Этот код предписывает React найти элемент с id root и вставить в него код React. <App/> — это корневой элемент, от которого идут все ответвления. Это исходная точка для всего будущего кода React.

      Вверху файла имеется несколько операций импорта. Мы импортируем index.css, но ничего не делаем с этим файлом. Импортируя его, мы предписываем Webpack через скрипты React включить этот код CSS в окончательную скомпилированную версию пакета. Если его не импортировать, он не будет отображаться.

      Выйдите из файла src/index.js.

      Пока что вы еще не видели ничего, что вы видите в браузере. Чтобы увидеть это, откройте файл App.js:

      Код в этом файле выглядит как набор стандартных элементов HTML. Вы увидите следующее:

      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;
      

      Измените содержимое тега <p> с Edit <code>src/App.js</code> and save to reload. на Hello, world и сохраните изменения.

      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>
        );
      }
      ...
      

      Переключитесь в браузер, и вы увидите изменения:

      Приложение React с текстом "Hello, world" в теге абзаца

      Вы внесли первое изменение в компонент React.

      Прежде чем заканчивать, обратите внимание еще на несколько вещей. В этом компоненте мы импортируем файл logo.svg и назначаем его переменной. Затем в элементе <img> мы добавляем этот код как src.

      Здесь происходит еще несколько вещей. Посмотрите на элемент 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>
      ...
      

      Обратите внимание, как вы передаете logo в фигурных скобках. Каждый раз, когда вы передаете атрибуты, которые не являются строками или числами, вам нужно будет использовать фигурные скобки. React обрабатывает их как элементы JavaScript, а не как строки. В этом случае вы не импортируете образ, а ссылаетесь на него. Когда Webpack выполняет сборку проекта, он обрабатывает образ и задает для источника соответствующее место.

      Закройте текстовый редактор.

      Если вы посмотрите на элементы DOM в браузере, вы увидите, что он добавляет путь. Если вы используете Chrome, вы можете просмотреть элемент, щелкнув его правой кнопкой мыши и выбрав пункт Inspect.

      Вот как это будет выглядеть в браузере:

      Инспектирование элемента с помощью инструментов chrome для разработчиков

      В DOM содержится следующая строка:

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

      Ваш код будет немного отличаться, поскольку у логотипа другое имя. Webpack нужно убедиться, что путь изображения уникальный. Так что даже если вы импортируете изображения с одинаковым именем, они будут сохраняться на разных путях.

      Вы внесли небольшое изменение в код React JavaScript. На следующем шаге мы используем команду build для минификации кода в небольшой файл, который можно будет развернуть на сервере.

      Шаг 6 — Сборка проекта

      На этом шаге мы выполним сборку проекта в пакет, который можно будет развернуть на внешних серверах.

      Вернитесь в терминал и выполните сборку проекта. Вы уже запускали эту команду, но напомним, что она запускает скрипт build. В результате будет создан новая директория с комбинированными и минифицированными файлами. Для выполнения сборки запустите следующую команду из корневой директории проекта:

      Возможна небольшая задержка, пока код будет компилироваться, а после завершения компиляции будет создана новая директория build/.

      Откройте build/index.html в текстовом редакторе.

      Вы увидите примерно следующее:

      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>
      

      В директории сборки весь код компилируется и минифицируется до наименьшего полезного состояния. Читаемость кода неважна, поскольку этот код не предназначен для чтения человеком. При такой минификации код занимает намного меньше места, но при этом работает. В отличие от таких языков как Python, пробел не меняет интерпретацию кода компьютером.

      Заключение

      В этом обучающем руководстве вы создали свое первое приложение React и настроили проект с помощью инструментов сборки JavaScript без необходимости вдаваться в технические детали. В этом и заключается польза приложения Create React App: вам не нужно знать все, чтобы начать работу. Приложение позволяет игнорировать сложные этапы сборки и сосредоточиться исключительно на коде React.

      Вы изучили команды для запуска, тестирования и сборки проекта. Вы будете использовать эти команды регулярно, так что запомните их для будущих обучающих руководств. Не менее важно, что вы изменили свой первый компонент React.

      Если вы хотите увидеть React в действии, пройдите обучающее руководство Отображение данных из DigitalOcean API с помощью React.



      Source link