Skip to content

Commit

Permalink
translate Start a New React Project (beta docs)
Browse files Browse the repository at this point in the history
  • Loading branch information
@carburo
carburo committed Apr 6, 2022
1 parent cf56150 commit 348957b
Showing 1 changed file with 33 additions and 33 deletions.
66 changes: 33 additions & 33 deletions beta/src/pages/learn/start-a-new-react-project.md
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
---
title: Start a New React Project
title: Iniciar un nuevo proyecto de React
---

<Intro>

If you're learning React or considering adding it to an existing project, you can get started quickly by [adding React to any HTML page with script tags](/learn/add-react-to-a-website). If your project will need many components and many files, it might be time to consider the options below!
Si estás aprendiendo React o estás considerando añadirlo a un proyecto existente, puedes comenzar rápidamente por [añadir React a cualquier página HTML con etiquetas script](/learn/add-react-to-a-website). ¡Si tu proyecto va a necesitar muchos componentes y muchos archivos, podría ser hora de que consideres la opción que hay debajo!

</Intro>

## Choose your own adventure {/*choose-your-own-adventure*/}
## Escoge tu propia aventura {/*choose-your-own-adventure*/}

React is a library that lets you organize UI code by breaking it apart into pieces called components. React doesn't take care of routing or data management. For these features, you'll want to use third-party libraries or write your own solutions. This means there are several ways to start a new React project:
React es una biblioteca que te permite organizar código de IU al separarla en piezas que se nombran componentes. React no se preocupa por el enrutamiento o el manejo de datos. Para estas funcionalidades necesitarás usar bibliotecas de terceros o escribir tus propias soluciones. Esto significa que hay varias formas de comenzar un proyecto en React:

* Start with a **minimal set up with just a toolchain,** adding features to your project as necessary.
* Start with an **opinionated framework** with common functionality already built in.
* Comenzar con una **configuración mínima con solo una cadena de herramientas (_toolchain_)** y añadir funcionalidades a tu proyecto mientras se hagan necesarias.
* Comenzar con un **framework más rígido** con funcionalidades comunes ya incluidas.

Whether you're just getting started, looking to build something big, or want to set up your own toolchain, this guide will set you on the right path.
Ya sea que estás comenzando a aprender, que estás buscando construir algo grande o que quieres configurar tu propia cadena de herramientas, esta guía te indicará el camino apropiado.

## Getting started with a React toolchain {/*getting-started-with-a-react-toolchain*/}
## Iniciándote con una cadena de herramientas de React {/*getting-started-with-a-react-toolchain*/}

