Como instalar ReactJS en Ubuntu 20.04

Paso 1: cree una nueva aplicación React

Puede crear una aplicación React.js mediante una de las órdenes siguientes.

yarn create react-app myreactapp 

Excepto el hilo, también puede utilizarlo npx (npx create-react-app myreactapp) o NPM (npm init react-app myreactapp) Órdenes para crear la aplicación React.js.

Al crear una aplicación con éxito, verá un resultado largo en la pantalla. Al final, encontrará el resultado como bajo con algunas órdenes útiles.

Paso 2: Inicie la aplicación React

Una vez creada la aplicación React. Esto creará una carpeta en el directorio actual con el nombre del proyecto. Cambie a este proyecto y ejecútelo yarn start para iniciar la aplicación.

cd myreactapp  yarn start 

salida:

Compiled successfully!

You can now view myreactapp in the browser. Local: http://localhost:3000 On Your Network: http://192.168.10.200:3000 Note that the development build is not optimized. To create a production build, use yarn build.

La aplicación reactiva por defecto se inicia en el puerto 3000. Accede a la aplicación React mediante el puerto 3000 con la dirección IP del sistema. Para máquinas locales, utilice «localhost» seguido del puerto.

Permite crear una interfaz de usuario increíble con React.

Paso 3: cree una compilación de producción de React.js

Una vez su aplicación esté lista para el despliegue de producción. Creamos una versión de producción de su aplicación React. La compilación de producción contiene archivos estáticos necesarios para ejecutar la aplicación en el entorno de producción. No tiene que instalar Node.js los servidores de producción, ya que no contienen ningún archivo de desarrollo.

uso yarn build o bien npm run build orden para crear la compilación de producción de la aplicación React.js.

cd myreactapp  yarn build 

Al construir correctamente, verá la salida como se muestra a continuación:

yarn run v1.22.10
$ react-scripts build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  41.33 KB  build/static/js/2.fefeb60f.chunk.js
  1.59 KB   build/static/js/3.63acee40.chunk.js
  1.17 KB   build/static/js/runtime-main.3da20c7a.js
  591 B     build/static/js/main.3ee865b4.chunk.js
  531 B     build/static/css/main.8c8b27cf.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

Done in 26.59s.

Todos los archivos de producción se crean bajo el archivo construir directorio. Cuelgue todo el contenido del directorio de compilación en la raíz del documento del sitio web de producción.

En caso de producirse algún problema en el servidor de producción. Primero, hay que resolver el problema con el código fuente local y, a continuación, vuelva a crear la compilación de producción y vuelva a desplegar al servidor.

conclusión

En este tutorial, habéis aprendido a configurar el entorno de desarrollo de React.js y acceder a la aplicación en el navegador web. Además, ha encontrado instrucciones para crear la compilación de producción de su aplicación React.