Tutorial de VS Code: Cómo configurar un proyecto React.js con Next.js

es el marco de desarrollo web de código abierto que se utiliza para generar sitios web estáticos y también permite la representación del lado del servidor para aplicaciones web basadas en React. Next.js Veamos cómo configurar el proyecto de reacción con next.js. Requisitos: código de estudio visual Nodo.js Siguiente.js Conocimiento básico de React y JavaScript Paso 1: Instale el código de Visual Studio Visual Studio Code es un editor de código gratuito y de código abierto que se ejecuta sin problemas en Windows, Linux y macOS. Puedes descargarlo desde . aquí Paso 2: Instalar Node.js Node.js es un tiempo de ejecución de JavaScript que ayuda al lenguaje de programación JavaScript a ejecutarse y ejecutarse en servidores. Puede descargar Node.js según los requisitos de su sistema desde . Asegúrese de que puede descargar solo la versión LTS que es estable. aquí Paso 3: crear un directorio vacío Cree una carpeta/directorio vacío en su unidad local (C:, E:, D: o cualquiera) y agréguelo a . Visual Studio Code Abra una nueva ventana en VS Code. Haga clic en la carpeta abierta. Luego, seleccione y agregue la carpeta vacía que ha creado. He creado la carpeta . nextjs-setup Después de seleccionar la ventana, puede ver que se agrega al código VS. Paso 4: Abrir terminal para carpeta vacía Vaya a la barra de menús y haga clic en el menú . Puede ver la opción allí. Haz clic en eso. Terminal Nueva terminal Puede ver a continuación, abrirá una terminal para la ruta en la que ha creado una carpeta vacía y que también es su carpeta raíz. Paso 5: Inicializar proyecto Ejecute el siguiente comando para inicializar el proyecto. El siguiente comando creará automáticamente un archivo en el directorio. package.json Escriba debajo del comando y presione enter. Dominio: npm init -y Se crea el archivo package.json. Paso 6: Instalar Next.js Use el siguiente comando para instalar next.js. Dominio: npm install react react-dom next –save Presiona enter y obtendrás la siguiente pantalla después de que se complete la instalación. Paso 7: Realice cambios en package.json Puede ver el siguiente código en el archivo package.json. Reemplace el código anterior con el siguiente y . guárdelo ‎ : { : , : , : }, ‎ "scripts" "dev" "next" "build" "next build" "start" "next start" Lea el siguiente párrafo antes de pasar al siguiente paso, directorio Next.js tiene enrutamiento basado en archivos. Cualquier archivo JavaScript que coloque en el /pages se ejecutará. Además, index.js es el archivo predeterminado que se ejecuta cuando el usuario accede a la raíz (página de inicio) del sitio web. Paso 8: Cree la carpeta de y el archivo páginas index.js Puede ver en la imagen de abajo que hay dos íconos resaltados por mí (el primero es un y el segundo es una ). Seleccione NEXTJS-SETUP y cree primero la carpeta " . archivo nuevo carpeta nueva páginas" Después de eso, seleccione la carpeta "páginas" y haga clic en el y cree dentro de la carpeta "páginas". nuevo archivo index.js Paso 9: Ingrese el código de muestra índice.js Coloque el código de reacción a continuación en el archivo index.js que devuelve el componente de página simple. No olvides . guardar { ( Hello World ); } Page; ( ) function Page return div div export default Paso 10: Inicie el sitio web Escriba el siguiente comando para almorzar en el sitio web que se ejecuta en el marco next.js. Dominio: npm run dev Puedes ver el siguiente resultado: Su sitio web está listo para ejecutarse en . Ponga esta URL en el navegador y presione enter. Deberías ver la siguiente página. Eso es todo. 🙂 http://localhost:3000 Conclusión: Express.js facilita el trabajo del desarrollador al proporcionar funcionalidad para crear API, enviar solicitudes HTTP y enrutamiento. Por lo tanto, será fácil para los desarrolladores concentrarse en desarrollar aplicaciones web más rápido sin preocuparse por las cosas de configuración comunes requeridas. Publicado anteriormente en https://www.tutorialfunda.com/reactjs/setup-react-js-project-with-next-js-vs-code/

HackerNoon Mobile

Tutorial de VS Code: Cómo configurar un proyecto React.js con Next.js

Demasiado Largo; Para Leer

Company Mentioned

@s14raj

HISTORIAS RELACIONADAS