Corrected spelling and made the text more comprehensible (#19878)

This commit is contained in:
Nico Alvarez
2018-12-06 16:51:58 +01:00
committed by Josh Alling
parent 5de9f32c06
commit 8231f9fedc

View File

@ -1,67 +1,68 @@
--- ---
title: Hello World title: Hello World
localeTitle: Hola Mundo localeTitle: Hola Mundo
--- ---
## Hola Mundo !! ## Hola Mundo !!
Cada aprendizaje de idiomas comienza con el ejemplo de Hello World tradicional. Aquí, te presentamos a React con el mismo programa HelloWorld. Cuando se comienza a aprender un lenguaje de programación el primer programa consiste del ejemplo de Hello World tradicional. Aquí, te presentamos React con el mismo programa HelloWorld.
Todo en React es un componente. Todo en React es un componente.
Pero antes de eso necesitamos asegurarnos de tener node.js y npm instalados en la computadora. Opcionalmente, podemos usar CRA (Crear aplicación React), que es una herramienta desarrollada por desarrolladores en Facebook para ayudarlo a crear aplicaciones React. Le ahorra una instalación y configuración que consumen mucho tiempo. Simplemente ejecuta un comando y crea una aplicación de react. Configura las herramientas que necesita para iniciar su proyecto React. Pero antes de eso necesitamos asegurarnos de tener node.js y npm instalados en la computadora. Opcionalmente, podemos usar CRA (Crear aplicación React), que es una herramienta desarrollada por desarrolladores en Facebook para ayudarlo a crear aplicaciones React. Le ahorra una instalación y configuración que consumen mucho tiempo. Simplemente ejecuta un comando y crea una aplicación de react. Configura las herramientas que necesita para iniciar su proyecto React.
Podemos instalarlo a través de los siguientes comandos. Podemos instalarlo a través de los siguientes comandos.
``` ```
npm install -g create-react-app npm install -g create-react-app
create-react-app my-app create-react-app my-app
cd my-app cd my-app
npm start npm start
``` ```
La línea de comandos debe darle una salida donde puede encontrar la aplicación en el navegador. El valor predeterminado debe ser localhost: 8080. Si solo está utilizando IE o Edge en su máquina con Windows, le recomiendo que instale Chrome también para acceder al entorno de desarrollador y las herramientas de desarrollo React, que están disponibles como extensión de Chrome. La línea de comandos debe darle una salida donde puede encontrar la aplicación en el navegador. El valor predeterminado debe ser localhost: 8080. Si solo está utilizando IE o Edge en su máquina con Windows, le recomiendo que instale Chrome también para acceder al entorno de desarrollador y las herramientas de desarrollo React, que están disponibles como extensión de Chrome.
![página de inicio alt reaccionar](https://cdn-images-1.medium.com/max/800/1*Qcry5pCXIy2KeNRsq3w7Bg.png) ![página de inicio alt reaccionar](https://cdn-images-1.medium.com/max/800/1*Qcry5pCXIy2KeNRsq3w7Bg.png)
#### src / App.js #### src / App.js
Copie el código de abajo y péguelo en src / App.js Copie el código de abajo y péguelo en src / App.js
```javascript ```javascript
import React from 'react'; import React from 'react';
class App extends React.Component{ class App extends React.Component{
constructor(props) { constructor(props) {
super(props); super(props);
} }
render(){ render(){
return( return(
<div> <div>
<p>Hello World !!</p> <p>Hello World !!</p>
</div> </div>
); );
} }
} }
export default App; export default App;
``` ```
Si revisamos el archivo index.js en la carpeta src, encontramos que el App.js anterior se llama a index.js y luego se procesa. Si revisamos el archivo index.js en la carpeta src, encontramos que el App.js anterior se llama a index.js y luego se procesa.
```javascript ```javascript
// Other code // Other code
import App from './App'; // The App component is imported import App from './App'; // The App component is imported
// Other code // Other code
ReactDOM.render(<App />, ReactDOM.render(<App />,
document.getElementById('root')); //The <App /> is the way components are called in react after importing them document.getElementById('root')); //The <App /> is the way components are called in react after importing them
// Other code // Other code
``` ```
En lo anterior, App.js se llama un componente. Normalmente, creamos varios componentes y los reunimos en App.js, que luego se procesarán en index.js, que luego se procesa en el div root que se encuentra en index.html. En lo anterior, App.js se llama un componente. Normalmente, creamos varios componentes y los reunimos en App.js, que luego se procesarán en index.js, que luego se procesa en el div root que se encuentra en index.html.
Felicidades !! Has creado tu primera aplicación React Hello world. Aprendes más sobre React en los próximos artículos. Felicidades !! Has creado tu primera aplicación React Hello world. Aprendes más sobre React en los próximos artículos.
Feliz codificacion !!