Í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. Sockets
  19. Build
  20. TypeScript
  21. React Native
  22. Expo
  23. React native
  24. Navigation
  25. Compilar con Expo en la nube
  26. Create React App
  27. 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

Login

Pasos:

  1. Tendremos una página con un componente Login que recogerá el nombre y el usuario de un formulario y se los mandará al servidor.
  2. El servidor le enviará de vuelta un token generado con jwt a partir de la id de ese usuario.
  3. Guardaremos ese token globalmente usando redux.
  4. Tendremos una segunda página en la que veremos la id del usuario logueado sólo si este ha logrado loguearse con éxito.
    const ContenidoRestringido = ({ accessToken }) => { 
        const [userData, setUserData] = useState(null);
    
        useEffect(() => {
            getJson('/user-data', '', { headers: { accessToken } }).then(setUserData);
        },[]);
    
        return (
            <div>
                <p>Contenido reestringido</p>
                {userData && (
                    <div>{userData.idRecuperadaDeLaBaseDeDatos}</div>
                )}
            </div>
        );
    }
    
    const mapStateToProps = state => {
        return{
            accessToken: selectToken(state),
        }
    }
    
    export default connect(mapStateToProps)(ContenidoRestringido);
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.