28

Crear una app con React y React Router

18225Puntos

hace 4 años

Curso Profesional de React con Redux 2016
Curso Profesional de React con Redux 2016

Curso Profesional de React con Redux 2016

Desarrolla apps modulares en Javascript con React.js, la librería de más crecimiento en la web, creada por Facebook. Aprende desarrollo ágil de aplicaciones web con Redux y JSX.

React Router es una librería que se actualiza constantemente, es por eso que vale la pena estar al tanto de los cambios para que tu aplicación no se vea afectada. Si estás usando React.js o React Native puedes seguir este tutorial de React Router, herramienta que sirve para cambiar de rutas dentro de tu aplicación sin recargar el navegador.

Vamos a crear una app con React y React Router la cual nos ayudará a manejar nuestras rutas en nuestra aplicación single page.

Primero vamos a instalar create-react-app para no tener que instalar y configurar manualmente webpack. Como extra tendremos hot loader que refrescará el navegador automáticamente con cada cambio que hagamos.

npm install -g create-react-app

Una vez instalado creamos nuestra app.

create-react-app fancy-blog

En nuestro editor favorito abrimos la carpeta que se creó, que en este caso se llama fancy-blog. Ahí veremos la siguiente estructura.

public
src
package.json
README.md

En la carpeta public van los archivos estáticos como imágenes, html y demás. En src va nuestro código, y package.json es donde registramos nuestros paquetes y configuraciones de nuestra app.

Nos falta agregar los paquetes para usar React Router en nuestra app, y para crear nuestra API con contenido dummy usaremos faker

npm install -S react-router-dom faker

Ya podemos empezar con nuestro código. Primero debemos crear la estructura, así que creamos las siguientes carpetas en src.

src/
	pages/
	components/
	data/

Ahora vamos a hacer nuestro menú, para lo que crearemos el componente en src/components/menu.js

import React from'react';
import { Link } from'react-router-dom';

const Menu = () => (
  <nav><ul><Linkto="/">HomeLink><Linkto="/about">AboutLink>
      <Linkto="/posts">PostsLink>
    ul>
  nav>
)

exportdefault Menu;

Lo siguiente en crear nuestras páginas.

En src/pages/home.js

import React from'react';
import Menu from'../components/menu';

const Home = () => (
  <section><Menu /><h3>Home Platzih3><p>Aprende de expertos en programación, diseño, marketing, startups, video y web. Suscríbete hoy.p>
  section>
);

export default Home;

src/pages/about.js

import React, { Component } from'react';
import Menu from'../components/menu';

const About = () => (
  <section><Menu /><h3>About Platzih3><p>Aprende de expertos en programación, diseño, marketing, startups, video y web. Suscríbete hoy.p>
  section>
);

export default About;

src/pages/posts.js

import React, { Component } from'react';
import { Link, Route } from'react-router-dom';
import posts from'../data/posts';
import Menu from'../components/menu';

classPostsextendsComponent{

  render() {
    return (
      <sectionclassName="posts"><Menu /><h3>Postsh3>
        {posts.map(post => 
          <articlekey={post.id}className="post"><Linkto={`/post/${post.id}`}><h4>{post.title}h4>
              <p>{post.excerpt}p>
              <span>{post.author}span>
            Link>
          article>
        )}
      section>
    )
  }
}

export default Posts;

y por último un post en src/pages/post.js

import React, { Component } from'react';
import posts from'../data/posts';
import Menu from'../components/menu';

classPostextendsComponent{
  render() {
    const { match } = this.props;
    let post = posts.filter(post => post.id === parseInt(match.params.postId));
    post = post[0];

    return (
      <section><Menu /><divclassName="post-section"><h2>{post.title}h2><p>{post.content}p>
        div>
      section>
    )
  }
}

export default Post;

Como ves, estamos llamando los posts, y como no existen nos va a marcar un error. Los podemos crear en src/data/posts.js, aquí usaremos la librería faker para ayudarnos a crear una api sin mucho esfuerzo.

import faker from 'faker';let posts = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

posts = posts.map(post => {
  return {
    id: post,
    title: faker.lorem.sentence(),
    excerpt: faker.lorem.sentences(10),
    content: faker.lorem.sentences(100),
    author: faker.name.findName()
  }
});

exportdefault posts;

Para ver nuestra app corriendo debemos modificar el archivo app.js en src en donde usaremos el router.

import React, { Component } from'react';
import { 
  BrowserRouter as Router,
  Route,
} from'react-router-dom';
import Home from'./pages/home';
import About from'./pages/about';
import Posts from'./pages/posts';
import Post from'./pages/post';

classAppextendsComponent {
  render() {
    return (
      <router>
        
"container"> <route exact="" path="&lt;span" class="hljs-string">"/" component={Home} /> <route path="&lt;span" class="hljs-string">"/about" component={About} /> <route path="&lt;span" class="hljs-string">"/posts" component={Posts} /> <route path="&lt;span" class="hljs-string">"/post/:postId" component={Post} />
</router> ); } } exportdefault App;

Guardamos los cambios y corremos el siguiente comando, el cual nos abrirá la app en el navegador para ver todo lo que hemos hecho.

npm run start
Curso Profesional de React con Redux 2016
Curso Profesional de React con Redux 2016

Curso Profesional de React con Redux 2016

Desarrolla apps modulares en Javascript con React.js, la librería de más crecimiento en la web, creada por Facebook. Aprende desarrollo ágil de aplicaciones web con Redux y JSX.
Alejandro
Alejandro
alesanabriav

18225Puntos

hace 4 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
1
24780Puntos

React-router-dom que dolorcito de cabeza!
Un link para cumplementar la información:
https://reacttraining.com/react-router/

0
18225Puntos
4 años

react router tiene el problema de como actualizan la api. Pero se que se va a volver mas estable, ya que están separando web, native y la integración con mas frameworks como angular. En la documentación hablan de como un día después de un workshop decidieron hacer una api basada en patrones que ellos mismos enseñaban, en vez de ponerse a re-implementar apis de react… Así que al parecer ya tienen un api que les gusta. Lo cual hace que no quieran volver a cambiar todo. Igualmente crearon mas formas de hacer lo mismo. Con la simpleza de la version 1, que es la que usamos en el tutorial.

0
9082Puntos

Muy buen tutorial, explicas muy bien la configuración del dolor de cabeza llamado react-router xD

0
18225Puntos
4 años

Hahahaha, muchas gracias, ese dolor de cabeza se cura con estabilidad en la api.

0
9082Puntos
4 años

Si, es así.
Pero igual me parece que aún le falta mucho.
Hay varias cosas que se vuelven un fastidio cuando cambias entre rutas.

0

Consulta, la ultima parte donde configuras en App.js no lo comprendo al 100%, lo tendras compratido talvez en github?