Corrected spelling and made the text more comprehensible (#19878)
This commit is contained in:
committed by
Josh Alling
parent
5de9f32c06
commit
8231f9fedc
@ -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.
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
#### 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 !!
|
||||||
|
Reference in New Issue
Block a user