Skip to content

Commit fb967c6

Browse files
brauliodiezbrauliodiez
authored
Merge pull request #57 from dailymp/master
Issue # 41 : all steps reviewed, corrections have been made and readm…
2 parents aa7d1bb + 8084cf5 commit fb967c6

File tree

3 files changed

+82
-84
lines changed

3 files changed

+82
-84
lines changed

‎01 HelloReact/package-lock.json‎

Lines changed: 0 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎01 HelloReact/readme.md‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
In this sample we will create our first react component and connect it with the
44
DOM via react-dom.
55

6-
We will take a startup point sanple _00 Boilerplate
6+
We will take a startup point sample _00 Boilerplate
77

88
Summary steps:
99

@@ -29,12 +29,20 @@ npm install
2929

3030
- Let's install react and react-dom libraries:
3131

32-
```bash
32+
````
3333
npm install react react-dom --save
34-
```
34+
````
35+
- Let's install react and react-dom typescript definitions:
36+
37+
````
38+
npm install @types/react-dom @types/react --save -dev
39+
````
40+
- Update the index.html to create a placeholder for the react components
41+
3542

3643
- Update the [./index.html](./index.html) to create a placeholder for the react components
3744

45+
3846
_[./index.html](./index.html)_
3947
```diff
4048
<!DOCTYPE html>
@@ -89,19 +97,22 @@ _[./webpack.config.js](./webpack.config.js)_
8997
To handle jsx react components with webpack need to install babel-plugin-transform-runtime and babel-preset-react.
9098

9199
```
92-
npm install babel-preset-react --save-dev
100+
npm install babel-plugin-transform-runtime babel-preset-react babel-preset-es2015 --save-dev
93101
```
94102

95103
Then in [./webpack.config.js](./webpack.config.js):
96104

97-
_[./webpack.config.js](./webpack.config.js)_
98-
```javascript
99-
loaders: [
100-
{
101-
test: /\.jsx$/,
102-
loader: "babel-loader",
103-
exclude: /node_modules/,
104-
},
105+
```javascript
106+
rules: [
107+
{
108+
test: /\.jsx$/,
109+
exclude: /node_modules/,
110+
loader: 'babel-loader',
111+
query: {
112+
plugins: ['transform-runtime'],
113+
presets : ['es2015', 'react']
114+
}
115+
},
105116
```
106117

107118
- Let's update _[./.babelrc](./.babelrc)_

‎01 HelloReact/readme_es.md‎

Lines changed: 59 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,43 @@
11
# 01 Hello React
22

3-
En esta muestra, crearemos nuestro primer componente de react y lo conectaremos con el
4-
DOM a través de react-dom.
3+
En este ejemplo crearemos nuestro primer componente react y lo conectaremos con el
4+
DOM via react-dom.
55

6-
Tomaremos un punto de inicio sanple _[00 Boilerplate/](./../00%20Boilerplate/)_
6+
Tomaremos como punto de partida el ejemplo _00 Boilerplate
77

8-
Pasos resumidos:
8+
Resumen de pasos:
99

1010
- Instalar react y react-dom.
11-
- Instalar definiciones de react y react-dom typescript.
12-
- Actualice index.html para crear un marcador de posición para react component
13-
- Crea un componente de react simple.
14-
- Conecte este componente usando react-dom.
11+
- Instalar definiciones de typescript de react y react-dom.
12+
- Actualizar el index.html para crear un sitio para los componentes react.
13+
- Crear un componente simple de react.
14+
- Conectar este componente usando react-dom.
1515

16-
## Requisitos previos
16+
## Prerrequisitos
1717

18-
Instale [Node.js y npm](https://nodejs.org/en/) (v6.6.0) si aún no están instalados en su computadora.
18+
Instalar [Node.js and npm](https://nodejs.org/en/) (v6.6.0) si aún no están instalados en tu ordenador.
1919

20-
> Verifique que esté ejecutando al menos los nodos v6.x.x y npm 3.x.x ejecutando `node -v` y` npm -v` en una ventana de terminal/ consola. Las versiones anteriores pueden producir errores.
20+
> Verificar que estás usando node v6.x.x y npm 3.x.x ejecutando `node -v` y `npm -v` en un terminal/console. Versiones viejas pueden provocar errores.
2121
22-
## Steps to build it
22+
## Pasos para desarrollarlo:
2323

24-
- Copie el contenido de _[00 Boilerplate/](./../00%20Boilerplate/)_ y ejecute `npm install`.
24+
- Copiar el contenido desde _00 Boilerplate_ y ejecutar _npm install_.
2525

26-
```bash
27-
npm install
28-
```
2926

30-
- Instalemos react y react-dom:
27+
- Instalar las librerias react y react-dom:
3128

32-
```bash
29+
````
3330
npm install react react-dom --save
34-
```
31+
````
32+
- Instalar las definiciones de typescript de react y react-dom:
33+
34+
````
35+
npm install @types/react-dom @types/react --save -dev
36+
````
3537

36-
- Actualice el [./index.html](./index.html) para crear un marcador para los componentes de react.
38+
- Actualizar el index.html para crear un sitio para los componentes de react
3739

38-
_[./index.html](./index.html)_
39-
```diff
40+
```html
4041
<!DOCTYPE html>
4142
<html>
4243
<head>
@@ -45,88 +46,75 @@ _[./index.html](./index.html)_
4546
</head>
4647
<body>
4748
<h1>Sample app</h1>
48-
+ <div id="root">
49-
+ </div>
49+
<div id="root">
50+
</div>
5051
</body>
5152
</html>
5253
```
5354

54-
- Crea un componente de reacción simple (vamos a crearlo bajo un nuevo archivo llamado _[./src/hello.jsx](./src/hello.jsx)_)
55+
- Crear un componente react simple (lo creamos en un archivo llamado _hello.jsx_)
5556

56-
_[./src/hello.jsx](./src/hello.jsx)_
5757
```javascript
5858
import React from 'react';
5959

60-
export const HelloComponent = () =>
61-
<p> Hello React!</p>
60+
class HelloComponent extends React.Component {
61+
render () {
62+
return (<p> Hello React!</p>);
63+
}
64+
}
65+
66+
export default HelloComponent;
6267
```
6368

64-
- Alinee este componente usando react-dom en _[./src/main.jsx](./src/main.jsx)_ (tenemos que cambiar el nombre de este archivo
65-
de **js** a **jsx** y reemplazar el contenido).
69+
- Conectamos este componente usando react-dom en el _main.jsx_ (tenemos que renombrar este fichero
70+
de js a jsx y remplazar el contenido).
6671

67-
_[./src/main.jsx](./src/main.jsx)_
6872
```javascript
6973
import React from 'react';
7074
import ReactDOM from 'react-dom';
71-
import {HelloComponent} from './hello.jsx';
75+
import HelloComponent from './hello.jsx';
7276

7377
ReactDOM.render(<HelloComponent/>, document.getElementById('root'));
7478
```
7579

76-
- Modifique el archivo [./webpack.config.js](./webpack.config.js) y cambie el punto de entrada de [./src/main.js](./src/main.jsx)
77-
a [./src/main.jsx](./src/main.jsx).
80+
- Modificar el `webpack.config.js` y cambiar el punto de entrada de `./main.js`
81+
a `./main.jsx`.
7882

79-
_[./webpack.config.js](./webpack.config.js)_
80-
```diff
83+
```javascript
8184
entry: [
82-
- './main.js',
83-
+ './main.jsx',
85+
'./main.jsx',
8486
'../node_modules/bootstrap/dist/css/bootstrap.css'
8587
],
8688
```
87-
88-
También deberá modificar el primer cargador de babel para manejar los archivos **jsx**.
89-
Para manejar **jsx**, los componentes de reacción con webpack necesitan instalar babel-plugin-transform-runtime y babel-preset-react.
89+
90+
También necesitas modificar el primer babel loader para manejar ficheros jsx.
91+
Para manejar estos ficheros con webpack es necesario instalar babel-plugin-transform-runtime y babel-preset-react.
9092

9193
```
92-
npm install babel-preset-react --save-dev
94+
npm install babel-plugin-transform-runtime babel-preset-react babel-preset-es2015 --save-dev
9395
```
9496

95-
Entonces en[./webpack.config.js](./webpack.config.js):
97+
Luego en `webpack.config.js`:
9698

97-
_[./webpack.config.js](./webpack.config.js)_
98-
```javascript
99-
loaders: [
100-
{
101-
test: /\.jsx$/,
102-
loader: "babel-loader",
103-
exclude: /node_modules/,
104-
},
105-
```
106-
107-
- Actualicemos _[./.babelrc](./.babelrc)_
108-
109-
_[./.babelrc](./.babelrc)_
110-
```diff
111-
{
112-
"presets": [
113-
[
114-
"env",
99+
```javascript
100+
rules: [
115101
{
116-
"modules": false
117-
}
118-
],
119-
+ "react"
120-
]
121-
}
102+
test: /\.jsx$/,
103+
exclude: /node_modules/,
104+
loader: 'babel-loader',
105+
query: {
106+
plugins: ['transform-runtime'],
107+
presets : ['es2015', 'react']
108+
}
109+
},
122110
```
123111

124-
- Ejecute el ejemplo:
112+
- Ejecutar el ejemplo:
125113

126114
```bash
127-
npm start
115+
$ npm start
128116
```
129117

130-
- Luego, carga [http://localhost:8080/](http://localhost:8080/) en un navegador para ver la salida.
118+
- Finalmente, carga http://localhost:8080/ en un navegador para ver el resultado.
131119

132-
![Salida del navegador](../99_readme_resources/01 HelloReact/ browser_output.png)
120+
![Browser Output](../99_readme_resources/01 HelloReact/browser_output.png "Browser Output")

0 commit comments

Comments
 (0)