Cada recurso utilizado en Internet tiene un tipo de medio, también conocido como tipo MIME, que significa Extensión multipropósito de correo de Internet (por sus siglas en inglés Multipurpose Internet Mail Exension). Esta información es necesaria para las transacciones entre el servidor y el cliente.

El navegador necesita conocer el tipo de medio de los recursos que se le envían para que pueda manejarlos correctamente.

Lo mismo ocurre con el servidor. Necesita saber el tipo de recursos que se le envían para un análisis y procesamiento precisos.

¿Dónde se declara el tipo de contenido (Content-Type)?

El tipo de medio de cualquier recurso se declara en la propiedad Content-Type del encabezado de la solicitud (en el cliente, al realizar una solicitud al servidor) o en el encabezado de respuesta (en el servidor, al enviar una respuesta).

Sin declarar explícitamente el tipo de contenido de un recurso, el cliente puede intentar detectar automáticamente el tipo, pero el resultado puede no ser exacto. Por eso es importante declararlo explícitamente.

Tipos de medios

Los tipos de medios existen en varias formas. Se clasifican en varios grupos:

• application (aplicación)
• audio
• font (fuente)
• example (ejemplo)
• image (imagen)
• message (mensaje)
• model (modelo)
• multipart
• text (texto)
• y video

Estas categorías también tienen sus tipos. Por ejemplo, application/jsones un tipo dentro de applicationy text/htmles un tipo dentro de text.

Puedes encontrar una lista completa de tipos de medios en los tipos de medios de la IANA (un organismo que coordina algunos de los elementos clave en Internet).

Todos estos tipos cubren varios tipos de datos como texto, audio, imágenes, HTML y muchos más tipos que se utilizan en Internet.

El navegador necesita saber el tipo de medio de un recurso

Como mencioné anteriormente, el navegador necesita saber qué tipo de contenido recibe. He aquí un ejemplo para ilustrar eso.

El siguiente código es un servidor Node que sirve un archivo HTML:

const http = require("http");
const fs = require("fs");
const path = require("path");

const server = http.createServer(function (req, res) {
	const filePath = path.join(__dirname, "index.html");
	var stat = fs.statSync(filePath);

	res.writeHead(200, {
		"Content-Type": "text/css",
		"Content-Length": stat.size,
	});

	const readStream = fs.createReadStream(filePath);
	readStream.pipe(res);
});

server.listen(5000);

console.log("Node.js web server at port 5000 is running..");

No te preocupes por los detalles del código. Todo lo que debe preocuparte es el archivo index.htm que estamos sirviendo y que el Content-Typees text/css.

Aquí está el contenido del index.html:

<h1>Homepage</h1>

Por supuesto, un documento HTML es diferente de un archivo CSS. Aquí está el resultado de localhost:5000cuando el servidor está iniciado:

También puedes confirmar la respuesta obtenida al verificar los encabezados en la pestaña de red de DevTools.

Aquí está el resultado en un navegador Chrome:

El navegador obtuvo el contenido como un tipo CSS, por lo tanto, intentó tratarlo como CSS.

Además, ten en cuenta que el conocimiento completo del tipo de contenido obtenido por el navegador también reduce las vulnerabilidades de seguridad, ya que el navegador conoce los estándares de seguridad que debe implementar para esos datos.

Ahora que comprendes el concepto de tipos MIME y su importancia, pasemos a JSON.

El tipo de contenido correcto para JSON

JSON tiene que ser interpretado correctamente por el navegador para ser utilizado adecuadamente. text/plainse usaba normalmente para JSON, pero según IANA, el tipo MIME oficial para JSON es application/json.

Esto significa que cuando envías JSON al servidor o recibes JSON del servidor, siempre debe estar declarado el Content-Type del encabezado, como application/json por ser el estándar que entienden el cliente y el servidor.

Conclusión

Como se indicó anteriormente, el servidor (al igual que el navegador) necesita saber el tipo de datos que se le envía, por ejemplo, en una solicitud POST. Esa es la razón por la que los forms con archivos suelen contener el atributo enctype con un valor de multipart/form-data.

Sin codificar la solicitud de esta manera, la solicitud POST no funcionará. Además, una vez que el servidor conoce el tipo de datos que ha obtenido, sabe cómo analizar los datos codificados.

En este artículo, analizamos qué son los tipos MIME y su propósito. Además, analizamos el tipo de contenido oficial para JSON. Espero que ahora sepas por qué es importante declarar los tipos de recursos cuando se usan en Internet.

Desde que comencé a trabajar con ReactJS , en Creative-Tim , solo lo he usado para crear aplicaciones de react simples , o plantillas , por así decirlo. He usado ReactJS solo con create-react-app y nunca he intentado integrarlo con algo más.

Muchos de nuestros usuarios nos han preguntado a mi equipo o a mí si las plantillas creadas por mí tenían Redux . O si se crearon de tal manera que pudieran usarse con Redux. Y mi respuesta siempre era algo así como: “Todavía no he trabajado con Redux y no sé qué respuesta darte”.

Así que aquí estoy ahora, escribiendo un artículo sobre Redux y cómo debería usarse en React. Más adelante, en este artículo, agregaré Redux en uno de los proyectos en los que he trabajado durante el último y algunos años.

Es bueno saber antes de seguir adelante y pelearse con estas dos bibliotecas que:

• Voy a usar create-react-app@2.1. 1 (instalado globalmente)
• Estoy usando npm@6.4.1
• Mi versión de Node.js en el momento de escribir esta publicación era 10.13.0 (LTS)
• Si quieres usar Webpack en su lugar, puedes leer mi artículo de Webpack y combinar lo que te muestro allí con lo que te mostraré aquí.

Crear un nuevo proyecto basado en ReactJS y agregarle Redux

Lo primero es lo primero, creamos una nueva aplicación de react, cd en ella e iniciamos.

create-react-app react-redux-tutorial
cd react-redux-tutorial
npm start

Como podemos ver, create-react-app nos proporciona una plantilla muy básica con un párrafo, un ancla al sitio web de React y el icono oficial de ReactJS rotando.

No os he dicho para qué vamos a usar Redux, o qué estamos haciendo aquí. Ha sido porque necesitaba la imagen gif de arriba.

Para que este tutorial sea ligero y fácil de entender, no vamos a construir algo muy complejo. Vamos a usar Redux para hacer que la imagen de React anterior se detenga o comience a girar.

Dicho esto, sigamos adelante y agreguemos los siguientes paquetes de Redux :

npm install --save redux react-redux

redux v4.0.1

• Lo que hace Redux en un sentido muy general, es crear un estado global para toda la aplicación, al que puede acceder cualquiera de sus componentes.
• Es una biblioteca de gestión de estado.
• Solo tiene un estado para toda su aplicación, y no estados para cada uno de sus componentes

react-redux v5.1.1

• Esto se usa para que podamos acceder a los datos de Redux y modificarlos enviando acciones a Redux, en realidad no a Redux, pero llegaremos a esto.
• Según la documentación oficial: Permite que sus componentes React lean datos de un almacén Redux y envíen acciones al almacén para actualizar datos

NOTA : Si tienes problemas con el comando anterior, intenta instalar los paquetes por separado

Cuando trabajes con Redux, necesitarás tres cosas principales:

• acciones: Estos son objetos que deben tener dos propiedades, una que describe el tipo de acción y otra que describe lo que debe cambiarse en el estado de la aplicación.
• reductores: Son funciones que implementan el comportamiento de las acciones. Cambian el estado de la aplicación, según la descripción de la acción y la descripción del cambio de estado.
• almacén: Reúne las acciones y los reductores, mantiene y cambia el estado de toda la aplicación; solo hay un almacén.

Como he dicho antes, vamos a detener y comenzar a girar el logotipo de React. Esto significa que vamos a necesitar dos acciones de la siguiente manera:

1 — Comandos de Linux/Mac

mkdir src/actions
touch src/actions/startAction.js
touch src/actions/stopAction.js

2 — Comandos de Windows

mkdir src\actions
echo "" > src\actions\startAction.js
echo "" > src\actions\stopAction.js

Ahora editemos src/actions/startAction.js de la siguiente manera:

export const startAction = {
  type: "rotate",
  payload: true
};

A continuación, vamos a decirle a nuestro reductor que el tipo de acción es sobre la rotación ( rotate ) del logo de React. Y el estado para la rotación del logotipo de React debe cambiarse a verdadero : Queremos que el logotipo comience a girar.

Entonces editemos src/actions/stopAction.js de la siguiente manera:

export const stopAction = {
  type: "rotate",
  payload: false
};

Ahora, vamos a decirle a nuestro reductor que el tipo de acción es sobre la rotación (rotate) del logo de React. Y el estado para la rotación del logotipo de React debe cambiarse a falso : Queremos que el logotipo deje de girar.

También creamos el reductor para nuestra aplicación:

1 — Comandos de Linux/Mac

mkdir src/reducers
touch src/reducers/rotateReducer.js

2 — Comandos de Windows

mkdir src\reducers
echo "" > src\reducers\rotateReducer.js

Y, agregamos el siguiente código dentro de él:

export default (state, action) => {
  switch (action.type) {
    case "rotate":
      return {
        rotating: action.payload
      };
    default:
      return state;
  }
};

Entonces, el reductor recibirá nuestras dos acciones, ambas del tipo rotar, y ambas cambian el mismo estado en la aplicación, que es state.rotating . Según la carga útil de estas acciones, state.rotating cambiará a true o false .

He agregado un caso predeterminado , que mantendrá el estado inalterado si el tipo de acción es no rotar . El valor predeterminado está allí en caso de que creemos una acción y olvidemos agregar un caso para esa acción. De esta manera, no eliminamos todo el estado de la aplicación, simplemente no hacemos nada y mantenemos lo que teníamos.

Lo último que debemos hacer es crear nuestro almacén para toda la aplicación. Dado que solo hay un almacén/un estado para toda la aplicación, no vamos a crear una nueva carpeta para el almacén. Si quieres, puedes crear una carpeta nueva para el almacén y agregarla allí, pero no es como con las acciones, por ejemplo, donde puedes tener múltiples acciones y parece mejor mantenerlas dentro de una carpeta.

Dicho esto, vamos a ejecutar este comando:

1 — Comando Linux/Mac

touch src/store.js

2 — Comando de Windows

echo "" > src\store.js

Y también agregamos el siguiente código dentro de él:

import { createStore } from "redux";
import rotateReducer from "reducers/rotateReducer";

function configureStore(state = { rotating: true }) {
  return createStore(rotateReducer,state);
}

export default configureStore;

Entonces, creamos una función llamada configureStore en la que enviamos un estado predeterminado, y creamos nuestro almacén usando el reductor creado y el estado predeterminado.

No estoy seguro si has visto mis importaciones, usan rutas absolutas, por lo que es posible que tengas algunos errores debido a esto. La solución para esto es una de las dos:

Cualquiera

1 — Agrega un archivo .env a tu aplicación así:

echo "NODE_PATH=./src" > .env

O

2 — Instala cross-env globalmente y cambia el script de inicio del archivo package.json así:

npm install -g cross-env

Y dentro del paquete.json

"start": "NODE_PATH=./src react-scripts start",

Ahora que hemos configurado nuestro almacén, nuestras acciones y nuestro reductor, necesitamos agregar una nueva clase dentro del archivo src/App.css . Esta clase pausará la animación giratoria del logo.

Así que vamos a escribir lo siguiente dentro de src/App.css :

.App-logo-paused {
  animation-play-state: paused;
}

Entonces, tu archivo App.css debería verse así:

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
}