If you're just getting started with React, we recommend [Create React App](https://create-react-app.dev/), the most popular way to try out React's features and a great way to build a new single-page, client-side application. Create React App is an unopinionated toolchain configured just for React. Toolchains help with things like:
Si justo estás aprendiendo a usar React, te recomendamos [Create React App](https://create-react-app.dev/), la forma más popular de probar las funcionalidades de React y una forma magnífica de construir una aplicación de una sola página del lado del cliente. Create React App es una cadena de herramientas sin demasiadas opiniones y configurada solo para React. Las cadenas de herramientas te ayudan con cosas como:

* Scaling to many files and components
* Using third-party libraries from npm
* Detecting common mistakes early
* Live-editing CSS and JS in development
* Optimizing the output for production
* Escalar a muchos archivos y componentes
* Usar bibliotecas de terceros de npm
* Detectar errores comunes de forma temprana
* Editar CSS y JS en vivo en un entorno de desarrollo
* Optimizar el resultado para producción

You can get started building with Create React App with one line of code in your terminal! (**Be sure you have [Node.js](https://nodejs.org/) installed!**)
¡Puedes iniciarte con Create React App con una sola línea de código en tu terminal! (**¡Asegúrate de tener instalado [Node.js](https://nodejs.org/)!**).

<TerminalBlock>

npx create-react-app my-app

</TerminalBlock>

Now you can run your app with:
Ahora puedes ejecutar tu aplicación con:

<TerminalBlock>

Expand All @@ -44,37 +44,37 @@ npm start

</TerminalBlock>

For more information, [check out the official guide](https://create-react-app.dev/docs/getting-started).
Para más información, [consulta la guía oficial](https://create-react-app.dev/docs/getting-started).

> Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline. This means you can use it with any backend you want. But if you're looking for more features like routing and server-side logic, read on!
> Create React App no maneja la lógica del *backend* o las bases de datos; solo crea una línea de construcción. Esto significa que puedes utilizar cualquier *backend* que desees. ¡Pero si estás buscando más funcionalidades como enrutamiento y lógica del lado del servidor, continúa leyendo!
### Other options {/*other-options*/}
### Otras opciones {/*other-options*/}

Create React App is great to get started working with React, but if you'd like an even lighter toolchain, you might try one of these other popular toolchains:
Create React App es magnífica para iniciar a trabajar con React, pero si quisieras una cadena de herramientas aún más ligera, puedes probar alguna de estas otras que son populares:

* [Vite](https://vitejs.dev/guide/)
* [Parcel](https://parceljs.org/)
* [Snowpack](https://www.snowpack.dev/tutorials/react)

## Building with React and a framework {/*building-with-react-and-a-framework*/}
## Construir con React y un framework {/*building-with-react-and-a-framework*/}

If you're looking to start a bigger, production-ready project, [Next.js](https://nextjs.org/) is a great place to start. Next.js is a popular, lightweight framework for static and server‑rendered applications built with React. It comes pre-packaged with features like routing, styling, and server-side rendering, getting your project up and running quickly.
Si estás pensando en construir un proyecto más grande listo para producción, [Next.js](https://nextjs.org/) es un muy buen lugar para comenzar. Next.js es un framework popular y ligero para aplicaciones hechas con React ya sean estáticas o renderizadas del lado del servidor. Viene preempaquetado con funcionalidades como enrutamiento, estilos, y renderizado del lado del servidor, lo que permite comenzar un proyecto rápidamente.

[Get started building with Next.js](https://nextjs.org/docs/getting-started) with the official guide.
[Comienza a construir con Next.js](https://nextjs.org/docs/getting-started) usando la guía oficial.

### Other options {/*other-options-1*/}
### Otras opciones {/*other-options-1*/}

* [Gatsby](https://www.gatsbyjs.org/) lets you generate static websites with React with GraphQL.
* [Razzle](https://razzlejs.org/) is a server-rendering framework that doesn't require any configuration, but offers more flexibility than Next.js.
* [Gatsby](https://www.gatsbyjs.org/) te permite generar sitios web estáticos con React y GraphQL.
* [Razzle](https://razzlejs.org/) es un framework para el renderizado del lado del servidor que no requiere ninguna configuración, pero ofrece más flexibilidad que Next.js.

## Custom toolchains {/*custom-toolchains*/}
## Cadenas personalizadas {/*custom-toolchains*/}

You may prefer to create and configure your own toolchain. A JavaScript build toolchain typically consists of:
Puede que prefieras crear y configurar tu propia cadena de herramientas. Una cadena de herramientas de construcción para JavaScript consiste en:

* A **package manager**—lets you install, update and manage third-party packages. [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) are two popular package managers.
* A **bundler**—lets you write modular code and bundle it together into small packages to optimize load time. [Webpack](https://webpack.js.org/), [Snowpack](https://www.snowpack.dev/), [Parcel](https://parceljs.org/) are several popular bundlers.
* A **compiler**—lets you write modern JavaScript code that still works in older browsers. [Babel](https://babeljs.io/) is one such example.
* Un **manejador de paquetes**-te permite instalar, actualizar y manejar paquetes de terceros. [Yarn](https://yarnpkg.com/) y [npm](https://www.npmjs.com/) son dos manejadores de paquetes populares.
* Un **bundler (empaquetador)**-te permite escribir código modular y mezclarlo en pequeños paquetes para optimizar los tiempos de carga. [Webpack](https://webpack.js.org/), [Snowpack](https://www.snowpack.dev/) y [Parcel](https://parceljs.org/) son varios *bundlers* populares.
* Un **compilador**-te permite escribir código moderno de JavaScript que funciona en navegadores más antiguos. [Babel](https://babeljs.io/) es un ejemplo.

In a larger project, you might also want to have a tool to manage multiple packages in a single repository. [Nx](https://nx.dev/react) is an example of such a tool.
En un proyecto más grande, puede que también quieras tener una herramienta que maneje múltiples paquetes en un solo repositorio. [Nx](https://nx.dev/react) es un ejemplo de este tipo de herramienta.

If you prefer to set up your own JavaScript toolchain from scratch, [check out this guide](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) that re-creates some of the Create React App functionality.
Si prefieres configurar tu propia cadena de herramientas desde cero, [consulta esta guía](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) que recrea algunas de las funcionalidades de CreateReactApp.

0 comments on commit 348957b

Please sign in to comment.