Í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

React router

Nos permite cargar unos componentes u otros en función de la url.

npm i react-router
npm i react-router-dom

Documentación de react-router

Configuración básica

src/App.jsimport React from 'react';
import Routes from './application/routes';

const App = () => <Routes />;;

export default App;
src/application/routes.jsimport React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from '../pages/home'
import Contacto from '../pages/contacto'
import Producto from '../pages/producto'

const Routes = () => (
    <BrowserRouter>
        <Switch>
            { /*El atributo exact significa que ese nodo no afecta a sus descendientes.
             Si no lo ponemos, al escribir /login, accederíamos igualmente a Home */}    
            <Route exact path="/" component={Home} />
            <Route path="/contacto" component={Contacto} />
            <Route path="/producto/:id" component={Producto} />
             { /* Es muy recomendable añadir esta ruta para obtener un mensaje de error en el caso de que la 
            ruta no exista. De lo contrario, si la ruta no existe llegaremos a una página en blanco */}    
            <Route path="*" component={() => <div>404</div> } />
        </Switch>
    </BrowserRouter>
);

export default Routes;
src/pages/home/home.jsimport React from 'react';
import { NavLink } from 'react-router-dom';

const Home = _ => 
    <ul>
        <li><NavLink to={`/`}>Inicio</NavLink></li>
        <li><NavLink to={`/contacto`}>Contacto</NavLink></li>
        <li><NavLink to={`/producto/1`}>Producto 1</NavLink></li>
        <li><NavLink to={`/ajksdfkjhasdk`}>Error en la url</NavLink></li>
    </ul>

export default Home;
Descargar ejemplo router app

Redirección desde React

Definimos el método que ejecutará la redirección:

const Contacto = ({ history }) => {
    const pulsado = _ => {
        history.replace('/');
    }

    return(  
            <button onClick={pulsado}>Pulsame</button>
    )
}
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.