/* new class here */
.App-logo-paused {
  animation-play-state: paused;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Ahora, solo necesitamos modificar nuestro archivo src/App.js para que escuche el estado de nuestro almacén. Y al hacer clic en el logotipo, llama a una de las acciones de inicio o detención.

Lo primero es lo primero, necesitamos conectar nuestro componente a nuestro almacén redux para importar la conexión desde react-redux .

import { connect } from "react-redux";

Después de esto, exportaremos nuestro componente de aplicación a través del método de conexión de esta manera:

export default connect()(App);

Para cambiar el estado del almacén redux, necesitaremos las acciones que hemos realizado anteriormente, así que importémoslas también:

import { startAction } from "actions/startAction";
import { stopAction } from "actions/stopAction";

Ahora necesitamos recuperar el estado de nuestro almacén y decir que queremos que las acciones de inicio y detención se usen para cambiar el estado.

Esto se hará usando la función de conexión, que acepta dos parámetros:

• mapStateToProps: Este se usa para recuperar el estado del almacén
• mapDispatchToProps: Este se usa para recuperar las acciones y enviarlas al almacén

Puedes leer más sobre ellos aquí: conectar argumentos de función de react-redux.

Ahora, escribamos dentro de nuestro App.js (al final del archivo, si puedes):

const mapStateToProps = state => ({
  ...state
});

const mapDispatchToProps = dispatch => ({
  startAction: () => dispatch(startAction),
  stopAction: () => dispatch(stopAction)
});

Después de esto, agreguémoslos dentro de nuestra función de conexión así:

export default connect(mapStateToProps, mapDispatchToProps)(App);

Y ahora ya, dentro de nuestro componente App, podemos acceder al estado del almacén, startAction y stopAction a través de props.

Cambiemos la etiqueta img a:

<img 
  src={logo} 
  className={
    "App-logo" + 
    (this.props.rotating ? "":" App-logo-paused")
  } 
  alt="logo" 
  onClick={
    this.props.rotating ? 
      this.props.stopAction : this.props.startAction
  }
/>

Aquí, lo que estamos diciendo es que, si el estado de rotación del almacén (this.props.rotating ) es verdadero, entonces solo queremos que la className App-logo se establezca en nuestra img . Si eso es falso, también queremos que la clase App-logo-paused se establezca en className . De esta manera pausamos la animación.

Además, si this.props.rotating es verdadero , luego queremos enviar a nuestro almacén por la función onClick y volver a cambiarlo a falso , y viceversa.

Casi hemos terminado, pero nos hemos olvidado de algo.

Todavía no le hemos dicho a nuestra aplicación de react que tenemos un estado global o, si lo prefieres, que usamos la administración de estado redux.

Para ello, ingresamos a src/index.js , importamos un Provider de react-redux y el almacén recién creado así:

import { Provider } from "react-redux";

import configureStore from "store";

• Provider : Hace que el almacén Redux esté disponible para cualquier componente anidado que se haya incluido en la función de conexión

Después de esto, en lugar de renderizar nuestro componente App directamente, lo renderizamos a través de nuestro Provider usando el almacén que hemos creado así:

ReactDOM.render(
  <Provider store={configureStore()}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Aquí podríamos haber usado la función configureStore con algún otro estado, por ejemplo configureStore({rotating: false }) .

Entonces, el index.js debería verse así:

import React from 'react';
import ReactDOM from 'react-dom';
// new imports start (Inicio nuevas importaciones)
import { Provider } from "react-redux";

import configureStore from "store";
// new imports stop (Fin de nuevas importaciones)

import './index.css';

import App from './App';
import * as serviceWorker from './serviceWorker';

// changed the render (Cambiado el render)
ReactDOM.render(
  <Provider store={configureStore()}>
    <App />
  </Provider>,
  document.getElementById('root')
);
// changed the render (Cambiado el render)

serviceWorker.unregister();

Avancemos y veamos si nuestra aplicación redux funciona:

Uso de creadores de acciones

Opcionalmente, en lugar de acciones , podemos usar creadores de acciones , que son funciones que crean acciones.

De esta forma, podemos combinar nuestras dos acciones en una sola función y reducir un poco nuestro código.

Entonces, sigamos adelante y creemos un nuevo archivo:

1 — Comando Linux/Mac

touch src/actions/rotateAction.js

2 — Comando de Windows

echo "" > src\actions\rotateAction.js

Y añadimos este código:

const rotateAction = (payload) => {
  return {
    type: "rotate",
    payload
  }
}
export default rotateAction;

Vamos a enviar una acción de tipo rotar, con un payload que vamos a obtener en el componente App.

Dentro del componente src/App.js, necesitamos importar nuestro nuevo creador de acciones:

import rotateAction from "actions/rotateAction";

Agregamos la nueva función a mapDispatchToProps así:

rotateAction: Recibirá una (payload) y enviará la acción rotateAction con la payload

Cambiamos la función onClick a:

onClick={() => this.props.rotateAction(!this.props.rotating)}

Y finalmente, agregamos nuestro nuevo creador de acciones al mapDispatchToProps de esta manera:

rotateAction: (payload) => dispatch(rotateAction(payload))

También podemos eliminar las importaciones antiguas para las acciones antiguas y eliminarlas también de mapDispatchToProps .

Así es como debería verse el nuevo src/App.js:

import React, { Component } from 'react';
// new lines from here (Nuevas líneas desde aquí)
import { connect } from "react-redux";
import rotateAction from "actions/rotateAction";

//// new lines to here (Nuevas líneas hasta aquí)

import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    console.log(this.props);
    return (
      <div className="App">
        <header className="App-header">
          <img
            src={logo}
            className={
              "App-logo" +
              (this.props.rotating ? "":" App-logo-paused")
            }
            alt="logo"
            onClick={
              () => this.props.rotateAction(!this.props.rotating)
            }
          />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  ...state
});
const mapDispatchToProps = dispatch => ({
  rotateAction: (payload) => dispatch(rotateAction(payload))
});

export default connect(mapStateToProps, mapDispatchToProps)(App);

Un ejemplo de la vida cotidiana con Paper Dashboard React

Como puedes ver en la imagen gif de arriba, estoy usando el menú de la derecha para cambiar los colores del menú de la izquierda. Esto se logra mediante el uso de estados de componentes y pasando ese estado de un componente principal a los dos menús y algunas funciones para cambiar ese estado.

Pensé que sería un buen ejemplo tomar este producto y reemplazar los estados de los componentes con Redux.

Puedes conseguirlo de estas 3 formas:

1. Descargar desde creative-tim.com
2. Descargar desde Github
3. Clonar de Github:

git clone https://github.com/creativetimofficial/paper-dashboard-react.git

Ahora que tenemos este producto, vamos a entrar en el directorio e instalar de nuevo redux y react-redux:

npm install --save redux react-redux

Después de esto, necesitamos crear las acciones. Dado que en el menú de la derecha tenemos 2 colores que configuran el fondo del menú de la izquierda y 5 colores que cambian el color de los enlaces, necesitamos 7 acciones o 2 creadores de acciones, y vamos con esta segunda opción ya que requiere un poco menos de código:

1 — Comandos de Linux/Mac

mkdir src/actions
touch src/actions/setBgAction.js
touch src/actions/setColorAction.js

2 — Comandos de Windows

mkdir src\actions
echo "" > src\actions\setBgAction.js
echo "" > src\actions\setColorAction.js

Después de esto, vamos a crear el código de las acciones de la siguiente manera:

— src/actions/setBgAction.js

const setBgAction = (payload) => {
  return {
    type: "bgChange",
    payload
  }
}
export default setBgAction;

— src/actions/setColorAction.js

const setColorAction = (payload) => {
  return {
    type: "colorChange",
    payload
  }
}
export default setColorAction;

Ahora, como en la primera parte, necesitamos el reductor:

1 — Comandos de Linux/Mac

mkdir src/reducers
touch src/reducers/rootReducer.js

2 — Comandos de Windows

mkdir src\reducers
echo "" > src\reducers\rootReducer.js

Y el código para el reductor:

export default (state, action) => {
  switch (action.type) {
    case "bgChange":
      return {
        ...state,
        bgColor: action.payload
      };
    case "colorChange":
      return {
        ...state,
        activeColor: action.payload
      };
    default:
      return state;
  }
};

Cómo puedes ver aquí, a diferencia de nuestro primer ejemplo, queremos mantener nuestro estado anterior y actualizar su contenido.

También necesitamos el almacén:

1 — Comando Linux/Mac

touch src/store.js

2 — Comando de Windows

echo "" > src\store.js

El código para ello:

import { createStore } from "redux";
import rootReducer from "reducers/rootReducer";

function configureStore(state = { bgColor: "black", activeColor: "info" }) {
  return createStore(rootReducer,state);
}
export default configureStore;

Dentro de src/index.js necesitamos:

// new imports start (Inicio de nuevas importaciones)
import { Provider } from "react-redux";

import configureStore from "store";
// new imports stop (Fin de nuevas importaciones)

Y también, cambia la función de renderizado :

ReactDOM.render(
  <Provider store={configureStore()}>
    <Router history={hist}>
      <Switch>
        {indexRoutes.map((prop, key) => {
          return <Route path={prop.path} key={key} component={prop.component} />;
        })}
      </Switch>
    </Router>
  </Provider>,
  document.getElementById("root")
);

Entonces, el archivo index.js debería verse así:

import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch } from "react-router-dom";
// new imports start (Inicio de nuevas importaciones)
import { Provider } from "react-redux";

import configureStore from "store";
// new imports stop (Fin de nuevas importaciones)

import "bootstrap/dist/css/bootstrap.css";
import "assets/scss/paper-dashboard.scss";
import "assets/demo/demo.css";

import indexRoutes from "routes/index.jsx";

const hist = createBrowserHistory();

ReactDOM.render(
  <Provider store={configureStore()}>
    <Router history={hist}>
      <Switch>
        {indexRoutes.map((prop, key) => {
          return <Route path={prop.path} key={key} component={prop.component} />;
        })}
      </Switch>
    </Router>
  </Provider>,
  document.getElementById("root")
);

Ahora necesitamos hacer algunos cambios dentro de src/layouts/Dashboard/Dashboard.jsx . Necesitamos eliminar el estado y las funciones que cambian el estado. Así que adelante, elimina estos fragmentos de código:

El constructor (entre las líneas 16 y 22):

constructor(props){
  super(props);
  this.state = {
    backgroundColor: "black",
    activeColor: "info",
  }
}

Las funciones de estado (entre las líneas 41 y 46):

handleActiveClick = (color) => {
    this.setState({ activeColor: color });
  }
handleBgClick = (color) => {
  this.setState({ backgroundColor: color });
}

Los accesorios bgColor y activeColor de la barra lateral (líneas 53 y 54):

bgColor={this.state.backgroundColor}
activeColor={this.state.activeColor}

Todos los accesorios de FixedPlugin (entre las líneas 59–62):

bgColor={this.state.backgroundColor}
activeColor={this.state.activeColor}
handleActiveClick={this.handleActiveClick}
handleBgClick={this.handleBgClick}

Entonces, nos quedamos con este código dentro del componente de diseño del Dashboard (Panel de control):

import React from "react";
// javascript plugin used to create scrollbars on windows
// plugin de javascript que se usa para crear barras de desplazamiento en windows 
import PerfectScrollbar from "perfect-scrollbar";
import { Route, Switch, Redirect } from "react-router-dom";

import Header from "components/Header/Header.jsx";
import Footer from "components/Footer/Footer.jsx";
import Sidebar from "components/Sidebar/Sidebar.jsx";
import FixedPlugin from "components/FixedPlugin/FixedPlugin.jsx";

import dashboardRoutes from "routes/dashboard.jsx";

var ps;

class Dashboard extends React.Component {
  componentDidMount() {
    if (navigator.platform.indexOf("Win") > -1) {
      ps = new PerfectScrollbar(this.refs.mainPanel);
      document.body.classList.toggle("perfect-scrollbar-on");
    }
  }
  componentWillUnmount() {
    if (navigator.platform.indexOf("Win") > -1) {
      ps.destroy();
      document.body.classList.toggle("perfect-scrollbar-on");
    }
  }
  componentDidUpdate(e) {
    if (e.history.action === "PUSH") {
      this.refs.mainPanel.scrollTop = 0;
      document.scrollingElement.scrollTop = 0;
    }
  }
  render() {
    return (
      <div className="wrapper">
        <Sidebar
          {...this.props}
          routes={dashboardRoutes}
        />
        <div className="main-panel" ref="mainPanel">
          <Header {...this.props} />
          <Switch>
            {dashboardRoutes.map((prop, key) => {
              if (prop.pro) {
                return null;
              }
              if (prop.redirect) {
                return <Redirect from={prop.path} to={prop.pathTo} key={key} />;
              }
              return (
                <Route path={prop.path} component={prop.component} key={key} />
              );
            })}
          </Switch>
          <Footer fluid />
        </div>
        <FixedPlugin />
      </div>
    );
  }
}

export default Dashboard;

Ahora necesitamos conectar los componentes Sidebar y FixedPlugin al almacén.

En src/components/Sidebar/Sidebar.jsx :

import { connect } from "react-redux";

Y cambiar la exportación (export) a:

const mapStateToProps = state => ({
  ...state
});

export default connect(mapStateToProps)(Sidebar);

En src/components/FixedPlugin/FixedPlugin.jsx :

import { connect } from "react-redux";
import setBgAction from "actions/setBgAction";
import setColorAction from "actions/setColorAction";

La exportación ahora debería ser:

const mapStateToProps = state => ({
  ...state
});

const mapDispatchToProps = dispatch => ({
  setBgAction: (payload) => dispatch(setBgAction(payload)),
  setColorAction: (payload) => dispatch(setColorAction(payload))
});

