Scribd
Cargar
98 vistas8 páginas

Lab 13 - Reactjs Routing

Este documento describe cómo implementar enrutamiento (routing) en una aplicación React usando React Router DOM. Explica cómo crear componentes, importarlos e implementar rutas para mostrar diferentes componentes en diferentes URLs. También cubre cómo agregar navegación entre las rutas usando enlaces y cómo manejar páginas 404. Finalmente, discute cómo pasar parámetros a través de la URL.

Cargado por

MilagrosArteaga
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOC, PDF, TXT o lee en línea desde Scribd
98 vistas8 páginas

Lab 13 - Reactjs Routing

Este documento describe cómo implementar enrutamiento (routing) en una aplicación React usando React Router DOM. Explica cómo crear componentes, importarlos e implementar rutas para mostrar diferentes componentes en diferentes URLs. También cubre cómo agregar navegación entre las rutas usando enlaces y cómo manejar páginas 404. Finalmente, discute cómo pasar parámetros a través de la URL.

Cargado por

MilagrosArteaga
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOC, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

Desarrollo de Aplicaciones Empresariales ReactJS

Desarrollo de Aplicaciones Empresariales


IV Ciclo
2019-I
Laboratorio Nº 11

“Componentes en ReactJS”

Dpto. de Informática Pág. 1


Desarrollo de Aplicaciones Empresariales ReactJS

Laboratorio 13
Rounting con ReactJS
Desarrollo de la aplicación en ReactJs

1. Debemos crear el directorio donde vamos a desarrollar nuestro proyecto

create-react-app lab13

Dpto. de Informática Pág. 2


Desarrollo de Aplicaciones Empresariales ReactJS

2. Instalamos los componentes dom y router:

cd lab13
npm install react-router-dom

3. Crear el archivo users.js con el siguiente contenido:

import React from 'react'


class Users extends React.Component {
render() {
return <h1>Usuarios</h1>
}
}
export default Users;

Dpto. de Informática Pág. 3


Desarrollo de Aplicaciones Empresariales ReactJS

4. Crear el archivo contact.js con el siguiente contenido:

import React from 'react'


class Contact extends React.Component {
render() {
return <h1>Contacto</h1>
}
}
export default Contact;

5. Modifica el archivo app.js con el siguiente contenido

import React from 'react'


class App extends React.Component {
render() {
return (
<div>
<h1>Home</h1>
</div>
)
}
}
export default App;

Routing

6. Abrir el archivo index.js e importe los tres componentes (App, User, Contact).

import React from 'react';


import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Users from './users';
import Contact from './contact';
ReactDOM.render(<App />, document.getElementById('root'))

Dpto. de Informática Pág. 4


Desarrollo de Aplicaciones Empresariales ReactJS

7. Vamos a implementar el enrutamiento, modifica el index.js de la siguiente manera:

import React from 'react'


import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import App from './App'
import Users from './users'
import Contact from './contact'
const routing = (
<Router>
<div>
<Route exact path="/" component={App} />
<Route path="/usuarios" component={Users} />
<Route path="/contacto" component={Contact} />
</div>
</Router>
)
ReactDOM.render(routing, document.getElementById('root'))

8. Levanta el servidor:
npm start
9. Ahora, si ingresa manualmente localhost: 3000/usuarios verá que se procesa el
componente Usuarios.

Añadiendo navegación usando el componente Link

10. Modifica el archivo index.js de la siguiente manera:

import React from 'react'


import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import App from './App'
import Users from './users'
import Contact from './contact'
const routing = (
<Router>

Dpto. de Informática Pág. 5


Desarrollo de Aplicaciones Empresariales ReactJS

<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/usuarios">Users</Link>
</li>
<li>
<Link to="/contacto">Contact</Link>
</li>
</ul>
<Route exact path="/" component={App} />
<Route path="/usuarios" component={Users} />
<Route path="/contacto" component={Contact} />
</div>
</Router>
)
ReactDOM.render(routing, document.getElementById('root'))

11. Ingresa al navegador y prueba la aplicación.

Agregando la página 404

12. Crear el componente notfound.js con el siguiente codigo:

import React from 'react'


const Notfound = () => <h1>No encontrado</h1>
export default Notfound;

13. Modifica el archivo index.js con de la siguiente manera:

import React from 'react'


import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter as Router, Switch } from 'react-router-dom'
import App from './App'
import Users from './users'
import Contact from './contact'
import Notfound from './notfound';
const routing = (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>

Dpto. de Informática Pág. 6


Desarrollo de Aplicaciones Empresariales ReactJS

<li>
<Link to="/users">Users</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
<Switch>
<Route exact path="/" component={App} />
<Route path="/usuarios" component={Users} />
<Route path="/contacto" component={Contact} />
<Route component={Notfound} />
</Switch>
</div>
</Router>
)
ReactDOM.render(routing, document.getElementById('root'))

14. Ejecutamos la aplicación

npm start

Parametros URL

15. Pasar un parámetro id a la ruta de usuarios, modifica en el archivo index.js la


siguiente línea de código:

<Route path="usuarios/:id" component={Users} />


16. Para obtener el valor del parametro, modifica el archivo users.js de la siguiente
manera:
import React from 'react'
class Users extends React.Component {
render() {
const { params } = this.props.match
return (
<div>
<h1>Usuarios</h1>
<p>{params.id}</p>
</div>
)
}
}
export default Users;
17. Desde una navegador prueba la siguiente ruta:
http://localhost:3000/usuarios/10

Dpto. de Informática Pág. 7


Desarrollo de Aplicaciones Empresariales ReactJS

18. Pasar un parámetro id a la ruta de usuarios, modifica en el archivo index.js la


siguiente línea de código:

Problema propuesto

Utilizando los servicios web de la tarea del laboratorio 11, agregale un campo imagen.

Desarrolla una página para listar todos los productos (imagen, nombre), cada producto debe
tener un enlace a otra página para poder ver el detalle del mismo: código, nombre, precio y
una imagen.

Averigua donde se almacenan las imágenes en django para publicar las fotos de los
productos.

Observaciones y Conclusiones
-Los componentes pueden ser importados y colocados en el orden que queramos
-Estos son como plantillas hechas por nosotros sobre elementos que pueden estar en
nuestra pagina o sitio web

Dpto. de Informática Pág. 8

También podría gustarte