-
Notifications
You must be signed in to change notification settings - Fork 303
Translate: Create a New React App #68
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 2 commits
8a9b5a2
27f9041
80c1520
372637f
9dffad9
a4693bb
23ab46d
7f465dd
522222a
5defadc
4eeeed4
bd35c40
58ce480
42e36c5
dbdc54f
5ced4b5
d0742c1
c5cef11
8a0b61c
3af4ff6
7412fdb
ef4cd42
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,94 +1,96 @@ | ||||||
| --- | ||||||
| id: create-a-new-react-app | ||||||
| title: Create a New React App | ||||||
| title: Crear una Nueva Aplicación React | ||||||
| permalink: docs/create-a-new-react-app.html | ||||||
| redirect_from: | ||||||
| - "docs/add-react-to-a-new-app.html" | ||||||
| prev: add-react-to-a-website.html | ||||||
| next: cdn-links.html | ||||||
| --- | ||||||
|
|
||||||
| Use an integrated toolchain for the best user and developer experience. | ||||||
| Para obtener la mejor experiencia de usuario y desarrollador use una cadena de herramientas integrada. | ||||||
|
|
||||||
| This page describes a few popular React toolchains which help with tasks like: | ||||||
| Esta página describe algunas cadenas de herramientas de React populares, las cuales ayudan con tareas como: | ||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The most common order for the adjective in Spanish is after the noun.
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Lo sé, pero hice la sugerencia porque la frase modificada por «populares» (cadenas de herramientas de React) hace un poco ambigua la frase: ¿Son populares las herramientas o las cadenas?
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. In this case: "cadenas de herramientas de React" is the noun. Maybe the following wording is clearer:
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah, I would go with that. |
||||||
|
|
||||||
| * 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 multiples archivos y componentes. | ||||||
|
elyalvarado marked this conversation as resolved.
Outdated
|
||||||
| * Usar bibliotecas de terceros de npm. | ||||||
|
elyalvarado marked this conversation as resolved.
Outdated
|
||||||
| * Detección temprana de errores comunes. | ||||||
| * Edición en vivo de CSS y JS en desarrollo. | ||||||
| * Optimización de la salida para producción. | ||||||
|
|
||||||
| The toolchains recommended on this page **don't require configuration to get started**. | ||||||
| Las cadenas de herramientas en esta página **no requieren ninguna configuración para empezar**. | ||||||
|
elyalvarado marked this conversation as resolved.
Outdated
|
||||||
|
|
||||||
| ## You Might Not Need a Toolchain | ||||||
|
|
||||||
| 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). | ||||||
| ## Puede que no necesites una Cadena de Herramientas | ||||||
|
elyalvarado marked this conversation as resolved.
|
||||||
|
|
||||||
| 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! | ||||||
| Si no sufres de 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). | ||||||
|
elyalvarado marked this conversation as resolved.
Outdated
|
||||||
|
|
||||||
| ## Recommended Toolchains | ||||||
| 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 después si lo consideras necesario. | ||||||
|
elyalvarado marked this conversation as resolved.
Outdated
|
||||||
|
|
||||||
| The React team primarily recommends these solutions: | ||||||
| ## Cadenas de Herramientas Recomendadas | ||||||
|
|
||||||
| - 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). | ||||||
| - If you're building a **server-rendered website with Node.js,** try [Next.js](#nextjs). | ||||||
| - If you're building a **static content-oriented website,** try [Gatsby](#gatsby). | ||||||
| - If you're building a **component library** or **integrating with an existing codebase**, try [More Flexible Toolchains](#more-flexible-toolchains). | ||||||
| El equipo de React principalmente recomienda las siguientes soluciones: | ||||||
|
|
||||||
| - 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). | ||||||
| - Si estás construyendo un **sito web renderizado en servidor con Node.js,** prueba [Next.js](#nextjs). | ||||||
| - Si estás construyendo un **sitio web orientado a contenido estático,** prueba [Gatsby](#gatsby). | ||||||
| - 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). | ||||||
|
elyalvarado marked this conversation as resolved.
|
||||||
|
|
||||||
| ### Create React App | ||||||
|
|
||||||
| [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. | ||||||
| [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. | ||||||
|
|
||||||
| 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: | ||||||
| **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. Necesitaras tener Node >= 6 y npm >= 5.2 instalados en tu máquina. Para crear un proyecto ejecuta: | ||||||
|
elyalvarado marked this conversation as resolved.
Outdated
|
||||||
|
|
||||||
| ```bash | ||||||
| npx create-react-app my-app | ||||||
| cd my-app | ||||||
| npm start | ||||||
| ``` | ||||||
|
|
||||||
| >Note | ||||||
| >Nota | ||||||
| > | ||||||
| >`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). | ||||||
| >`npx` en la primera línea no es un error de tipeo -- 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). | ||||||
|
elyalvarado marked this conversation as resolved.
Outdated
|
||||||
|
|
||||||
| 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. | ||||||
| Create React App no se encarga de la lógica de `backend` o de base 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. | ||||||
|
elyalvarado marked this conversation as resolved.
Outdated
|
||||||
|
|
||||||
| 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). | ||||||
| Cuando estes 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 LEEME](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). | ||||||
|
elyalvarado marked this conversation as resolved.
Outdated
|
||||||
|
|
||||||
| ### Next.js | ||||||
|
|
||||||
| [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. | ||||||
|
|
||||||
| Learn Next.js from [its official guide](https://nextjs.org/learn/). | ||||||
| [Next.js](https://nextjs.org/) es un marco de trabajo ligero popular para **aplicaciones estáticas y renderizadas en servidor** construidas con React. Incluye de paquete **soluciones de estilo y enrutamiento**, y asume que estas usando [Node.js](https://nodejs.org/) como ambiente de servidor. | ||||||
|
elyalvarado marked this conversation as resolved.
Outdated
|
||||||
| Aprende Next.js de [su guía oficial](https://nextjs.org/learn/). | ||||||
|
|
||||||
| ### Gatsby | ||||||
|
|
||||||
| [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. | ||||||
| [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. | ||||||
|
|
||||||
| 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/). | ||||||
|
carburo marked this conversation as resolved.
|
||||||
|
|
||||||
| Learn Gatsby from [its official guide](https://www.gatsbyjs.org/docs/) and a [gallery of starter kits](https://www.gatsbyjs.org/docs/gatsby-starters/). | ||||||
| ### Cadenas de Herramientas más Flexibles | ||||||
|
|
||||||
| ### More Flexible Toolchains | ||||||
| Las siguientes cadenas de herramientas ofrecen más opciones y flexibilidad. Las recomendamos para los usuarios con más experiencia: | ||||||
|
|
||||||
|
elyalvarado marked this conversation as resolved.
|
||||||
| The following toolchains offer more flexiblity and choice. We recommend them to more experienced users: | ||||||
|
|
||||||
| - **[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/). | ||||||
| - **[Neutrino](https://neutrinojs.org/)** combina el poder de [webpack](https://webpack.js.org/) con la simplicidad de los `presets` (configuraciones pre-empaquetadas), e incluye presets para [aplicaciones React](https://neutrinojs.org/packages/react/) y [componentes React](https://neutrinojs.org/packages/react-components/). | ||||||
|
elyalvarado marked this conversation as resolved.
Outdated
|
||||||
|
|
||||||
| - **[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. | ||||||
| - **[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). | ||||||
|
|
||||||
| - **[Parcel](https://parceljs.org/)** is a fast, zero configuration web application bundler that [works with React](https://parceljs.org/recipes.html#react). | ||||||
| - **[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). | ||||||
|
|
||||||
| - **[Razzle](https://github.com/jaredpalmer/razzle)** is a server-rendering framework that doesn't require any configuration, but offers more flexibility than Next.js. | ||||||
| - **[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. | ||||||
|
|
||||||
| ## Creating a Toolchain from Scratch | ||||||
| ## Creando una Cadena de Herramientas desde Cero | ||||||
|
|
||||||
| A JavaScript build toolchain typically consists of: | ||||||
| Una cadena de herramientas para construir Javascript generalmente consiste de: | ||||||
|
|
||||||
| * 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. | ||||||
| * Un **gestor de paquetes**, tal 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. | ||||||
|
elyalvarado marked this conversation as resolved.
Outdated
|
||||||
|
|
||||||
| * 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. | ||||||
| * Un **empaquetador**, tal 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. | ||||||
|
elyalvarado marked this conversation as resolved.
Outdated
|
||||||
|
|
||||||
| * A **compiler** such as [Babel](http://babeljs.io/). It lets you write modern JavaScript code that still works in older browsers. | ||||||
| * Un **compilador**, tal como [Babel](http://babeljs.io/). Este te permite escribir Javascript moderno que aún así funciona en navegadores más viejos. | ||||||
|
elyalvarado marked this conversation as resolved.
Outdated
|
||||||
|
|
||||||
| 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 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**. | ||||||
|
|
||||||
| Don't forget to ensure your custom toolchain [is correctly set up for production](/docs/optimizing-performance.html#use-the-production-build). | ||||||
| No te olvides de asegurarte que tu cadena de herramientas este [configurada apropiadamente para producción](/docs/optimizing-performance.html#use-the-production-build). | ||||||
|
elyalvarado marked this conversation as resolved.
Outdated
|
||||||
Uh oh!
There was an error while loading. Please reload this page.