export default connect(mapStateToProps, mapDispatchToProps)(FixedPlugin);

Y Vamos a tener estos próximos cambios:

• en cualquier lugar donde encuentres la palabra handleBgClick , debemos cambiarla a setBgAction
• en cualquier lugar donde encuentres la palabra handleActiveClick , debemos cambiarla a setColorAction

Entonces, el componente FixedPlugin ahora debería verse así:

import React, { Component } from "react";

import { connect } from "react-redux";
import setBgAction from "actions/setBgAction";
import setColorAction from "actions/setColorAction";

import Button from "components/CustomButton/CustomButton.jsx";

class FixedPlugin extends Component {
  constructor(props) {
    super(props);
    this.state = {
      classes: "dropdown show"
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    if (this.state.classes === "dropdown") {
      this.setState({ classes: "dropdown show" });
    } else {
      this.setState({ classes: "dropdown" });
    }
  }
  render() {
    return (
      <div className="fixed-plugin">
        <div className={this.state.classes}>
          <div onClick={this.handleClick}>
            <i className="fa fa-cog fa-2x" />
          </div>
          <ul className="dropdown-menu show">
            <li className="header-title">SIDEBAR BACKGROUND</li>
            <li className="adjustments-line">
              <div className="badge-colors text-center">
                <span
                  className={
                    this.props.bgColor === "black"
                      ? "badge filter badge-dark active"
                      : "badge filter badge-dark"
                  }
                  data-color="black"
                  onClick={() => {
                    this.props.setBgAction("black");
                  }}
                />
                <span
                  className={
                    this.props.bgColor === "white"
                      ? "badge filter badge-light active"
                      : "badge filter badge-light"
                  }
                  data-color="white"
                  onClick={() => {
                    this.props.setBgAction("white");
                  }}
                />
              </div>
            </li>
            <li className="header-title">SIDEBAR ACTIVE COLOR</li>
            <li className="adjustments-line">
              <div className="badge-colors text-center">
                <span
                  className={
                    this.props.activeColor === "primary"
                      ? "badge filter badge-primary active"
                      : "badge filter badge-primary"
                  }
                  data-color="primary"
                  onClick={() => {
                    this.props.setColorAction("primary");
                  }}
                />
                <span
                  className={
                    this.props.activeColor === "info"
                      ? "badge filter badge-info active"
                      : "badge filter badge-info"
                  }
                  data-color="info"
                  onClick={() => {
                    this.props.setColorAction("info");
                  }}
                />
                <span
                  className={
                    this.props.activeColor === "success"
                      ? "badge filter badge-success active"
                      : "badge filter badge-success"
                  }
                  data-color="success"
                  onClick={() => {
                    this.props.setColorAction("success");
                  }}
                />
                <span
                  className={
                    this.props.activeColor === "warning"
                      ? "badge filter badge-warning active"
                      : "badge filter badge-warning"
                  }
                  data-color="warning"
                  onClick={() => {
                    this.props.setColorAction("warning");
                  }}
                />
                <span
                  className={
                    this.props.activeColor === "danger"
                      ? "badge filter badge-danger active"
                      : "badge filter badge-danger"
                  }
                  data-color="danger"
                  onClick={() => {
                    this.props.setColorAction("danger");
                  }}
                />
              </div>
            </li>
            <li className="button-container">
              <Button
                href="https://www.creative-tim.com/product/paper-dashboard-react"
                color="primary"
                block
                round
              >
                Download now
              </Button>
            </li>
            <li className="button-container">
              <Button
                href="https://www.creative-tim.com/product/paper-dashboard-react/#/documentation/tutorial"
                color="default"
                block
                round
                outline
              >
                <i className="nc-icon nc-paper"></i> Documentation
              </Button>
            </li>
            <li className="header-title">Want more components?</li>
            <li className="button-container">
              <Button
                href="https://www.creative-tim.com/product/paper-dashboard-pro-react"
                color="danger"
                block
                round
                disabled
              >
                Get pro version
              </Button>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  ...state
});

const mapDispatchToProps = dispatch => ({
  setBgAction: (payload) => dispatch(setBgAction(payload)),
  setColorAction: (payload) => dispatch(setColorAction(payload))
});

export default connect(mapStateToProps, mapDispatchToProps)(FixedPlugin);

Y hemos terminado, puedes iniciar el proyecto y ver cómo funciona todo bien:

Reductores múltiples

Como puedes tener múltiples acciones, puedes tener múltiples reductores. Lo único que necesitas es combinarlos, lo veremos un poco más abajo.

Avancemos y creemos dos nuevos reductores para nuestra aplicación, uno para setBgAction y otro para setColorAction :

1 — Comandos de Linux/Mac

touch src/reducers/bgReducer.js
touch src/reducers/colorReducer.js

2 — Comandos de Windows

echo "" > src\reducers\bgReducer.js
echo "" > src\reducers\colorReducer.js

Después de esto, vamos a crear el código de los reductores de la siguiente manera:

— src/reductores/bgReducer.js

export default (state = {}, action) => {
  switch (action.type) {
    case "bgChange":
      return {
        ...state,
        bgColor: action.payload
      };
    default:
      return state;
  }
};

— src/reductores/colorReducer.js

export default (state = {} , action) => {
  switch (action.type) {
    case "colorChange":
      return {
        ...state,
        activeColor: action.payload
      };
    default:
      return state;
  }
};

Cuando trabajes con reductores combinados, debes agregar un estado predeterminado en cada uno de los reductores que se van a combinar. En mi caso, he elegido un objeto vacío, es decir, state = {} ;

Y ahora, nuestro rootReducer combinará a estos dos de la siguiente manera:

— src/reductores/rootReducer.js

import { combineReducers } from 'redux';

import bgReducer from 'reducers/bgReducer';
import colorReducer from 'reducers/colorReducer';

export default combineReducers({
  activeState: colorReducer,
  bgState: bgReducer
});

Por lo tanto, decimos que queremos que colorReducer sea referido por la propiedad activeState del estado de la aplicación, y bgReducer sea referido por la propiedad bgState del estado de la aplicación.

Esto significa que nuestro estado ya no se verá así:

state = {
  activeColor: "color1",
  bgColor: "color2"
}

Sinó que ahora se verá así:

state = {
  activeState: {
    activeColor: "color1"
  },
  bgState: {
    bgColor: "color2"
  }
}

Como hemos cambiado nuestros reductores, ahora los hemos combinado en uno sólo, y también necesitamos cambiar nuestro store.js :

— src/store.js

import { createStore } from "redux";
import rootReducer from "reducers/rootReducer";

// we need to pass the initial state with the new look
// necesitamos pasar el estado (state) inicial con la nueva apariencia
function configureStore(state = { bgState: {bgColor: "black"}, activeState: {activeColor: "info"} }) {
  return createStore(rootReducer,state);
}
export default configureStore;

Dado que hemos cambiado la apariencia del estado, ahora debemos cambiar los accesorios dentro de los componentes Sidebar y FixedPlugin al nuevo objeto de estado:

— src/components/Sidebar/Sidebar.jsx :

Cambia la línea 36 de

<div className="sidebar" data-color={this.props.bgColor} data-active-color={this.props.activeColor}>

a

<div className="sidebar" data-color={this.props.bgState.bgColor} data-active-color={this.props.activeState.activeColor}>

— src/components/FixedPlugin/FixedPlugin.jsx :

Necesitamos cambiar todos los this.props.bgColora this.props.bgState.bgColor . Y todo el this.props.activeColora this.props.activeState.activeColor.

Así que el nuevo código debería verse así:

import React, { Component } from "react";

import Button from "components/CustomButton/CustomButton.jsx";

import { connect } from "react-redux";
import setBgAction from "actions/setBgAction";
import setColorAction from "actions/setColorAction";

class FixedPlugin extends Component {
  constructor(props) {
    super(props);
    this.state = {
      classes: "dropdown show"
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    if (this.state.classes === "dropdown") {
      this.setState({ classes: "dropdown show" });
    } else {
      this.setState({ classes: "dropdown" });
    }
  }
  render() {
    return (
      <div className="fixed-plugin">
        <div className={this.state.classes}>
          <div onClick={this.handleClick}>
            <i className="fa fa-cog fa-2x" />
          </div>
          <ul className="dropdown-menu show">
            <li className="header-title">SIDEBAR BACKGROUND</li>
            <li className="adjustments-line">
              <div className="badge-colors text-center">
                <span
                  className={
                    this.props.bgState.bgColor === "black"
                      ? "badge filter badge-dark active"
                      : "badge filter badge-dark"
                  }
                  data-color="black"
                  onClick={() => {
                    this.props.setBgAction("black");
                  }}
                />
                <span
                  className={
                    this.props.bgState.bgColor === "white"
                      ? "badge filter badge-light active"
                      : "badge filter badge-light"
                  }
                  data-color="white"
                  onClick={() => {
                    this.props.setBgAction("white");
                  }}
                />
              </div>
            </li>
            <li className="header-title">SIDEBAR ACTIVE COLOR</li>
            <li className="adjustments-line">
              <div className="badge-colors text-center">
                <span
                  className={
                    this.props.activeState.activeColor === "primary"
                      ? "badge filter badge-primary active"
                      : "badge filter badge-primary"
                  }
                  data-color="primary"
                  onClick={() => {
                    this.props.setColorAction("primary");
                  }}
                />
                <span
                  className={
                    this.props.activeState.activeColor === "info"
                      ? "badge filter badge-info active"
                      : "badge filter badge-info"
                  }
                  data-color="info"
                  onClick={() => {
                    this.props.setColorAction("info");
                  }}
                />
                <span
                  className={
                    this.props.activeState.activeColor === "success"
                      ? "badge filter badge-success active"
                      : "badge filter badge-success"
                  }
                  data-color="success"
                  onClick={() => {
                    this.props.setColorAction("success");
                  }}
                />
                <span
                  className={
                    this.props.activeState.activeColor === "warning"
                      ? "badge filter badge-warning active"
                      : "badge filter badge-warning"
                  }
                  data-color="warning"
                  onClick={() => {
                    this.props.setColorAction("warning");
                  }}
                />
                <span
                  className={
                    this.props.activeState.activeColor === "danger"
                      ? "badge filter badge-danger active"
                      : "badge filter badge-danger"
                  }
                  data-color="danger"
                  onClick={() => {
                    this.props.setColorAction("danger");
                  }}
                />
              </div>
            </li>
            <li className="button-container">
              <Button
                href="https://www.creative-tim.com/product/paper-dashboard-react"
                color="primary"
                block
                round
              >
                Download now
              </Button>
            </li>
            <li className="button-container">
              <Button
                href="https://www.creative-tim.com/product/paper-dashboard-react/#/documentation/tutorial"
                color="default"
                block
                round
                outline
              >
                <i className="nc-icon nc-paper"></i> Documentation
              </Button>
            </li>
            <li className="header-title">Want more components?</li>
            <li className="button-container">
              <Button
                href="https://www.creative-tim.com/product/paper-dashboard-pro-react"
                color="danger"
                block
                round
                disabled
              >
                Get pro version
              </Button>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  ...state
});

const mapDispatchToProps = dispatch => ({
  setBgAction: (payload) => dispatch(setBgAction(payload)),
  setColorAction: (payload) => dispatch(setColorAction(payload))
});

export default connect(mapStateToProps, mapDispatchToProps)(FixedPlugin);

Abramos el proyecto nuevamente con npm start y veamos cómo funciona todo. ¡Tachán!

¡Gracias por leer!

Si te ha gustado leer este tutorial, compártelo. Estoy muy interesado en escuchar tus pensamientos al respecto. Simplemente deja un comentario en este hilo y estaré más que feliz de responder.

Un agradecimiento especial también debe ir a Esther Falayi por su tutorial que me ha brindado una comprensión muy necesaria sobre Redux .

Enlace útil:

• Obtén el código para este tutorial de Github

Encuéntrame en:

• Correo electrónico: manu@creative-tim.com
• Facebook: https://www.facebook.com/NazareEmanuel
• Instagram: https://www.instagram.com/manu.nazare/
• Linkedin: https://www.linkedin.com/in/nazare-emanuel-ioan-4298b5149/

En este tutorial, aprenderemos todo lo que necesitamos saber antes de implementar una aplicación Node en un servidor de producción.

Comenzaremos alquilando un servidor en Digital Ocean. Luego configuraremos este servidor, nos conectaremos a él, instalaremos Nginx y lo configuraremos, extraeremos o crearemos nuestra aplicación Node y la ejecutaremos como un proceso.

Como puedes ver, hay mucho que hacer y será un tutorial lleno de acción. Así que comencemos sin perder tiempo.

Debes tener algunos conocimientos básicos sobre cómo funciona la Terminal y cómo trabajar con Vi/Vim antes de comenzar. Si no estás familiarizado con los comandos básicos, te aconsejo que los leas un poco.

Ejecutaré los comandos en MacOS. Si quieres seguir este tutorial en Windows, puedes usar Powershell o algún otro emulador de Unix de tu elección.

Aunque usaré Node.js como plataforma de nuestra aplicación de ejemplo, la mayoría de los pasos son los mismos para cualquier aplicación web.

¿Por qué Digital Ocean?

Elijo Digital Ocean porque es barato y la interfaz es realmente fácil de usar, en comparación con AWS. Además, se incluye un crédito de $100 en el paquete de estudiante de GitHub para que no tengas que pagar nada durante un par de meses. Es ideal para implementar un curso o un proyecto de pasatiempos.

Tiene un concepto llamado Droplets, que es básicamente tu parte de un servidor. Puedes imaginar el servidor como un apartamento del que eres propietario o un apartamento alquilado.

Los droplets funcionan con la ayuda de máquinas virtuales que se ejecutan en el servidor. Entonces, un Droplet es tu máquina virtual en un servidor compartido. Dado que es una máquina virtual, su uso compartido de CPU y memoria se puede aumentar fácilmente, generalmente invirtiendo más dinero en tu proveedor.

Cómo crear un proyecto de Digital Ocean

Supongo que ya te has registrado e iniciado sesión en Digital Ocean antes de continuar. Primero debemos crear un proyecto que contenga nuestros droplets. Hagamos clic en el botón de nuevo proyecto en el menú del lado izquierdo. Te pedirá que nombres tu proyecto.

Introduce el nombre que quieras. También te preguntará si quieres mover algún recurso, pero por ahora simplemente haz clic en Omitir; crearemos el droplet más tarde.

Cómo crear un droplet en Digital Ocean

Vamos a crear nuestro droplet haciendo clic en el botón Comenzar.

Después de hacer clic en el botón, nos pedirá que elijamos una imagen de VM (Máquina virtual).

En esta página, seleccionaré Ubuntu 20.04, ya que es la última versión de LTS en el momento en que escribo esta publicación. LTS significa "Soporte a largo plazo" (por sus siglas en inglés). Lo mejor es optar por la versión LTS para proyectos reales, porque el proveedor garantiza que será compatible y mantenido durante mucho tiempo. Esto significa que no tendrás problemas a largo plazo.

Elegí Ubuntu y te lo recomendaría, ya que es la distribución de Linux más utilizada. Esto significa que también es más fácil encontrar respuestas a tus dudas futuras.

También puedes optar por tener una CPU dedicada si la necesitas. Si estás construyendo tu propia startup o cualquier proyecto comercial, te recomendaría leer esta publicación que contiene instrucciones detalladas sobre cómo elegir la opción adecuada para ti.

Seguiré con la opción más barata en este caso.

Luego, deberás seleccionar una región del centro de datos. Debes elegir el que esté más cerca de ti para minimizar el retraso de la red.

A continuación, seleccionemos Claves SSH como el Método de autenticación, ya que es mucho más seguro que la autenticación de contraseña básica.

Para conectarnos al servidor necesitamos generar una nueva clave SSH en nuestro propio dispositivo y agregarla a Digital Ocean.

Cómo generar una clave SSH

Generaré la clave en mi dispositivo macOS. Si estás utilizando Windows, puedes consultar este artículo. Abre tu terminal y muévete a la carpeta ssh:

cd ~/.ssh

Luego crea tu clave SSH:

ssh-keygen

Si tu computadora dice que no conoce este comando, debes instalarlo a través de brew.

Te pedirá que asignes un nombre al archivo e ingreses una frase de contraseña. No ingreses un nombre, solo presiona enter y sigue con los valores predeterminados. Deberías tener estos archivos generados. He nombrado el mío digital-ocean-ssh en esta captura de pantalla, así que no te confundas con eso.

❯ lsid_dsa      id_rsa      known_hosts

Nuestra clave pública es el id_dsa y el id_rsa es nuestra clave privada. Si olvidas cuál es la privada, siempre puedes imprimir una de ellas para verla.

Cómo agregar tu clave SSH a Digital Ocean

Ahora queremos copiar nuestra clave pública y subirla a Digital Ocean para que sepan qué clave usar en la autenticación.

Copia toda esta clave, incluida la parte ssh-rsa.

Haz clic en "Nueva clave SSH":

Pega la clave en el cuadro de texto que aparece después de hacer clic en el botón y deberías ver tu clave SSH.

Cómo conectarse al servidor

Usaremos la terminal para conectarnos a nuestro servidor con SSH. Si quieres también puedes echar un vistazo a Termius para obtener una buena interfaz.

Ejecuta este comando en tu terminal después de reemplazar IP_ADDRESS con la dirección IP de tu servidor (puedes buscarla desde el panel de Digital Ocean).

ssh root@IP_ADDRESS

Si todo va bien, ahora deberías estar en la terminal del servidor. Nos hemos conectado con éxito al servidor. Si hay algún error, puedes depurarlo ejecutando el comando con la opción "-v" o "-vv" para obtener aún más detalle.

Cómo configurar el servidor

Necesitamos hacer una configuración inicial antes de implementar la aplicación Node en el servidor.

Actualizar el software

Queremos actualizar el software del servidor para asegurarnos de que estamos usando las últimas versiones.

Muchos servidores son vulnerables a los ataques porque utilizan versiones anteriores de software con vulnerabilidades conocidas. Los atacantes pueden buscar las vulnerabilidades en ese software e intentar explotarlas para obtener acceso a tu servidor.

Puedes actualizar el software de Ubuntu usando el comando "apt update" .

apt updateHit:1 https://repos.insights.digitalocean.com/apt/do-agent main InReleaseGet:2 http://mirrors.digitalocean.com/ubuntu focal InRelease [265 kB]      Hit:3 http://mirrors.digitalocean.com/ubuntu focal-updates InRelease                Get:4 http://security.ubuntu.com/ubuntu focal-security InRelease [109 kB]Hit:5 http://mirrors.digitalocean.com/ubuntu focal-backports InReleaseFetched 374 kB in 1s (662 kB/s)                          Reading package lists... DoneBuilding dependency tree       Reading state information... Done96 packages can be upgraded. Run 'apt list --upgradable' to see them.

Si lees el mensaje, dice que "se pueden actualizar 96 paquetes". Hemos instalado los nuevos paquetes de software, pero aún no hemos actualizado nuestro software a esas versiones.

Para hacer eso, ejecutemos otro comando:

apt upgrade

Escribe 'y' cuando se te solicite y actualizarás el software.

Crear un usuario

Nos hemos conectado al servidor como el usuario root (el usuario con mayores privilegios). Ser root es peligroso y puede exponernos a vulnerabilidades.

Por lo tanto, debemos crear un nuevo usuario y no ejecutar comandos como root. Reemplaza $usernamecon un nombre de usuario de tu elección.

whoamiroot

adduser $username

Es necesario introducir una contraseña para el usuario. Después de ese punto, hará un montón de preguntas, así que sigue avanzando hasta que terminen las indicaciones.

Se ha creado el nuevo usuario, pero también debemos agregar este nuevo usuario al grupo "sudo" para que podamos realizar cualquier acción que necesitemos.

usermod -aG sudo $USERNAME

Agregamos grupo con la opción -aG (agregar grupo), y agregamos el nombre del grupo sudoa nuestro nombre de usuario.

Todavía somos root, así que cambiemos nuestro usuario al usuario recién creado, usando el comando su (cambiar de usuario).

su $USERNAME

Después de este punto, si ejecutas el comando whoami, deberías ver tu nombre de usuario. Puedes confirmar la existencia del grupo sudo ejecutando este comando:

sudo cat /var/log/auth.log

Solo los superusuarios pueden ver este archivo y el sistema operativo te pedirá tu contraseña de usuario después de ejecutar este comando.

Copia la clave SSH

Hemos creado correctamente el usuario, pero aún no hemos habilitado el inicio de sesión SSH para este nuevo usuario.

Por lo tanto, tenemos que copiar la clave pública que creamos previamente en nuestro ordenador local y pegarla en la carpeta SSH de este usuario para que SSH pueda saber qué clave debe usar para autenticar a nuestro nuevo usuario.

mkdir -p ~/.ssh

El argumento -p crea el directorio si no existe.

vi ~/.ssh/authorized_keys

Usaremos vi o vim para crear un archivo y llamarlo authorized_keys.

Copia tu clave pública (archivo `id_dsa`) y luego presiona "i" para entrar en el modo de inserción. Luego simplemente pégalo en este archivo con CMD + V (En Mac, si usas PC -> CTRL + V).

Presiona esc para salir del modo de inserción, escribe :wq para guardar y salir.

Si tienes algún problema con el uso de Vim-Vi, puedes consultar uno de los muchos tutoriales que explican cómo usarlo.

Conectarse al servidor con el nuevo usuario

Ahora deberíamos poder conectarnos al servidor sin ningún problema usando ssh. Puedes usar este comando para conectarte, solo recuerda insertar tu nombre de usuario ($USERNAME) y dirección ip (IP_ADDRESS).

ssh $USERNAME@IP_ADDRESS

Si tienes algún problema en este punto, simplemente debes eliminar el droplet y comenzar de nuevo. No toma mucho tiempo comenzar de nuevo, pero la depuración de problemas del servidor puede ser difícil.

Cómo deshabilitar el inicio de sesión con root

Es una buena práctica deshabilitar el inicio de sesión de root como medida de seguridad, así que hagámoslo ahora.

Puede ser útil cambiar el permiso del archivo por si acaso para que no tengamos problemas con los permisos en el futuro.

chmod 644 ~/.ssh/authorized_keys

Ahora abramos nuestro archivo sshd_config:

sudo vi /etc/ssh/sshd_config

Encuentra esta línea y cambia el sí por el no de la misma manera que lo hicimos antes con vi.

PermitRootLogin no

Guardar y salir de vi.

Cómo instalar Node.js y Git

Ya podemos continuar e instalar Node.js y Git:

sudo apt install nodejs npm

sudo apt install git

Ahora estamos listos para crear una aplicación Node y ejecutarla. Puedes extraer tu proyecto de Node de Github o crear una aplicación de Node aquí para probar si funciona.

Ves a un directorio de tu elección y crea un archivo "app.js" :

sudo vi app.js

Puedes pegar el siguiente fragmento en tu archivo app.js :

const express = require('express');const app = express();const port = 3000;app.get('/', (req, res) => {        res.send('Hola Mundo');});app.listen(port, () => console.log(`¡Aplicación de ejemplo escuchando en el puerto ${port}!`));

Ahora podemos ejecutarlo con el comando:

node app.js

Deberías ver "¡Aplicación de ejemplo escuchando en el puerto 3000!" en tu terminal.

Podemos confirmar que está funcionando enviando una solicitud a nuestro servidor:

GET http://IP_ADDRESS:3000/

Envía esta solicitud desde un cliente HTTP como Postman o tu navegador y deberías ver el mensaje "Hola Mundo".

En este punto, deberías notar que algo no está bien: Los usuarios regulares no saben cómo enviar solicitudes al puerto 3000.

Deberíamos redirigir las solicitudes que llegan a nuestro servidor web desde nuestra IP al puerto 3000. Esto lo podemos lograr con la ayuda de Nginx.

Cómo instalar y configurar Nginx

Usaremos Nginx como proxy inverso para redirigir las solicitudes a nuestra aplicación Node.

Instalamos Nginx:

sudo apt install nginx

Inicia el servicio Nginx:

sudo service nginx start

Podemos probar para ver si funciona enviando una solicitud a la dirección IP de nuestro servidor desde el navegador. Escribe la dirección IP de tu servidor en tu navegador y deberías ver esto:

Es importante saber que Nginx sirve desde "/var/www/html" de forma predeterminada y también puedes encontrar este archivo HTML en ese directorio.

También te aconsejo que crees una carpeta en "/var/www", llámala app y mueve tu aplicación Node a esa carpeta para que sea fácil de encontrar.

Cómo configurar el proxy inverso de Nginx

Editaremos el archivo de configuración de Nginx para configurar un proxy inverso:

sudo vi /etc/nginx/sites-available/default

En este archivo, debes encontrar la ubicación / block y cambiarla de la siguiente manera:

location / {                # First attempt to serve request as file, then                # as directory, then fall back to displaying a 404.                proxy_pass http://127.0.0.1:3000/;        }

La directivaproxy_pass envía la solicitud a un puerto específico. Damos el puerto en el que se ejecuta nuestra aplicación Node.

Reiniciamos Nginx para que los cambios surtan efecto:

sudo service nginx reload

Después de este paso, deberíamos poder ver el mensaje cuando enviamos una solicitud a nuestro servidor. ¡Felicidades, hemos completado la cantidad mínima de pasos para implementar una aplicación Node!

Pero aún así te aconsejo que completes el siguiente paso también, ya que creo que es bastante importante.

Si no puedes ver el mensaje de hola mundo, puedes verificar si tu aplicación y Nginx se están ejecutando y reiniciarlos.

Cómo ejecutar tu aplicación como un proceso

No queremos iniciar nuestra aplicación manualmente cada vez que algo salga mal y nuestra aplicación falle. Queremos que se reinicie solo. Además, cada vez que se inicia el servidor, nuestra aplicación también debería iniciarse.

Para que esto suceda, podemos usar PM2. Instalemos PM2 y configuremos.

sudo npm i -g pm2

Estamos instalando pm2 globalmente usando la opción "-g" para que sea accesible desde todas las carpetas.

pm2 start app.js

Esto asegura que la aplicación se reinicie si se cierra debido a un error.

Guardemos la lista de procesos actual.

pm2 save

También necesitamos convertirlo en un demonio que se ejecute cada vez que se inicie el sistema:

pm2 startup systemd

Como recordatorio, en este tutorial estoy usando los comandos para Ubuntu. Si estás utilizando cualquier otra distribución de Linux, debes reemplazar systemd en este comando.

Podemos confirmar que el servicio se reinicia reiniciando el servidor y enviando una solicitud sin ejecutar app.js a mano:

sudo reboot

Después de enviar una solicitud como lo hicimos anteriormente, deberías poder ver el mensaje de hola mundo.

Conclusión

En este tutorial, comenzamos desde cero, alquilamos un servidor, nos conectamos y lo configuramos de manera que sirve nuestra aplicación Node.js desde el puerto 80.

Si has seguido y has podido completar todos los pasos, ¡felicidades! Puedes estar orgulloso de ti mismo, ya que este tema no es de lo más fácil :). Espero que hayas aprendido mucho. Gracias por tu tiempo.

Planeo explorar más este tema conectando el servidor a un nombre de dominio y luego conectándolo a CircleCI para una integración continua. También revisaré los pasos necesarios para preparar la producción de tu aplicación Node.js/React. Sin embargo, esta publicación ya se había hecho lo suficientemente larga, por lo que esos temas están reservados para otra publicación :)

Si te ha gustado la lectura y quieres estar informado de mis futuras publicaciones, puedes suscribirte a mi blog personal . Puedes ver mis publicaciones anteriores allí si estás interesado en leer más. Suelo escribir sobre temas relacionados con el desarrollo web.

¡Hola a todos! Hace un tiempo escribí un artículo sobre TypeScript (en inglés), explicando sus principales características y por qué es una buena idea usarlo en proyectos grandes.

Hoy vamos a echar un vistazo rápido a cómo podemos usar TypeScript en una aplicación React, para que puedas tener una idea de cómo se vería la implementación y cuáles son sus beneficios.

Tabla de contenido

• Introducción a TypeScript
• Tipos para Props
• Tipos para Hooks
• Tipos para el hook useState
• Tipos para el hook useRef
• Consideraciones finales

Introducción a TypeScript

A estas alturas ya deberías saber que TypeScript es un superconjunto (superset) de JavaScript. Superset significa que agrega funciones además de lo que ofrece JavaScript.

TypeScript toma todas las funcionalidades y estructuras que proporciona JavaScript como lenguaje y le agrega algunas cosas. Lo principal que proporciona TypeScript es la escritura estática.

Cuando se trata de React, además de todo lo que podemos escribir en vanilla JS (como variables, parámetros de funciones y valores devueltos, etc.), podemos usar TypeScript principalmente para escribir dos cosas: props de componentes y hooks.

Una de las formas más sencillas de crear una aplicación React con TypeScript es usar CRA, ejecutando npx create-react-app my-app --template typescript.

Si ya tienes una aplicación CRA creada, en la documentación tienes información sobre cómo instalar TypeScript además de eso. ;)

Para los ejemplos aquí vamos a usar CRA, ya que es agradable y simple. Pero ten en cuenta que la mayoría de los marcos de trabajo (frameworks) como Next , Vite y Astro también brindan soporte para TypeScript.

Entonces, después de ejecutar el script de CRA, tendrás un proyecto que se parece a esto:

Como puedes ver, los archivos ahora tienen un nombre .tsx que es cómo el compilador de TypeScript identifica que usará TypeScript en ese archivo.

Y además, tenemos un tsconfig.json que es donde tenemos toda la configuración del compilador. Puedes aprender más sobre eso en el artículo anterior que escribí (en inglés).

Ahora vamos a crear un componente y ver cómo podemos usar TypeScript.

Tipos para Props

Para este ejemplo, configuraremos un componente ficticio responsable de representar un número recibido como props y agregarlo a ese número cuando se haga clic en un botón.

El código JavaScript normal se vería así:

const DummyComponent = ({ number, setNumber }) => {

  return (
    <>
      <div>{number}</div>

      <button
        onClick={() => setNumber(prev => prev+1)}
      >
        ADD
      </button>
    </>
  )

}

export default DummyComponent

Y nuestra versión completamente codificada se verá así:

import React, { Dispatch, SetStateAction } from 'react'

interface DummyProps {
  number: number
  setNumber: Dispatch<SetStateAction<number>>
}

const DummyComponent:React.FC<DummyProps> = ({ number, setNumber }) => {

  return (
    <>
      <div>{number}</div>

      <button
        onClick={() => setNumber(prev => prev+1)}
      >
        ADD
      </button>
    </>
  )

}

export default DummyComponent

Puedes ver que junto al nombre del componente, hemos agregado dos puntos y React.FC. Básicamente, esto le dice al componente TypeScript que DummyComponentes un componente funcional de React. Eso en sí no hace mucho, pero ayuda con el intellisense de TypeScript.

Junto a eso declaramos <DummyProps>. Esto declara que el objeto props que recibirá este componente debe coincidir con la interfaz DummyProps.

Una interfaz es la forma en que TypeScript le otorga un tipo a un objeto. Básicamente, declaramos todas las propiedades que tendrá ese objeto, y el tipo para cada una de ellas.

Dado que este componente recibirá un estado que es un número y una función para actualizar ese estado, eso es exactamente lo que tenemos en nuestra interfaz:

interface DummyProps {
  number: number
  setNumber: Dispatch<SetStateAction<number>>
}

Aquí puedes ver que para la función setNumber estamos usando este tipo: Dispatch<SetStateAction>. Este no es un tipo nativo de TypeScript, sino que lo proporciona React. Entonces tenemos que importarlo cada vez que lo usamos, así:
import React, { Dispatch, SetStateAction } from 'react'.

¡Y eso es todo! Les has dado tipos a tus props. Lo bueno de esto es que cada vez que llames a ese componente, obtendrás información sobre los props que espera ese componente. Lo mismo que si intentas pasar un prop no declarado en la interfaz del componente o proporcionas un tipo incorrecto para un prop esperado.

Esto es lo que la gente quiere decir cuando dice que TypeScript autodocumenta su código. Con solo unas pocas líneas repetitivas, ahora puedes ver fácilmente qué espera y qué no espera cada componente. Esto es muy útil cuando se trabaja en proyectos grandes, con cientos de componentes que fueron escritos en su mayoría por otras personas. ;)

Tipos para hooks

Cuando se trata de hooks, TypeScript se usa principalmente para dar tipo a los hooks useState y useRef. Veamos cómo funciona eso.

Tipos para el hook UseState

Así es cómo se ve useState sin tipos:

const [number, setNumber] = useState<>(0)

Y con los tipos se ve así:

const [number, setNumber] = useState<number>(0)

Casi no hay necesidad de explicarlo, ¿verdad? Simplemente, declaramos el tipo del valor del estado de esta manera: <number>y eso es todo. Si alguna vez intentamos actualizar ese estado con un tipo de valor diferente, obtendremos un bonito mensaje de error rojo para evitar que nos disparemos en el pie. ;)

