Crear una app con React y React Router

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.

Es importante que leas este material si estás tomando el curso, pues la siguiente clase tiene conceptos que no han sido actualizados, pero recuerda que ya estamos trabajando en la renovación de este curso y pronto estará disponible.

---

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>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/posts">Posts</Link>
    </ul>
  </nav>
)

export default 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 Platzi</h3>
    <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 Platzi</h3>
    <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';

class Posts extends Component {

  render() {
    return (
      <section className="posts">
        <Menu />
        <h3>Posts</h3>
        {posts.map(post => 
          <article key={post.id} className="post">
            <Link to={`/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';

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

    return (
      <section>
        <Menu />
        <div className="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()
  }
});

export default 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';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="container">
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/posts" component={Posts} />
          <Route path="/post/:postId" component={Post} />
        </div>
      </Router>
    );
  }
}

export default 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