Índice del curso de ReactJS

  1. Instalación y configuración inicial
  2. Estructura básica de un proyecto con ReactJS
  3. JSX
  4. Recogida de datos
  5. State
  6. Componentes
  7. Props
  8. Renderizado condicional
  9. Arrays
  10. Style
  11. Valor por defecto de una combo
  12. React router
  13. Fetch API
  14. Context API
  15. Login
  16. Redux
  17. React Developer Tool
  18. Build
  19. TypeScript
  20. React Native
  21. Expo
  22. Create React App
  23. Compartir código entre React Web y React Native. Dos aproximaciones:
    1. Empaquetar con NPM
    2. Importar código desde fuera del proyecto pero en el propio ordenador
    3. Importar código con prototype

Empaquetar con NPM

  1. Creamos una carpeta en nuestro ordenador en la que añadiremos el código del módulo. Dentro de esta carpeta, crearemos la carpeta src, que es donde almacenaremos los ficheros fuente que vamos a compilar para que estos compilados sean accesibles a través de npm.
  2. npm init
  3. Añadimos propiedades al package.json:
    "main": "./lib",
    "files": [
      "dist",
      "lib"
    ],
    "scripts": {
        "clean": "rm -rf ./lib",
        "copy-assets": "cp -R ./src/assets ./lib",
        "test": "echo \"Error: no test specified\" && exit 1",
        "create-dist": "npm run clean && babel ./src --out-dir ./lib && npm run copy-assets",
        "build-pro": "webpack -p"
      },
      "devDependencies": {
        "@babel/runtime": "^7.5.5",
        "babel-plugin-import-directory": "^1.1.0",
        "babel-plugin-inline-import": "^3.0.0",
        "babel-plugin-wildcard": "^5.0.0",
        "@babel/cli": "^7.0.0",
        "@babel/core": "^7.3.4",
        "@babel/plugin-transform-runtime": "^7.3.4",
        "@babel/preset-env": "^7.3.4",
        "babel-loader": "^8.0.5",
        "babel-plugin-module-resolver": "^3.2.0",
        "terser-webpack-plugin": "^1.2.3",
        "webpack": "^4.29.6",
        "webpack-cli": "^3.3.0",
        "webpack-dev-server": "^3.2.1"
      }
  4. Crearemos el fichero webpack.config.js
    const path = require('path');
    const TerserPlugin = require('terser-webpack-plugin');
    
    // Constant with our paths
    const paths = {
      ROOT: path.resolve(__dirname),
      DIST: path.resolve(__dirname, 'dist'),
      SRC: path.resolve(__dirname, 'src'),
    };
    
    const development = process.env.NODE_ENV === 'development';
    
    module.exports = {
      entry: path.join(paths.SRC, 'index.js'),
      output: {
        path: paths.DIST,
        filename: 'bundle.js',
        publicPath: '/',
        libraryTarget: 'commonjs2',
      },
      module: {
        rules: [
          {
            test: /\.(js)$/,
            exclude: /node_modules/,
            use: 'babel-loader',
          },
        ],
      },
      resolve: {
        // Enable importing JS files without specifying their's extension
        extensions: ['.js'],
      },
      optimization: {
        minimize: true,
        minimizer: [
          new TerserPlugin({
            sourceMap: development,
            cache: true,
            parallel: true,
            terserOptions: {
              compress: true,
              ecma: 6,
              ie8: false,
              mangle: true,
            },
          }),
        ],
      },
      mode: process.env.NODE_ENV,
      devtool: development && 'source-map',
    };
  5. Creamos el fichero .babelrc:
    {
      "presets": [
        "@babel/preset-env"
      ],
      "plugins": [
        "@babel/plugin-transform-runtime"
      ],
    }
  6. Ejecutamos el siguiente comando, que instala las dependencias del package.json
    npm i
  7. Ejecutamos el siguiente comando, que genera la carpeta lib que son las que se importaráne en el proyecto final.
    npm run create-dist
  8. En el caso que no la tengamos, nos creamos una cuenta en https://www.npmjs.com/.
  9. npm login
  10. Subimos el proyecto a internet:
    npm publish
  11. Ya podemos instalar el módulo en otro proyecto:
    npm i modulo --save

Si modificamos el código el código del módulo, tenddremos que:

  1. Actualizamos el código de la versión en el package.json.
  2. Volvemos a publicar:
    npm publish
icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

Para dudas técnicas sobre los ejercicios de mis cursos es necesario estar suscrito.