Ten en cuenta que si quieres permitir que nuestro estado tenga diferentes tipos de valores, podemos declararlo así: const [number, setNumber] = useState<number | string>(0).

Ahora podemos pasar un número O una cadena sin obtener errores.

Tipos para el hook UseRef

useRef es un hook que se utiliza principalmente para hacer referencia a elementos DOM en React. Si quieres obtener más información sobre cómo funciona el hook, puedes leer esta guía (en inglés) que escribí recientemente.

Para ver cómo podemos implementarlo con TypeScript, usaremos este ejemplo:

import React, { useEffect, useRef } from 'react'

const DummyComponent:React.FC = () => {

  const ref = useRef<HTMLInputElement>(null)

  useEffect(() => {
    if (ref.current) ref.current.focus()
  }, [])

  return (
      <input type="text" ref={ref} />
  )

}

export default DummyComponent

Como puedes ver, iniciamos la variable ref con null y declaramos su tipo como HTMLInputElement. Al usar el hook useRef y declarar su tipo, la variable se puede asignar a null o al tipo declarado.

Entonces tenemos un hook useEffect que enfoca el elemento si tiene una propiedad current. Y, por último, estamos devolviendo un elemento input y asignando la referencia que declaramos anteriormente: ref={ref}.

Lo bueno de escribir el hook useRef es que TypeScript evitará que intentemos realizar acciones o leer datos de tipos que no coinciden.

