Skip to content

Commit 3e28edb

Browse files
elyalvaradocarburo
authored andcommitted
Translate: Create a New React App (#68)
1 parent ee41f87 commit 3e28edb

File tree

1 file changed

+43
-43
lines changed

1 file changed

+43
-43
lines changed
+43-43
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,94 @@
11
---
22
id: create-a-new-react-app
3-
title: Create a New React App
3+
title: Crear una Nueva Aplicación React
44
permalink: docs/create-a-new-react-app.html
55
redirect_from:
66
- "docs/add-react-to-a-new-app.html"
77
prev: add-react-to-a-website.html
88
next: cdn-links.html
99
---
1010

11-
Use an integrated toolchain for the best user and developer experience.
11+
Para obtener la mejor experiencia de usuario y desarrollador use una cadena de herramientas integrada.
1212

13-
This page describes a few popular React toolchains which help with tasks like:
13+
Esta página describe algunas de las cadenas de herramientas de React más populares, las cuales ayudan con tareas como:
1414

15-
* Scaling to many files and components.
16-
* Using third-party libraries from npm.
17-
* Detecting common mistakes early.
18-
* Live-editing CSS and JS in development.
19-
* Optimizing the output for production.
15+
* Escalar a múltiples archivos y componentes.
16+
* Usar bibliotecas de terceros desde npm.
17+
* Detección temprana de errores comunes.
18+
* Edición en vivo de CSS y JS en desarrollo.
19+
* Optimización de la salida para producción.
2020

21-
The toolchains recommended on this page **don't require configuration to get started**.
21+
Las cadenas de herramientas que se recomiendan en esta página **no requieren ninguna configuración para empezar**.
2222

23-
## You Might Not Need a Toolchain
23+
## Puede que no necesites una Cadena de Herramientas
2424

25-
If you don't experience the problems described above or don't feel comfortable using JavaScript tools yet, consider [adding React as a plain `<script>` tag on an HTML page](/docs/add-react-to-a-website.html), optionally [with JSX](/docs/add-react-to-a-website.html#optional-try-react-with-jsx).
25+
Si no experimentas los problemas descritos arriba, o aún no te sientes cómodo usando herramientas de Javascript, considera [añadir React como una etiqueta `<script>` en una página HTML](/docs/add-react-to-a-website.html), opcionalmente [con JSX](/docs/add-react-to-a-website.html#optional-try-react-with-jsx).
2626

27-
This is also **the easiest way to integrate React into an existing website.** You can always add a larger toolchain if you find it helpful!
27+
Esta es también **la manera más fácil de integrar React en un sitio web existente.** Siempre puedes añadir una cadena de herramientas más grande si lo consideras útil!
2828

29-
## Recommended Toolchains
29+
## Cadenas de Herramientas Recomendadas
3030

31-
The React team primarily recommends these solutions:
31+
El equipo de React principalmente recomienda las siguientes soluciones:
3232

33-
- If you're **learning React** or **creating a new [single-page](/docs/glossary.html#single-page-application) app,** use [Create React App](#create-react-app).
34-
- If you're building a **server-rendered website with Node.js,** try [Next.js](#nextjs).
35-
- If you're building a **static content-oriented website,** try [Gatsby](#gatsby).
36-
- If you're building a **component library** or **integrating with an existing codebase**, try [More Flexible Toolchains](#more-flexible-toolchains).
33+
- Si estás **aprendiendo React** o **creando una nueva [aplicación de página única](/docs/glossary.html#single-page-application),** usa [Create React App](#create-react-app).
34+
- Si estás construyendo un **sito web renderizado en servidor con Node.js,** prueba [Next.js](#nextjs).
35+
- Si estás construyendo un **sitio web orientado a contenido estático,** prueba [Gatsby](#gatsby).
36+
- Si estás construyendo una **biblioteca de componentes** o **integrando una base de código existente**, prueba [Cadenas de Herramientas más Flexibles](#cadenas-de-herramientas-ms-flexibles).
3737

3838
### Create React App
3939

40-
[Create React App](http://github.com/facebookincubator/create-react-app) is a comfortable environment for **learning React**, and is the best way to start building **a new [single-page](/docs/glossary.html#single-page-application) application** in React.
40+
[Create React App](http://github.com/facebookincubator/create-react-app) es un ambiente cómodo para **aprender React**, y es la mejor manera de comenzar a construir **una nueva [aplicación de página única](/docs/glossary.html#single-page-application)** usando React.
4141

42-
It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 and npm >= 5.2 on your machine. To create a project, run:
42+
**Create React App** configura tu ambiente de desarrollo de forma que puedas usar las últimas características de Javascript, brindando una buena experiencia de desarrollo, y optimizando tu aplicación para producción. Necesitarás tener Node >= 6 y npm >= 5.2 instalados en tu máquina. Para crear un proyecto ejecuta:
4343

4444
```bash
4545
npx create-react-app my-app
4646
cd my-app
4747
npm start
4848
```
4949

50-
>Note
50+
>Nota
5151
>
52-
>`npx` on the first line is not a typo -- it's a [package runner tool that comes with npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).
52+
>En la primera línea `npx` no es una errata: Es una [herramienta de ejecución de paquetes que viene con npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).
5353
54-
Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses [Babel](http://babeljs.io/) and [webpack](https://webpack.js.org/), but you don't need to know anything about them.
54+
Create React App no se encarga de la lógica de `backend` o de bases de datos; tan solo crea un flujo de construcción para `frontend`, de manera que lo puedes usar con cualquier `backend`. Para ello internamente usa [Babel](http://babeljs.io/) y [webpack](https://webpack.js.org/), pero no necesitas saber nada de estas herramientas para usar Create React App.
5555

56-
When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents).
56+
Cuando estés listo para desplegar a producción, ejecuta `npm run build` lo cual crea una compilación optimizada de tu aplicación en el directorio `build`. Puedes aprender más acerca de **Create React App** [en su archivo README](https://github.com/facebookincubator/create-react-app#create-react-app-) y en la [Guía del Usuario](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents).
5757

5858
### Next.js
5959

60-
[Next.js](https://nextjs.org/) is a popular and lightweight framework for **static and server‑rendered applications** built with React. It includes **styling and routing solutions** out of the box, and assumes that you're using [Node.js](https://nodejs.org/) as the server environment.
61-
62-
Learn Next.js from [its official guide](https://nextjs.org/learn/).
60+
[Next.js](https://nextjs.org/) es un *framework* popular y ligero para **aplicaciones estáticas y renderizadas en servidor** construidas con React. Integra **soluciones de estilo y enrutamiento** y asume que estás usando [Node.js](https://nodejs.org/) como ambiente de servidor.
61+
62+
Aprende Next.js de [su guía oficial](https://nextjs.org/learn/).
6363

6464
### Gatsby
6565

66-
[Gatsby](https://www.gatsbyjs.org/) is the best way to create **static websites** with React. It lets you use React components, but outputs pre-rendered HTML and CSS to guarantee the fastest load time.
67-
68-
Learn Gatsby from [its official guide](https://www.gatsbyjs.org/docs/) and a [gallery of starter kits](https://www.gatsbyjs.org/docs/gatsby-starters/).
66+
[Gatsby](https://www.gatsbyjs.org/) es la mejor manera de crear **sitios web estáticos** usando React. Te permite usar componentes React, pero genera HTML y CSS pre-renderizado para garantizar el tiempo de carga más rápido.
67+
68+
Aprende Gatsby de [su guía oficial](https://www.gatsbyjs.org/docs/) y de [la galería de kits de inicio](https://www.gatsbyjs.org/docs/gatsby-starters/).
6969

70-
### More Flexible Toolchains
70+
### Cadenas de Herramientas más Flexibles
7171

72-
The following toolchains offer more flexiblity and choice. We recommend them to more experienced users:
72+
Las siguientes cadenas de herramientas ofrecen más opciones y flexibilidad. Las recomendamos para los usuarios con más experiencia:
7373

74-
- **[Neutrino](https://neutrinojs.org/)** combines the power of [webpack](https://webpack.js.org/) with the simplicity of presets, and includes a preset for [React apps](https://neutrinojs.org/packages/react/) and [React components](https://neutrinojs.org/packages/react-components/).
74+
- **[Neutrino](https://neutrinojs.org/)** combina el poder de [webpack](https://webpack.js.org/) con la simplicidad de los *presets* (configuraciones preempaquetadas), e incluye *presets* para [aplicaciones React](https://neutrinojs.org/packages/react/) y [componentes React](https://neutrinojs.org/packages/react-components/).
7575

76-
- **[nwb](https://github.com/insin/nwb)** is particularly great for [publishing React components for npm](https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb). It [can be used](https://github.com/insin/nwb/blob/master/docs/guides/ReactApps.md#developing-react-apps-with-nwb) for creating React apps, too.
76+
- **[nwb](https://github.com/insin/nwb)** es particularmente bueno para [publicar componentes React en npm](https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb). También puede ser usado para [crear aplicaciones React](https://github.com/insin/nwb/blob/master/docs/guides/ReactApps.md#developing-react-apps-with-nwb).
7777

78-
- **[Parcel](https://parceljs.org/)** is a fast, zero configuration web application bundler that [works with React](https://parceljs.org/recipes.html#react).
78+
- **[Parcel](https://parceljs.org/)** es un empaquetador de aplicaciones web rápido y de cero configuración que [funciona con React](https://parceljs.org/recipes.html#react).
7979

80-
- **[Razzle](https://github.com/jaredpalmer/razzle)** is a server-rendering framework that doesn't require any configuration, but offers more flexibility than Next.js.
80+
- **[Razzle](https://github.com/jaredpalmer/razzle)** es un marco de trabajo de renderizado en servidor que no requiere ninguna configuración, pero ofrece más flexibilidad que Next.js.
8181

82-
## Creating a Toolchain from Scratch
82+
## Creando una Cadena de Herramientas desde Cero
8383

84-
A JavaScript build toolchain typically consists of:
84+
Una cadena de herramientas para construir Javascript generalmente consiste de:
8585

86-
* A **package manager**, such as [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/). It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
86+
* Un **gestor de paquetes** como [Yarn](https://yarnpkg.com/) o [npm](https://www.npmjs.com/). Este te permite aprovechar el vasto ecosistema de paquetes de terceros, e instalarlos o actualizarlos de una manera fácil.
8787

88-
* A **bundler**, such as [webpack](https://webpack.js.org/) or [Parcel](https://parceljs.org/). It lets you write modular code and bundle it together into small packages to optimize load time.
88+
* Un **empaquetador** como [webpack](https://webpack.js.org/) o [Parcel](https://parceljs.org/). Este te permite escribir código modular y empaquetarlo junto en paquetes más pequeños que optimizan el tiempo de carga.
8989

90-
* A **compiler** such as [Babel](http://babeljs.io/). It lets you write modern JavaScript code that still works in older browsers.
90+
* Un **compilador** como [Babel](http://babeljs.io/). Este te permite escribir Javascript moderno que aún así funciona en navegadores más antiguos.
9191

92-
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.
92+
Si prefieres configurar tu propia cadena de herramientas JavaScript desde cero, [chequea esta guía](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) que recrea parte de la funcionalidad de **Create React App**.
9393

94-
Don't forget to ensure your custom toolchain [is correctly set up for production](/docs/optimizing-performance.html#use-the-production-build).
94+
No te olvides de asegurarte que tu cadena de herramientas esté [configurada apropiadamente para producción](/docs/optimizing-performance.html#use-the-production-build).

0 commit comments

Comments
 (0)