28

Crear una app con React y React Router

18408Puntos

hace 5 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

18408Puntos

hace 5 años

Todas sus entradas
Escribe tu comentario
+ 2