Por ejemplo, si declaramos el tipo number para la referencia, obtendríamos los siguientes errores:

Una vez más, esto es bueno porque evita errores tontos antes de tiempo y nos evita tener que depurar estas cosas más adelante. Especialmente cuando se trabaja con grandes bases de código en las que también trabajan muchas otras personas, TypeScript nos brinda un entorno más controlado y ordenado para trabajar.

Consideraciones finales

Bueno, como siempre, espero que hayáis disfrutado del artículo y aprendido algo nuevo.

Si queréis profundizar más en este tema, os recomiendo este vídeo (en inglés) de Firebase o este otro de Ben Awad.

Si queréis, también podéis seguirme en LinkedIn o Twitter. ¡Nos vemos en la próxima!

¿Son lo mismo React.js y React Native?

Si eres nuevo en el mundo del desarrollo web y móvil, quizás te estés preguntando lo mismo.

Como novato, es fácil asumir que React.js y React Native son lo mismo. Después de todo, ambos tienen "Reaccionar" como parte de su nombre.

Aunque React.js y React Native tienen mucho en común, son diferentes entre sí. En este artículo, explicaré tanto React.js cómo React Native, luego enumeraré sus similitudes y diferencias. Al final de este artículo, tendrás un conocimiento claro de ambas herramientas y para qué tipo de aplicaciones se suelen usar.

Para tener una idea clara de la diferencia entre React.js y React Native, primero debemos sumergirnos en cómo se renderiza un sitio web en un navegador.

Cómo se renderizan o representan los sitios web: HTML, CSS y JavaScript

Cuando escribes la URL de un sitio web en la barra de direcciones de tu navegador y haces clic en Intro, el navegador solicita el sitio web y el servidor web envía un archivo HTML al navegador.

El archivo HTML contiene el contenido de la página web y los archivos vinculados, como imágenes, videos y hojas de estilo. El navegador web analiza el archivo HTML y crea un modelo de objeto de documento (DOM), que es una estructura similar a un árbol que contiene los elementos de la página (por ejemplo, botones, párrafos, enlaces, etc...).

El navegador inicia las solicitudes de los archivos vinculados y los descarga al ordenador. Luego analiza los archivos vinculados, como CSS y JavaScript, y aplica el estilo al contenido, haciéndolo más presentable para el usuario. Después de descargar todos los archivos, el navegador muestra el contenido en la pantalla.

El navegador también ejecuta cualquier código JavaScript para que la página sea interactiva. Por ejemplo, si el usuario completa la información incorrecta en un formulario, se puede usar JavaScript para insertar un elemento <div> en la página que muestre un mensaje de error al usuario.

Sin embargo, uno de los mayores problemas de insertar elementos en el DOM con JavaScript es que el código no es reutilizable. Por ejemplo, si deseas insertar el mismo botón en la página, pero con diferentes colores de fondo, debes crear el elemento dos veces en JavaScript:

let blueBtn = document.createElement("button").style.backgroundColor("blue")
let redBtn = document.createElement("button").style.backgroundColor("red")

// Inserta en la página un botón azul y uno rojo

