Configurar el directorio raiz en React

Todos los que desarrollan usando React saben que, al construir el proyecto para desplegarlo en producción, usando el comando npm o yarn, e...

Configurar el directorio raiz en React



Todos los que desarrollan usando React saben que, al construir el proyecto para desplegarlo en producción, usando el comando npm o yarn, este asume por defecto que el proyecto será montado en un servidor como raíz, pero no siempre esto es así y podríamos necesitar montar React en algún subdirectorio, para lograrlo debemos realizar lo siguiente:

1.- Establecer nuestra nueva ruta raíz en la llave “homepage” dentro del archivo package.json de nuestro proyecto React
"homepage": "https://myapp.com/directory-name",


2.- Establecer nuestro nuevo directorio en el prop basename del enrutador, si es que hacemos uso de el
<Router basename={'/directory-name'}>
    <Route path='/' component={Home} />
    {/* … */}
</Router>


3.- Actualizar cada ruta que tengamos en nuestro enrutador, si es que hacemos uso de ello
<Router basename={'/directory-name'}>
    <Route path={`${process.env.PUBLIC_URL}/`} component={Home} />
    <Route path={`${process.env.PUBLIC_URL}/news`} component={News} />
    <Route path={`${process.env.PUBLIC_URL}/about`} component={About} />
</Router>


4.- Finalmente si usamos link también deberemos actualizarlos
<Link to={`${process.env.PUBLIC_URL}/page-path`}>…</Link>


Espero les sea de utilidad, saludos y felices códigos.


React cambiar directorio build en yarn o npm


Continuando con una serie de posts sobre esta maravillosa librería. En React solemos usar yarn o npm para construir el proyecto listo para producción, esto lo logramos usando el comando:


  >yarn build


Este nos genera por defecto un directorio llamado build en la raiz del proyecto, donde encontraremos todos los archivos requeridos para poner en nuestro servidor pero ¿Que pasa si no lo necesitamos ahí? pues bien para cambiar el destino de los archivos de build, se modifica el package.json de nuestro proyecto y dentro de la entrada "script" agregamos


// Aquí usamos un comando Windows para copiar a otro destino final
"postbuild": "xcopy /s/Y build\\*.* ..\\..\\xampp\\htdocs\\control\\react\\",


// O para Linux
"postbuild": "cp -r build ../../xampp/htdocs/control/react/",


Con lo anterior cada vez que ejecutemos el comando "yarn build" al terminar de ejecutarse la tarea, este copiara los archivos del directorio build al directorio que le indicamos, nos ahorramos tener que hacerlo manualmente y/o que se nos olvide hacerlo.

Espero les sea de utilidad, saludos y felices códigos.

Cambiar un valor del state del padre desde hijo en React

Estos días ando metido en el mundo con más estilo, mas cool o más “hispter” XD de JavaScript y es que usando librerías como React que es maravillosa, te sientes a la última moda en tecnología y hasta dan ganas de iniciar una startup al más puro estilo silicon valley (por cierto, grandiosa serie de HBO) pero en el andar de este mundillo te topas con temas como ¿Se puede afectar un valor del state de un componente principal o padre desde un componente hijo? Vamos a poner un escenario, tienes tu App.js donde montas otros componentes como por ejemplo un Boton.js que debe contener un botón cualquiera que al hacer clic en él, debe actualizar un valor del state en App.js de forma que podamos disfrutar de las bondades del state. Bueno aquí la técnica.

Para lograr este comportamiento solo debemos definir un método manejador en App.js que se encargara de actualizar el valor del state, para luego pasarlo como prop al componente Boton.js, vamos al código:

Componente App.js:

class App extends Component {
  state = {
    saludo: "Saludos"
  }

  // Usamos una función flecha, para no tener que hacer
  // el binding desde el constructor
  // Nos ahorramos unas líneas y se ve más elegante ;-)
  handler = (param) => {
    this.setState({
      saludo: param
    })
  }

En el render donde montamos el componente buscador, pasamos el método manejador:
render() {
    return(
      <div>
        <label>{this.state.saludo}</label>
        <Boton handler={this.handler} />
      </div>
    )
  }

Componente Boton.js:

class Boton extends Component {
  someMethod = () => {
    this.props.handler("Hola mundo")
  }
 
  render() {
    return(
      <div>
      <Button onClick={this.someMethod}>Clic aqui</Button>
      </div>
    )
  }

Con esta técnica, si hacemos clic en el botón “Clic aquí”, este afectara al valor saludo del state del componente App, actualizando en automatico el correspondiente texto del label en App.js.

Así de simple, espero les sea de utilidad. Saludos y felices códigos.