Bienvenidos al post número tres de nuestra pequeña aventura.
En este post, implementaremos las rutas mediante la librería react-router-dom, además, implementaremos las librerías ESLint y Prettier, para organizar el código, saltos de linea, y evitarnos algunos errores gracias a las normas de ESLint.
Implementando ESLint y Prettier
Comenzaremos implementando ESLint y Prettier, pero para empezar, explicaremos que son estas dos herramientas.
ESLint: Es un linter de código JavaScript. Su función es analizar el código de nuestra aplicación, detectar problemas en por medio de patrones y si esta a su alcance resolverlos él mismo.
Por otro lado, Prettier es un formateador de código. Tambien analiza nuestro código JavaScript.
Utilizando ambos, conseguiremos tener un código más limpio, con menos errores y estructurado mediante unas normas especificas que definiremos mediante los ficheros de configuración.
Comenzamos instalando los paquetes:
npm i prettier eslint-config-prettier eslint-plugin-prettier -D
O, si utilizas yarn:
yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
Una vez instalados los paquetes, comenzaremos creando un fichero llamado .eslintrc, en el, insertaremos la configuración.
Comenzaremos diciendo al fichero de configuración que estamos desarrollando en React, y que utilizaremos el plugin de Prettier.
{
"extends": ["react-app", "plugin:prettier/recommended"]
}
Con esto, ya tendremos ESLint listo con la configuración recomendada para React.
El siguiente paso será crear un fichero para la configuración de Prettier, lo llamaremos .pretierrc.
En este fichero, insertaremos la siguiente configuración:
{
"semi": true,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true,
"trailingComma": "none",
"jsxBracketSameLine": true
}
En esta configuración, estamos diciendo que utilizaremos ';' en el final de las sentencias, el número de espacios al tabular, en este caso, dos. Utilización de comillas dobles o simples.
Una vez realizada la configuración, solo necesitarás instalar las extensiones ESLint y Prettier en tu editor de código favorito, en mi caso, en VSCode.
Y ya estaría listo!
Implementando las rutas de la aplicación con react-router-dom
Vamos a implementar las rutas para nuestro clon de instagram, de esta manera, podemos separar la logica en distintas rutas, facilitando y mejorando el código y la usabilidad.
El primer paso, es instalar react-router-dom, para ello, lo instalaremos con NPM o Yarn.
npm install react-router-dom o si utilizas Yarn, yarn add react-router-dom.
Una vez instalado, necesitamos colocar las rutas en el fichero que se carga cuando se inicia la aplicación, en nuestro caso, en App.jsx
Antes de nada, hay que crear las páginas que vamos a tener en nuestra aplicación, comenzaremos con tres: Home, Profile y Search
Para ellos, vamos a crear una carpeta llamada pages dentro de la carpeta src.
Después, crearemos una carpeta con cada página, y dentro de ella, dos ficheros básicos, el JSX y el CSS.
Una vez creado, tendrá que quedar algo así:
Todos los ficheros JSX tienen que tener su función creada, por ejemplo, en Home:
import './Home.css';
const Home = () => {
return (
<h1>Home</h1>
);
}
export default Home;
Ya tenemos nuestras páginas creadas, y el próximo paso es crear las rutas y enlazarlas a nuestras páginas.
Vamos al fichero App.jsx e importaremos las siguiente funciones:
import { BrowserRouter, Route, Routes } from "react-router-dom";
BrowserRouter: Este inyecta propiedades a nuestro componente para poder acceder al historial de navegación, realizar redirecciones, etc.
Route: Route: Es el componente que utilizamos para crear nuestras rutas a otros páginas.
El código debe quedar de esta manera una vez importado, y pasaremos a explicar el funcionamiento.
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./pages/Home/Home";
import Profile from "./pages/Profile/Profile";
import Search from "./pages/Search/Search";
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/profile" element={<Profile />} />
<Route path="/search" element={<Search />} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
En el componente App, hemos importado las páginas Home, Profile y Search.
Como siguiente paso, hemos llamado al componente <BrowserRouter>, en este componente, englobaremos toda la funcionalidad de las rutas.
Lo siguiente, es implementar <Routes>, dentro de el, insertaremos todas las rutas de la aplicación.
Y por último, implementaremos <Route> por cada ruta, a este componente, hay que pasarle dos valores, el path, en el que indicaremos que ruta vamos a asignar al elemento de la página que asignamos.
Con element, asignaremos el componente que se va a renderizar cuando se llame a esa ruta.
Con esto, tendríamos nuestras tres primeras rutas listas para funcionar.
Como dato importante, hay que saber que cuando se levanta la aplicación, la ruta por defecto que se ve es /. De ahi, que insertemos el Home como página inicial.
Acabamos nuestro tercer post con ESLint, Prettier y las rutas implementadas.
En el próximo post, crearemos el componente <Stories> e implementaremos los componentes <NavbarTop> y <NavbarBottom> en nuestra página Home.
El enlace al repositorio os lo dejo por aquí, podeis aportar cualquier cambio mediante pull request.
Top comments (0)