Este es solo un ejemplo simple. Con interfaces de usuario complejas, puedes imaginar lo largas y confusas que pueden llegar a ser las cosas. React fue desarrollado para resolver este problema al hacer que el proceso de creación de aplicaciones web sea mucho más organizado e intuitivo.

¿Qué es React.js?

Técnicamente hablando, ReactJS es una biblioteca front-end de código abierto JavaScript para crear interfaces de usuario o componentes de interfaz de usuario. En términos simples, esto significa que puedes usar React para crear todas las partes de un sitio web que el usuario puede ver y con las que puede interactuar en la ventana de su navegador.

Entonces, ¿Cuál es la diferencia entre usar JavaScript simple y React? Bueno, React hace que el proceso de diseño de la interfaz de usuario sea mucho más fácil. Te permite crear elementos que puedes reutilizar fácilmente en otras partes del sitio web o la aplicación.

Con JavaScript, tal y como mencioné anteriormente, deberás escribir el mismo código dos veces para crear el mismo botón con diferentes colores, lo que podría generar complejidad en proyectos grandes.

La arquitectura de componentes de React resuelve este problema de manera brillante. Con React, defines una sola pieza de la interfaz de usuario, digamos un botón, como un componente.

const Button (props) => {
	return (
    	<div>
        	<button style={props.color}>Submit</button>
        </div>
    )
}

El componente en este caso es una función que devuelve una sintaxis similar a HTML llamada JSX, que define la presentación y el aspecto del componente en el navegador web.

Ahora, digamos que quieres usar el mismo botón (pero con diferentes colores) en varios lugares de tu sitio web. En lugar de crear cada botón desde cero con diferentes propiedades de color (como lo harías con JavaScript), con React, simplemente usas el mismo elemento <Button> y en props pasas un color diferente a cada uno de ellos creando variaciones del mismo botón.

<Button color="red" />
<Button color="blue" />
<Button color="green" />

Este método hace todo simple y lo mantiene organizado, que es toda la esencia de la biblioteca React.js.

Otro beneficio de usar React para el desarrollo de UI es la separación de preocupaciones. Esto significa que los datos utilizados en un componente existen por separado de la lógica, que existe por separado de la capa de vista.

Aquí hay un ejemplo:

const Button (props) => {
	// datos de los componentes
    const [btnText, setBtnText] = useState("Submit")
    
    // lógica de los componentes
    function onClick() {
    	setBtnText("Submitted!")
    }
    
	return (
    	// vista de los componentes
    	<div>
        	<button style={props.color}>{btnText}</button>
        </div>
    )
}

Como puedes ver aquí, el estado, la lógica y la presentación de un componente están separados entre sí, lo que hace que los componentes de React UI sean más fáciles de entender y componer.

Para concluir, React es una biblioteca de JavaScript diseñada para simplificar el proceso de creación de la interfaz de las aplicaciones web.

¿Qué es React Native?

Aquí están las principales diferencias entre ReactJS y React Native:

• React JS se utiliza para crear la interfaz de usuario de las aplicaciones web (es decir, aplicaciones que se ejecutan en un navegador web)
• React Native se utiliza para crear aplicaciones que se ejecutan en dispositivos iOS y Android (es decir, aplicaciones móviles multiplataformas)
• React usa HTML, CSS y JavaScript para crear interfaces de usuario interactivas. React Native, por otro lado, utiliza componentes de interfaz de usuario nativos y APIs para crear aplicaciones móviles.

Tanto React JS como React Native comparten la misma sintaxis. React Native se creó como una forma para que los desarrolladores creasen aplicaciones móviles multiplataformas utilizando su conocimiento existente de herramientas de desarrollo web como HTML, CSS, JavaScript y la biblioteca principal de React.

De hecho, algunas de las bibliotecas que se usan comúnmente junto con React para desarrollar aplicaciones web también tienen una versión móvil para crear aplicaciones en React Native, por ejemplo, Axios, Bootstrap CSS y Tailwind CSS.

Estas son las cosas que React DOM y React Native tienen en común:

1. Ambos usan la misma biblioteca principal de React.
2. Ambos utilizan la misma arquitectura basada en componentes, lo que significa que los desarrolladores pueden dividir sus aplicaciones en piezas más pequeñas y manejables.
3. Ambos usan JavaScript como lenguaje de programación y JSX como lenguaje de plantillas.
4. Tanto React DOM como React Native usan DOM virtuales para representar sus aplicaciones.
5. Tanto React DOM como React Native también usan las mismas técnicas y componentes de estilo, aunque React Native es un poco diferente.
6. Ambos utilizan Chrome DevTools para depurar aplicaciones.
7. Utilizan las mismas APIs de JavaScript.
8. Ambos fueron desarrollados en Meta. React fue desarrollado por un ingeniero de software llamado Jordan Walke, mientras que React Native nació de una hackathon.

Conclusión

Este artículo exploró las diferencias entre React DOM y React Native, dos herramientas populares de JavaScript. React DOM se usa principalmente para el desarrollo web, mientras que React Native se usa para el desarrollo móvil.

React DOM usa HTML, CSS y JavaScript para el diseño y el estilo, y permite a los desarrolladores crear interfaces de usuario interactivas. React Native, por otro lado, utiliza componentes de interfaz de usuario nativos y APIs para crear aplicaciones móviles multiplataforma.

Una aplicación de calculadora es una aplicación simple que siempre está disponible en todos los dispositivos Android, iOS y de escritorio.

En este artículo, crearemos una aplicación de calculadora utilizando React Native y Expo. Entonces, ¿por qué estamos usando estas herramientas?

React Native es un marco basado en JavaScript que se puede usar para desarrollar aplicaciones móviles en dos sistemas operativos al mismo tiempo: Android e iOS. React Native fue lanzado por primera vez en 2015 por Facebook y es de código abierto.

Puedes encontrar más información sobre React Native aquí.

Expo es un conjunto de herramientas, bibliotecas y servicios que puede usar para simplificar su código React Native. Entonces puede ejecutar aplicaciones React Native en el emulador Expo.

Puedes encontrar más información sobre Expo aquí.

Antes de comenzar a crear una aplicación de calculadora, primero deberás instalar Node.js, React Native y Expo en tu ordenador.

Requisitos previos

1. Instala Node.js: Puedes ver cómo instalarlo aquí.
2. Instala React Native: Puedes ver la documentación de instalación aquí.
3. Instala Expo: Puedes ver la documentación de instalación aquí.

Paso 1: Crear un nuevo proyecto

El primer paso es crear un nuevo proyecto. Usa Expo CLI para crear la base de código React Native con el siguiente comando:

$ expo init calculator-app

Entonces tendrás la opción de iniciar el proyecto que desees. Aquí elegimos la opción en blanco y usamos JavaScript como se muestra a continuación:

Después de eso, el proceso continuará descargando todas las dependencias.

Paso 2: Crear el componente de botón

Cuando desarrolles aplicaciones con React Native, asegúrate de dividir los componentes de la interfaz de usuario en componentes más pequeños para que el código que crees se pueda reutilizar.

Primero, crea una nueva carpeta llamada "componentes" para almacenar el código de tu componente. El primer componente que crearemos es un botón, así que crea un nuevo archivo llamado Button.js. Aquí está el código fuente para el componente Botón:

import { Dimensions, StyleSheet, Text, TouchableOpacity } from "react-native";

export default ({ onPress, text, size, theme }) => {
  const buttonStyles = [styles.button];
  const textStyles = [styles.text];

  if (size === "double") {
    buttonStyles.push(styles.buttonDouble);
  }

  if (theme === "secondary") {
    buttonStyles.push(styles.buttonSecondary);
    textStyles.push(styles.textSecondary);
  } else if (theme === "accent") {
    buttonStyles.push(styles.buttonAccent);
  }

  return (
    <TouchableOpacity onPress={onPress} style={buttonStyles}>
      <Text style={textStyles}>{text}</Text>
    </TouchableOpacity>
  );
};

Explicación del código:

• En la línea 3, hay cuatro propiedades que necesitamos para hacer este componente Botón: onPress, texto, tamaño y tema.
• Cada una de las propiedades tiene una función como onPress para manejar acciones en los botones.
• El componente de botón que creamos tiene 2 tipos de temas, secundarios y de acento, y 1 tamaño, doble.
• El componente de botón usa el componente React Native predeterminado, TouchableOpacity.

Después de crear el código del componente, no olvides agregar el estilo para este componente de botón. Aquí está el código para el estilo del componente:

// set dimmenstion
const screen = Dimensions.get("window");
const buttonWidth = screen.width / 4;

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#333333",
    flex: 1,
    height: Math.floor(buttonWidth - 10),
    alignItems: "center",
    justifyContent: "center",
    borderRadius: Math.floor(buttonWidth),
    margin: 5,
  },
  text: {
    color: "#fff",
    fontSize: 24,
  },
  textSecondary: {
    color: "#060606",
  },
  buttonDouble: {
    width: screen.width / 2 - 10,
    flex: 0,
    alignItems: "flex-start",
    paddingLeft: 40,
  },
  buttonSecondary: {
    backgroundColor: "#a6a6a6",
  },
  buttonAccent: {
    backgroundColor: "#ffc107",
  },
});

Entonces, el código completo de nuestro componente de botón es el siguiente:

import { Dimensions, StyleSheet, Text, TouchableOpacity } from "react-native";

export default ({ onPress, text, size, theme }) => {
  const buttonStyles = [styles.button];
  const textStyles = [styles.text];

  if (size === "double") {
    buttonStyles.push(styles.buttonDouble);
  }

  if (theme === "secondary") {
    buttonStyles.push(styles.buttonSecondary);
    textStyles.push(styles.textSecondary);
  } else if (theme === "accent") {
    buttonStyles.push(styles.buttonAccent);
  }

  return (
    <TouchableOpacity onPress={onPress} style={buttonStyles}>
      <Text style={textStyles}>{text}</Text>
    </TouchableOpacity>
  );
};

// set dimmenstion
const screen = Dimensions.get("window");
const buttonWidth = screen.width / 4;

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#333333",
    flex: 1,
    height: Math.floor(buttonWidth - 10),
    alignItems: "center",
    justifyContent: "center",
    borderRadius: Math.floor(buttonWidth),
    margin: 5,
  },
  text: {
    color: "#fff",
    fontSize: 24,
  },
  textSecondary: {
    color: "#060606",
  },
  buttonDouble: {
    width: screen.width / 2 - 10,
    flex: 0,
    alignItems: "flex-start",
    paddingLeft: 40,
  },
  buttonSecondary: {
    backgroundColor: "#a6a6a6",
  },
  buttonAccent: {
    backgroundColor: "#ffc107",
  },
});

Paso 3: Crear el componente de fila

El siguiente componente que crearemos es un componente Fila. Este componente es útil para crear filas cuando queremos procesar diseños.

Aquí está el código para el componente Fila y su código de estilo:

import { StyleSheet, View } from "react-native";

const Row = ({ children }) => {
  return <View style={styles.container}>{children}</View>;
};

// create styles of Row
const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
  },
});

export default Row;

Esto es lo que está pasando:

• En el componente de fila, hay 1 propiedad que necesitamos: Niños.
• El componente de fila usa el componente de vista predeterminado de React Native.
• flexDirection: "fila" en este estilo se usa para hacer que el diseño sea una fila.

Paso 4: Crear la lógica de la calculadora

Crea una nueva carpeta llamada útil y un nuevo archivo calculator.js . Aquí crearemos una función lógica en la aplicación de calculadora que implementaremos más adelante en el archivo App.js. Aquí está el código completo:

export const initialState = {
  currentValue: "0",
  operator: null,
  previousValue: null,
};

export const handleNumber = (value, state) => {
  if (state.currentValue === "0") {
    return { currentValue: `${value}` };
  }

  return {
    currentValue: `${state.currentValue}${value}`,
  };
};

const handleEqual = (state) => {
  const { currentValue, previousValue, operator } = state;

  const current = parseFloat(currentValue);
  const previous = parseFloat(previousValue);
  const resetState = { operator: null, previousValue: null };

  switch (operator) {
    case "+":
      return {
        currentValue: `${previous + current}`,
        ...resetState,
      };
    case "-":
      return {
        currentValue: `${previous - current}`,
        ...resetState,
      };
    case "*":
      return {
        currentValue: `${previous * current}`,
        ...resetState,
      };
    case "/":
      return {
        currentValue: `${previous / current}`,
        ...resetState,
      };

    default:
      return state;
  }
};

