React JS

Instalar React

$ yarn add react react-dom --dev
$ yarn add babel-preset-react --dev
$ yarn add eslint-plugin-react --dev

Agrega este contenido dentro de .eslintrc.js
module.exports = {
    extends: ['eslint:recommended', 'plugin:react/recommended'],

React Components

export defualt class AComponent extends React.Component {

    construct(props) {
        super(props);
        this.state = {
            row = null   
        }
    }

    //Este método es obligatorio
    render() {
    }
}

Functional Components

const MyButton = ({ disabled, text }) => (
    
);
MyButton.defaultProps = {
    text: 'My Button',
    disabled: false
};
export default MyButton;

Props y state

Props son vlores que recibe el componente que son inmutables, el componente no las va a cambiar
cuando se realiza un evento.
State si las puede cambiar el componente

//Cuando se va a cambiar el state pero se va a utilizar un valor del mismo state se tiene que pasar con una callback
//donde state es el estado actual
this.setState(state => ({
    ...state,
    fourth: state.doneMessage
})

lifecycles

getDerivedStateFromProps() : This method allows you to update the state of
the component based on property values of the component. This method is called
when the component is initially rendered and when it receives new property
values.
render() : Returns the content to be rendered by the component. This is called
when the component is first mounted to the DOM, when it receives new
property values, and when setState() is called.
componentDidMount() : This is called after the component is mounted to the
DOM. This is where you can perform component initialization work, such as
fetching data.
shouldComponentUpdate() : You can use this method to compare new state or
props with current state or props. Then, you can return false if there's no need to
re-render the component. This method is used to to make your components more
efficient.
getSnapshotBeforeUpdate() : This method lets you perform operations
directly on DOM elements of your component before they're actually committed
to the DOM. The difference between this method and render() is that
getSnapshotBeforeUpdate() isn't asynchronous. With render() , there's a
good chance that the DOM structure could change between when it's called and
when the changes are actually made in the DOM.
componentDidUpdate() : This is called when the component is updated. It's rare
that you'll have to use this method.

Portals

https://reactjs.org/docs/portals.html
A component that should be rendered as a dialog probably
doesn't need to be mounted at the parent. Using a portal, you can control specifically where
your component's content is rendered

Paquetes utiles

$ npm install --save redux-saga
$ npm install --save redux
$ npm i -S react-redux
$ npm i -D redux-devtools

React Native

Crear aplicación:

$ npx react-native init my-project
$ cd my-project
$ yarn start

Abrir emulador:


//https://developer.android.com/studio/run/emulator-commandline
//Ir a la carpeta del emulador de android
$ cd ~/Android/Sdk/emulator
//podemos listar nuestros dipositivos
$ ./emulator -list-avds
//Ejecutar el dispositivo
$ ./emulator -avd NOMBRE_DISPOSITIVO
//Otra opción para ejecutar el dispositivo
//Performs a cold boot, and saves the emulator state on exit.
$ ./emulator -avd NOMBRE_DISPOSITIVO -no-snapshot-load

Paquetes utiles:


$ yarn add @react-navigation/native react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/stack @react-navigation/bottom-tabs @react-navigation/drawer --save
$ yarn add react-native-elements --save
$ yarn add react-native-vector-icons --save
$ yarn add redux-saga --save
$ yarn add redux --save
$ yarn add react-redux --save
$ yarn add final-form react-final-form --save
$ yarn add apisauce --save 
$ yarn add jwt-decode --save
$ yarn add moment --save
$ yarn add prop-types --dev 

Principios de la OOP

Clases:

  1. Creación de clases:
    Si queremos guardar información, creamos una clase solo para esa funcionalidad. Estas clases se conocen como Modelos o entidades. Ejemplo Printer.
    Si necesitamos realizar una funcionalidad, creamos una clase para esto. Se las conoce como Managers, o Services Classes. Ejemplo PrinterManager.
    Estas clases suelen tener propiedades de configuración, estas nunca deben estar harcodeadas dentro. Siempre se tienen que pasar por parámetros en el constructor (Dependency Injection).
    Además, nunca se debe crear dentro de una de estas clases, una clase de estas. Es decir dentro de una clase manager no se debe crear otra clase manager. Debemos pasarle esta clase que queremos crear por parametros.
  2. Principio de única responsabilidad:
    Una clase debe tener una única responsabilidad.

Herencia:

  1. Se debe evitar dar a una clase padre información sobre las clases hijas.