// calculator function
const calculator = (type, value, state) => {
  switch (type) {
    case "number":
      return handleNumber(value, state);
    case "clear":
      return initialState;
    case "posneg":
      return {
        currentValue: `${parseFloat(state.currentValue) * -1}`,
      };
    case "percentage":
      return {
        currentValue: `${parseFloat(state.currentValue) * 0.01}`,
      };
    case "operator":
      return {
        operator: value,
        previousValue: state.currentValue,
        currentValue: "0",
      };
    case "equal":
      return handleEqual(state);
    default:
      return state;
  }
};

export default calculator;

Y esto es lo que está pasando:

• initialState se usa para dar el valor predeterminado a nuestra aplicación de calculadora.
• La función handleNumber sirve para devolver el valor de la calculadora y tiene 2 propiedades: valor y estado.
• El identificador de función Equal sirve para procesar el valor establecido de cada operador matemático y devuelve su valor.
• La calculadora de funciones válida cada operador dado. Por ejemplo, si el número llama a la función handleNumber, si está claro, devolverá el valor de estado predeterminado de initiaState, y así sucesivamente.

Paso 5: Refactorizar el archivo App.js

Una vez que hemos creado todos los componentes y el proceso lógico, el siguiente paso es realizar ajustes en el código del archivo App.js. Aquí está el código completo:

import React, { Component } from "react";
import { SafeAreaView, StyleSheet, Text, View } from "react-native";
import Button from "./components/Button";
import Row from "./components/Row";
import calculator, { initialState } from "./util/calculator";

// create class component of App
export default class App extends Component {
  state = initialState;

  // handle tap method
  HandleTap = (type, value) => {
    this.setState((state) => calculator(type, value, state));
  };

  // render method
  render() {
    return (
      <View style={styles.container}>
        {/* Status bae here */}
        <SafeAreaView>
          <Text style={styles.value}>
            {parseFloat(this.state.currentValue).toLocaleString()}
          </Text>

          {/* Do create componentRow */}
          <Row>
            <Button
              text="C"
              theme="secondary"
              onPress={() => this.HandleTap("clear")}
            />

            <Button
              text="+/-"
              theme="secondary"
              onPress={() => this.HandleTap("posneg")}
            />

            <Button
              text="%"
              theme="secondary"
              onPress={() => this.HandleTap("percentage")}
            />

            <Button
              text="/"
              theme="accent"
              onPress={() => this.HandleTap("operator", "/")}
            />
          </Row>

          {/* Number */}
          <Row>
            <Button text="7" onPress={() => this.HandleTap("number", 7)} />
            <Button text="8" onPress={() => this.HandleTap("number", 8)} />
            <Button text="9" onPress={() => this.HandleTap("number", 9)} />
            <Button
              text="X"
              theme="accent"
              onPress={() => this.HandleTap("operator", "*")}
            />
          </Row>

          <Row>
            <Button text="5" onPress={() => this.HandleTap("number", 5)} />
            <Button text="6" onPress={() => this.HandleTap("number", 6)} />
            <Button text="7" onPress={() => this.HandleTap("number", 7)} />
            <Button
              text="-"
              theme="accent"
              onPress={() => this.HandleTap("operator", "-")}
            />
          </Row>

          <Row>
            <Button text="1" onPress={() => this.HandleTap("number", 1)} />
            <Button text="2" onPress={() => this.HandleTap("number", 2)} />
            <Button text="3" onPress={() => this.HandleTap("number", 3)} />
            <Button
              text="+"
              theme="accent"
              onPress={() => this.HandleTap("operator", "+")}
            />
          </Row>

          <Row>
            <Button text="0" onPress={() => this.HandleTap("number", 0)} />
            <Button text="." onPress={() => this.HandleTap("number", ".")} />
            <Button
              text="="
              theme="primary"
              onPress={() => this.HandleTap("equal", "=")}
            />
          </Row>
        </SafeAreaView>
      </View>
    );
  }
}

// create styles of app
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#202020",
    justifyContent: "flex-end",
  },
  value: {
    color: "#fff",
    fontSize: 42,
    textAlign: "right",
    marginRight: 20,
    marginBottom: 10,
  },
});

Algunas notas rápidas:

• handleTap es una función que creamos que tiene como objetivo proporcionar valores de estado y llamar a utils/calculator.
• Aquí llamamos a dos componentes, Botón y Fila, para diseñar la apariencia de la calculadora, como sus números, operaciones matemáticas y el proceso de cálculo.

Paso 6: Ejecuta la aplicación

En este paso intentaremos ejecutar la aplicación de calculadora en el dispositivo o podemos usar un emulador. Aquí uso el simulador de iPhone de MacOS. Ejecuta el siguiente comando para ejecutar el programa:

$ yarn ios

El proceso en ejecución aquí usa Expo como se muestra a continuación:

Si el proceso de compilación está completo, entonces la pantalla de la aplicación de calculadora que programamos será así:

Conclusión

Eso es suficiente para este artículo. Aprendiste sobre estilo, componentes, propiedades y estados en React Native y creaste una aplicación de calculadora funcional.

Si necesitas el código fuente completo, puedes visitar mi repositorio de GitHub aquí: https://github.com/bangadam/calculator-app

¡Gracias por leer!

¡Disponible para un nuevo proyecto! Hablemos.
Correo electrónico: bangadam.dev@gmail.com
Linkedin: https://www.linkedin.com/in/bangadam

Una lista con preguntas frecuentes de Java en entrevistas de trabajo para programadores.

¡Hola todos! En los últimos años, he estado compartiendo muchas preguntas y debates sobre entrevistas de Java individualmente. Muchos de mis lectores me han pedido que las reúna para poder tenerlas en un mismo lugar. Este post es el resultado de ello.

Este artículo contiene más de 50 preguntas de entrevistas de Java que cubren todos los temas importantes, como los fundamentos de Core Java, Java Collection Framework , Java Multithreading and Concurrency , Java IO , JDBC , JVM Internals , Problemas de codificación , Programación orientada a objetos , etc.

Las preguntas también están extraídas de varias entrevistas y no son, en modo alguno, muy difíciles. Es posible que ya las hayas visto en tu teléfono o en la ronda de entrevistas cara a cara.

Las preguntas también son muy útiles para repasar temas importantes como hilos o subprocesos múltiples y colecciones. También he compartido algunos recursos útiles para seguir aprendiendo y mejorando, como The Complete Java MasterClass para repasar y llenar los vacíos en tus habilidades de Java.

Entonces... ¿Qué estamos esperando? Aquí está la lista de algunas de las preguntas de Java más frecuentes en entrevistas para desarrolladores de Java principiantes y experimentados.

Más de 50 preguntas de entrevista de Java para programadores experimentados de 2 a 3 años

Pues... sin perder más tiempo, aquí está mi lista de algunas preguntas de entrevista de Core Java más frecuentes para programadores principiantes. Esta lista se enfoca en principiantes y desarrolladores menos experimentados, con 2 o 3 años de experiencia en Java.

1) ¿Cómo consigue Java la independencia de la plataforma? (respuesta)

pista: bytecode y Java Virtual Machine

2) ¿Qué es el ClassLoaderen Java? (respuesta)

pista: parte de JVM que carga bytecodes para clases. Puedes escribir el tuyo propio.

3) ¿Escribir un programa Java para comprobar si un número es par o impar? (respuesta)

pista: puedes usar el operador bit a bit, como AND bit a bit, recuerda que, los números pares tienen un cero al final en formato binario y los impares acaban en 1.

4) ¿Diferencia entre ArrayListy HashSeten Java? (respuesta)

pista: todas las diferencias entre Listy Setson aplicables aquí, por ejemplo, ordenamiento, duplicados, búsqueda aleatoria, etc. Consulta Fundamentos de Java: colecciones de Richard Warburton para obtener más información sobre ArrayList, HashSet y otras colecciones importantes en Java.

5) ¿Qué es el bloqueo de doble verificación en Singleton? (respuesta)

pista: verifica dos veces si las instancias están inicializadas o no, primero sin bloqueo y segundo con bloqueo.

6) ¿Cómo se crea Singleton seguro para subprocesos en Java? (respuesta)

pista: de muchas maneras, como usar Enum o usar un patrón de bloqueo verificado dos veces así cómo usar una clase estática anidada.

7) ¿Cuándo usar la variable volátil en Java? (respuesta)

pista: cuando necesitas indicar a la JVM que una variable puede ser modificada por múltiples subprocesos y dar una pista a la JVM para que no almacene en caché su valor.

8) ¿Cuándo usar una variable transitoria en Java? (respuesta)

pista: cuando quieras hacer que una variable no sea serializable en una clase que implemente la interfaz Serializable. En otras palabras, puedes usarla para una variable cuyo valor no quieras guardar. Consulta The Complete Java MasterClass para obtener información sobre las variables transitorias en Java.

9) ¿Diferencia entre la variable transitoria y volátil en Java?  (respuesta)

pista: totalmente diferente, una se usa en el contexto de la serialización mientras que la otra se usa en concurrencia.

10) ¿Diferencia entre serializable y externalizable en Java? (respuesta)

pista: externalizable da más control sobre el proceso de serialización.

11) ¿Podemos sobreescribir un método privado en Java? (respuesta)

pista: No, porque no está visible en la subclase, que es requisito principal para sobreescribir un método en Java.

12) ¿Diferencia entre Hashtable y HashMapen Java? (respuesta)
pista: varias pero la más importante es que Hashtable está sincronizada, mientras que HashMapno lo está. También es heredada y lenta en comparación con HashMap.

13) ¿Diferencia entre List y Set en Java? (respuesta)

pista: Listestá ordenada y permite duplicacidad. Setestá desordenado y no permite elementos duplicados.

14) Diferencia entre ArrayList y Vectoren Java (respuesta)

pista: muchas, pero lo más importante es que ArrayList no está sincronizada y es rápida, mientras que Vector está sincronizada y es lenta. También es una clase heredada como Hashtable.

15) ¿Diferencia entre Hashtabley ConcurrentHashMapen Java? (respuesta)

pista: más escalable. Consulte Fundamentos de Java: Colecciones de Richard Warburton para obtener más información.

16) ¿Cómo consigue ConcurrentHashMap escalabilidad? (respuesta)

pista: dividiendo el mapa en segmentos y solo bloqueando durante la operación de escritura.

17) ¿Qué dos métodos sobreescribir para que Objectse use como Keyen HashMap? (respuesta)

pista: equals y hashcode

18) ¿Diferencia entre esperar y dormir en Java? ( respuesta )

pista: el método wait() libera el bloqueo o monitoriza, mientras que sleep() no lo hace.

19) ¿Diferencia entre notify y notifyAllen Java? (respuesta)

pista: notify notifica que un subproceso aleatorio está esperando el bloqueo mientras notifyAll informa a todos los subprocesos que esperan un monitor. Si estás seguro de que solo hay un subproceso en espera, usa notify, sinó notifyAlles preferible. Consulta el minicurso de conceptos básicos de creación de subprocesos impartido por el campeón de Java Heinz Kabutz para obtener más información sobre los conceptos básicos de creación de subprocesos.

20) ¿Por qué anula el código hash, junto con equals()Java? (respuesta)

pista: para cumplir con la función de equals y hashcode, que se requiere si planeas almacenar un objeto en clases de colección, por ejemplo, HashMapo ArrayList.

21) ¿Qué representa el factor de carga de HashMap? (respuesta)

pista: el umbral que activa el cambio de tamaño HashMapes generalmente 0,75, lo que significa que HashMap cambia de tamaño si está lleno en un 75 por ciento.

22) ¿Diferencia entre ArrayList y LinkedListen Java? (respuesta)

pista: la misma que una matriz y una lista vinculada, una permite la búsqueda aleatoria mientras que la otra no. La inserción y la eliminación son fáciles en la lista vinculada, pero la búsqueda es fácil en una matriz. Consulta Fundamentos de Java: Colecciones , el curso de Richard Warburton sobre Pluralsight, para obtener más información sobre la estructura de datos de colección esencial en Java.

23) ¿Diferencia entre CountDownLatchy CyclicBarrieren Java? (respuesta)

pista: puedes reutilizar CyclicBarrierdespués de que se rompa la barrera, pero no puedes reutilizar CountDownLatchdespués de que el conteo llegue a cero.

24) ¿Cuándo usar Runnable vs Threaden Java? (respuesta)

pista: siempre

25) ¿Cuál es el significado de que Enum sea seguro para tipos en Java? (respuesta)

pista: significa que no se puede asignar una instancia de diferente tipo Enum a una variable Enum. por ejemplo, si tienes una variable como DiaDeLaSemana, entonces no puedes asignarle al día un valor desde una enumeración DiaDelMes.

26) ¿Cómo funciona Autoboxing of Integer en Java? (respuesta)

pista: Usando el método valueOf() en Java.

27) ¿Diferencia entre PATHy Classpath en Java? (respuesta)

pista: PATHlo utiliza el sistema operativo, mientras que Classpath lo utiliza JVM para localizar archivos binarios de Java, por ejemplo, archivos JAR o archivos de clase. Consulta Fundamentos de Java: la plataforma principal para obtener más información acerca de PATH, Classpath, y otras variables de entorno de Java.

28) ¿Diferencia entre sobrecarga y anulación de métodos en Java? (respuesta)

pista: la sobreescritura ocurre en la subclase mientras que la sobrecarga ocurre en la misma clase. Además, la sobreescritura es una actividad en tiempo de ejecución, mientras que la sobrecarga se resuelve en tiempo de compilación.

29) ¿Cómo evitar que una clase se subclasifique en Java? (respuesta)

pista: simplemente haciendo que tu constructor sea privado

30) ¿Cómo restringir una clase para que no sea utilizada por el cliente? (respuesta)

pista: haciendo que el constructor sea privado o lanzando una excepción desde el constructor

31) ¿Diferencia entre StringBuildery StringBufferen Java? (respuesta)

pista: StringBuilderno está sincronizado mientras que StringBufferestá sincronizado.

32) ¿Diferencia entre polimorfismo y herencia en Java? (respuesta)

pista: la herencia permite la reutilización del código y construye la relación entre clases, lo cual es requerido por el polimorfismo, que proporciona un comportamiento dinámico. Consulta Fundamentos de Java: diseño orientado a objetos para obtener más información sobre las funciones de programación orientada a objetos.

33) ¿Podemos sobreescribir un método estático en Java? (respuesta)

pista: No, porque la sobreescritura se resuelve en tiempo de ejecución mientras que la llamada al método estático se resuelve en tiempo de compilación.

34) ¿Podemos acceder al método privado en Java? (respuesta)

pista: sí, en la misma clase pero no fuera de la clase

35) ¿Diferencia entre interfaz y clase abstracta en Java? (respuesta)

pista: desde Java 8 , la diferencia es borrosa. Sin embargo, una clase Java aún puede implementar múltiples interfaces pero solo puede extender una clase.

36) ¿Diferencia entre el analizador DOM y SAX en Java? (respuesta)

pista: DOM carga todo el archivo XML en la memoria mientras que SAX no lo hace. Es un analizador basado en eventos y se puede usar para analizar un archivo grande, DOM es rápido y es preferible para archivos pequeños.

37) ¿Diferencia entre la palabra clave throw y throws en Java? (respuesta)

pista: throws declara qué excepción puede lanzar un método en caso de error, pero la palabra clave throw en realidad arroja una excepción. Consulta Conceptos básicos de Java: manejo de excepciones para obtener más información sobre el manejo de excepciones en Java.

38) ¿Diferencia entre iteradores a prueba de fallos y rápidos en Java? (respuesta)

pista: a prueba de fallos no arroja ConcurrentModificationException mientras que fail-fast lo hace cada vez que detecta un cambio externo en la colección subyacente mientras itera sobre ella.

39) ¿Diferencia entre iterador y enumeración en Java? (respuesta)

pista: Iterator también proporciona la capacidad de eliminar un elemento mientras itera, sin embargo Enumeration no lo permite.

40) ¿Qué es IdentityHashMap en Java? (respuesta)

pista: Un Map, que utiliza el operador de igualdad== para verificar la igualdad en lugar del método equals().

41) ¿Qué es el String pool en Java? (respuesta)

pista: un grupo de String literales. Recuerda que se movió al heap desde el perm gen space en JDK 7.

42) ¿Puede una clase Serializable contener un campo no serializable en Java? (respuesta)

pista: Sí, pero debe ser estático o transitorio.

43) ¿Diferencia entre this y super en Java? (respuesta)

pista: this se refiere a la instancia actual, mientras que super se refiere a una instancia de la superclase.

44) ¿Diferencia entre Comparatory Comparableen Java? (respuesta)

pista: Comparatordefine el orden personalizado mientras Comparabledefine el orden natural de los objetos, por ejemplo, el orden alfabético para String. Consulta The Complete Java MasterClass para obtener más información sobre la clasificación en Java.

45) ¿Diferencia entre java.util.Date y java.sql.Date en Java? (respuesta)

pista: la primera contiene tanto la fecha como la hora, mientras que la segunda contiene sólo  parte de la fecha.

46) ¿Por qué los métodos esperar y notificar se declaran en la claseObject en Java? (respuesta)

pista: porque requieren un bloqueo que solo está disponible para un Object.

47) ¿Por qué Java no admite herencias múltiples? (respuesta)

pista: No es compatible debido a una mala experiencia con C++, pero con Java 8, en cierto sentido sí lo es; sólo la herencia múltiple deType no son compatibles con Java ahora.

48) ¿Diferencia entre Excepción marcada y no marcada en Java? (respuesta)

pista: en caso de ser checked, debes manejar la excepción usando el bloque catch, mientras que en caso de no ser checked, depende del programador; no dará error al compilar.

49) ¿Diferencia entre error y excepción en Java? (respuesta)

pista: estoy cansado de escribir por favor comprueba la respuesta

50) ¿Diferencia entre la condición de Race y el Deadlock en Java? (respuesta)

pista: ambos son errores que ocurren en una aplicación concurrente, uno ocurre debido a la programación de hilos, threads o subprocesos mientras que el otro ocurre debido a una codificación deficiente. Consulta Multithreading and Parallel Computing in Java (Cómputo en paralelo y subprocesos múltiples en Java) para obtener más información sobre Deadlocks, condiciones de Race y otros problemas de subprocesos múltiples (multithreading).

Notas de cierre

Gracias, Llegaste al final del artículo… ¡Buena suerte con tu entrevista de programación! Ciertamente no será fácil, pero siguiendo esta hoja de ruta y esta guía, estarás un paso más cerca de convertirte en un ingeniero de DevOps .

Recursos adicionales (en inglés)

P.D. — si necesitas algunos recursos GRATUITOS para aprender Java, puedes consultar esta lista de cursos gratuitos de Java para comenzar tu preparación.

P.S.S. — no he proporcionado la respuesta a las preguntas de la entrevista compartidas en la imagen "¿Cuántos objetos String se crean en el código?" ¿Podrías adivinar y explicar?

Este tutorial requiere conocimientos previos sobre el uso del framework express.js

¿Por qué necesitamos la validación en el lado del servidor?

• La validación en el lado del cliente no es suficiente y puede ser subvertida
• Mayor propensión a ataques de intermediario. El servidor nunca debe confiar en el lado del cliente
• Un usuario puede desactivar la validación de JavaScript del lado del cliente y manipular los datos

Si has creado aplicaciones web utilizando un framework Express o cualquier otro framework Node.js, la validación juega un papel crucial en cualquier aplicación web que requiera que valide la solicitud body param query.

Escribir tu propia función de middleware puede ser engorroso si

• Quieres avanzar rápido a la vez que mantienes la calidad del código o
• Quieres evitar usar if (req.body.head) o if (req.params.isCool) en tu función del controlador principal donde defines la lógica de negocios

En este tutorial, aprenderás cómo validar la entrada de datos en una aplicación Express.js utilizando un módulo popular y de código abierto llamado express-validator.

Introducción a express-validator

La definición en Github dice:

express-validator es un conjunto de middlewares express.js que envuelve el validador validator.js  y otras funciones de sanitización.

El módulo implementa cinco importantes API’s:

• Check API
• Filter API
• Sanitization chain API
• Validation chain API
• Validation Result API

Demos un vistazo a la creación de un usuario mediante una route básica sin ningún módulo de validación para crearlo: /route/user.js

/**
* @api {post} /api/user Create user
* @apiName Create new user
* @apiPermission admin
* @apiGroup User
*
* @apiParam  {String} [userName] username
* @apiParam  {String} [email] Email
* @apiParam  {String} [phone] Phone number
* @apiParam  {String} [status] Status
*
* @apiSuccess (200) {Object} mixed `User` object
*/

router.post('/', userController.createUser)

Ahora en el controlador de usuario /controllers/user.js

const User = require('./models/user')

exports.createUser = (req, res, next) => {
  /** Aquí debe validar la entrada del usuario. 
    Sólo el Nombre del usuario y el email serán campos requeridos
 */
  
  const { userName, email, phone, status } = req.body
  if (userName && email &&  isValidEmail(email)) { 
    
    // isValidEmail es una función personalizada que es necesario escribir desde cero o usar un módulo npm para validar el email 
    User.create({
      userName,
      email,
      phone,
      status,   
    })
    .then(user => res.json(user))
    .catch(next)
  }
}

El código de arriba es solo un ejemplo básico de validación de campos personalizados.

Puedes implementar algunas validaciones en tu modelo de usuario usando Mongoose. Una buena práctica es asegurarse de que la validación ocurra antes que la lógica de negocios.

express-validator se encargará de todas estas validaciones y también de la sanitización de las entradas

Instalación

npm install --save express-validator

Incluye módulo de tu archivo principal server.js:

const express = require('express')
const bodyParser = require('body-parser')
const expressValidator = require('express-validator')
const app = express()
const router = express.Router()

app.use(bodyParser.json())

app.use(expressValidator())

app.use('/api', router)

El uso de express-validator. El archivo /routes/user.js quedaría así:

router.post(
  '/', 
  userController.validate('createUser'), 
  userController.createUser,
)

userController.validate es una función middleware que se explica a continuación. Acepta el nombre del method para el cual se usará la validación.

La función middleware  validate() sería la siguiente en nuestro /controllers/user.js:

const { body } = require('express-validator/check')

exports.validate = (method) => {
  switch (method) {
    case 'createUser': {
     return [ 
        body('userName', 'userName doesn't exists').exists(),
        body('email', 'Invalid email').exists().isEmail(),
        body('phone').optional().isInt(),
        body('status').optional().isIn(['enabled', 'disabled'])
       ]   
    }
  }
}

La función body sólo válida req.body y se le pasan dos argumentos. El primero es property name. Y el segundo es un mensaje personalizado message que se mostrará si la validación falla. Si no se proporciona un mensaje personalizado, mostrará un mensaje por defecto.

Como hemos podido ver, para un campo required usamos el método .exists() . Usamos .optional() para un campo optional. Igualmente, isEmail()  e isInt() sirven para email e integer.

Si quieres definir una entrada que admita sólo ciertos valores, podemos usar .isIn([]). Esta función toma un array de valores, y si recibe otros valores lanza un error.

Por ejemplo, el campo status del código de arriba sólo puede tener un valor binarioenabled o disabled. Si el usuario proporciona otro valor, la función lanza un error.

Dentro de /controllers/user.js añadimos una función createUser dónde describimos la lógica de negocios. Esta puede llamarse después de  validate() con el resultado de las validaciones.

const { validationResult } = require('express-validator/check');

exports.createUser = async (req, res, next) => {
   try {
      const errors = validationResult(req); // Encuentra los errores de validación en esta solicitud y los envuelve en un objeto resultante de una práctica función

      if (!errors.isEmpty()) {
        res.status(422).json({ errors: errors.array() });
        return;
      }

      const { userName, email, phone, status } = req.body
      
      const user = await User.create({

        userName,

        email,

        phone,

        status,   
      })

      res.json(user)
   } catch(err) {
     return next(err)
   }
}

Si te preguntas qué es validationResult(req)...

Esta función encuentra los errores de validación en la solicitud y los envuelve en un objeto

Ahora, siempre que en la solicitud req.body se incluyan parámetros no válidos o falte el campo userName, el servidor responderá lo siguiente:

{
  "errors": [{
    "location": "body",
    "msg": "userName is required",
    "param": "userName"
  }]
}

A su vez, si falla la validación de userName o email cada error devuelto por el método, .array() tendrá el siguiente formato por defecto:

{   
  "msg": "El mensaje de error",
   
  "param": "nombre del parámetro", 
  
  "value": "valor del parámetro",   
  // Location del parámetro que ha generado el error.   
  // Sus correspondientes body, query, params, cookies o headers.   
  "location": "body",    
  
 // nestedErrors sólo existe cuando se usa la función oneOf 
  "nestedErrors": [{ ... }] 
}

Como hemos podido ver, este módulo nos ayuda con la mayor parte de las validaciones personalizadas, permitiéndonos mantener un código de calidad centrado principalmente en la lógica de negocios.

Esta ha sido una introducción a la validación de entradas usando el módulo express-validator y en la parte 2 de esta serie de artículos podrás ver cómo hacer una validación personalizada de una matriz de elementos y más

Artículo original en inglés publicado en 101node.io el 2 de septiembre del 2018.