Desplazamiento suave en acción usando React: un tutorial

Preslav Dobrev2022-10-05 · 11 min read

Desplazamiento suave en acción usando React: un tutorial

React es una biblioteca de JavaScript de código abierto utilizada para crear diseños de sitios web futuristas y mejorar las interfaces de usuario. Debido a su robustez, flexibilidad y eficiencia, ha superado a sus bibliotecas y frameworks de front-end competidores. React proporciona excelentes características y funcionalidades destacadas que facilitan la personalización y la animación dinámica.

En la lista de colecciones de animaciones, el desplazamiento suave en React ayuda a aumentar la interactividad de la aplicación web y a agilizar la animación. El desplazamiento suave es una función que permite a los usuarios ir a diferentes secciones de la página utilizando una barra de navegación. Eso significa que, en lugar de presionar un botón y ser llevado de inmediato a una sección diferente de la misma página, el usuario es dirigido a un destino a través de una animación de desplazamiento.

En esta guía, te guiaremos a través de los pasos para implementar el desplazamiento suave usando React.

¡Empecemos!

Requisitos previos

Para seguir este tutorial, necesitarás lo siguiente:

Git instalado en tu sistema.
- Sigue los pasos para instalar y configurar Git en Ubuntu 18.04
La última versión de Node.js debe estar configurada.
- Usa este tutorial para instalar Node.js en Ubuntu 18.04

La configuración básica: Instalar react-scroll

En esta guía para principiantes, diseñaremos una aplicación sencilla utilizando react-scroll. Si te sientes cómodo con los conceptos básicos de React y deseas mejorar tus conocimientos sobre las funciones de react-scroll , consulta estos pasos resumidos.

Primero, instala react-scroll usando el siguiente comando:

npm npm i -S react-scroll

1	npm npm i -S react-scroll

A continuación, importa el paquete react-scroll :

import { Link, animateScroll as scroll } from "react-scroll";

1	import { Link, animateScroll as scroll } from "react-scroll";

Después de eso, inserta el componente <Link /> que apuntará a una sección específica de la aplicación:

<Link to="section1">

1	<Link to="section1">

Avancemos y diseñemos una aplicación React con desplazamiento suave.

Paso 1: Clonar y ejecutar la aplicación React

En nuestra guía, utilizaremos el proyecto inicial de React que incluye una barra de navegación en la parte superior. Allí verás cinco <sections> únicas dispuestas secuencialmente.

Actualmente, los enlaces en la barra de navegación son etiquetas de anclaje. Sin embargo, tendremos que actualizarlos en breve para habilitar el desplazamiento suave. Sigue la página React With Smooth Scrolling para navegar al repositorio del proyecto. Es importante tener en cuenta que el enlace es para la rama start. La rama master incluye todas las modificaciones completadas. Al abrir la URL, verás el repositorio:

En la página del repositorio, verás el botón Code en verde. PRESIONA la flecha de menú desplegable:

Al hacer clic en la flecha, verás el HTTP enlace:

Ahora ve a tu terminal de git y usa el siguiente comando para clonar el proyecto en tu máquina local:

$ git clone https://github.com/do-community/React-With-Smooth-Scrolling.git

1	$ git clone https://github.com/do-community/React-With-Smooth-Scrolling.git

En el directorio src/Components, encontrarás un archivo Navbar.js que incluye el <Navbar> con nav-items correspondientes a cinco <Section>s únicas dispuestas secuencialmente:

import React, { Component } from "react";
import logo from "../logo.svg";

export default class Navbar extends Component {
    render() {
    return (
    <nav className="nav" id="navbar">
        <div className="nav-content">
            <img
            src={logo}
            className="nav-logo"
            alt="Logo."
            onClick={this.scrollToTop}
         />
        <ul className="nav-items">
            <li className="nav-item">Section 1</li>
            <li className="nav-item">Section 2</li>
            <li className="nav-item">Section 3</li>
            <li className="nav-item">Section 4</li>
            <li className="nav-item">Section 5</li>
        </ul>
    </div>
    </nav>
    );
  }
}

import React, { Component } from "react";

import logo from "../logo.svg";

export default class Navbar extends Component {

render() {

return (

<img

src={logo}

className="nav-logo"

alt="Logo."

onClick={this.scrollToTop}

<li className="nav-item">Sección 1</li>

<li className="nav-item">Sección 2</li>

<li className="nav-item">Sección 3</li>

<li className="nav-item">Sección 4</li>

<li className="nav-item">Sección 5</li>

</ul>

</div>

</nav>

);

}

A continuación, navegue hasta el App.js archivo en el src directorio. Allí, verá que el <Navbar> se coloca junto con las cinco <Section>s:

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Navbar from "./Components/Navbar";
import Section from "./Components/Section";
import dummyText from "./DummyText";

class App extends Component {
    render() {
        return (
            <div className="App">
            <Navbar />
            
            <Section
            title="Sección 1"
            subtitle={dummyText}
            dark={true}
            id="section1"
            />

            <Section
            title="Sección 2"
            subtitle={dummyText}
            dark={false}
            id="section2"
            />

            <Section
            title="Sección 3"
            subtitle={dummyText}
            dark={true}
            id="section3"
            />

            <Section
            title="Sección 4"
            subtitle={dummyText}
            dark={false}
            id="section4"
            />

            <Section
            title="Sección 5"
            subtitle={dummyText}
            dark={true}
            id="section5"
            />
        </div>
        );
        }
    }
export default App;

import React, { Component } from "react";

import logo from "./logo.svg";

import "./App.css";

import Navbar from "./Components/Navbar";

import Section from "./Components/Section";

import dummyText from "./DummyText";

class App extends Component {

render() {

return (

<Section

title="Sección 1"

subtitle={dummyText}

dark={true}

id="section1"

<Section

title="Sección 2"

subtitle={dummyText}

dark={false}

id="section2"

<Section

title="Sección 3"

subtitle={dummyText}

dark={true}

id="section3"

<Section

title="Sección 4"

subtitle={dummyText}

dark={false}

id="section4"

<Section

title="Sección 5"

subtitle={dummyText}

dark={true}

id="section5"

</div>

);

}

export default App;

Por defecto, cada <Section> componente incluirá un title y subtitle.

DRY Principio en Acción

Como estamos usando texto de relleno para nuestro tutorial, agreguemos un archivo dummyText.js para ahorrar tiempo y reducir la repetición. Utiliza el archivo JavaScript recién creado para pasarlo a cada elemento <Section>.

Instalar React

Utiliza el siguiente comando para EJECUTAR la aplicación:

cd React-With-Smooth-Scrolling
npm install
npm start

cd React-With-Smooth-Scrolling

npm install

npm start

Ejecutar el rpm iniciará tu aplicación en modo de desarrollo. Ve a localhost:3000 y verifica la aplicación que se ejecuta en tu sistema:

Ahora que nuestra aplicación está funcionando, sigamos adelante e instalemos react-scroll en el siguiente paso.

Paso 2: Instalar y configurar React-Scroll

Primero, debes visitar el paquete en Node Package Manager para descargar react-scroll . Al momento de escribir esta guía, estamos usando la versión más reciente de react-scroll , 1.8.7. Asegúrate de obtener la última versión, si hay una actualización en el futuro:

EJECUTA el siguiente comando para instalar react-scroll:

$ npm install react-scroll

1	$ npm install react-scroll

Después de eso, ve al archivo Navbar.js e importa Link y animateScroll de react-scroll. Para mayor simplicidad y facilidad de uso, mantengamos animateScroll como scroll:

import { Link, animateScroll as scroll } from "react-scroll";

1	import { Link, animateScroll as scroll } from "react-scroll";

Después de eso, actualiza los elementos de -nav para usar el <Link> componente. Verás una gran cantidad de propiedades enumeradas en el <Link> componente que es trivial para nuestro tutorial. Sin embargo, puedes explorar estas propiedades consultando la página de documentación.

Algunas propiedades esenciales que merecen tu atención:

activeClass – La clase en uso cuando un elemento está activo.
to – Informa al objetivo especificado al que desplazarse.
- La to es crucial porque indica al componente hacia qué elemento desplazarse.
spy: Apunta a seleccionar el Link cuando el desplazamiento está en la posición de destino.
smooth: Anima el desplazamiento.
offset: Desplaza px adicionales como relleno, por ejemplo.
- También puedes usar offset para definir una cantidad adicional de desplazamiento para llegar a un <Section>.
duration: Tiempo de animación del desplazamiento que puede ser un número o una función.

Aquí hay una ilustración de las características que se pueden usar para cada componente <Link>. Lo único distintivo entre ellos será la característica to ya que todos apuntan a diferentes <Section>s:

<Link
    activeClass="active"
    to="section1"
    spy={true}
    smooth={true}
    offset={-70}
    duration={500}
>

<Link

activeClass="active"

to="section1"

spy={true}

smooth={true}

offset={-70}

duration={500}

Considera actualizar todos los elementos nav-elementos. Después de que todos los elementos se hayan agregado correctamente, regresa al navegador y observa el desplazamiento suave en vivo.

Paso 3: Estilizar los enlaces activos

En este paso, utilizaremos propiedades CSS para rediseñar nuestro bloque de código y hacer que se vea elegante. La característica activeClass te permite definir una clase y aplicarla al componente <Link> cuando el elemento to está activo. Si el <Link> que estás usando tiene la vista del elemento to en la parte superior de la página, considera el <Link> como activo. Haz clic en el <Link> o desplázate hacia abajo en la <Section> manualmente para activar el <Link>.

Probemos y veamos cómo funciona. Abre Chrome DevTools e inspecciona el quinto <Link> como se destaca a continuación. Haz clic en el <Link> o desplaza manualmente la <Section> hacia la parte inferior de la página, y observarás cómo se aplica la clase activa:

Como paso adicional, crea una clase activa y subraya el enlace. Luego, agrega este pequeño bloque de CSS en el archivo App.css en el directorio src :

.nav-item > .active {
    border-bottom: 1px solid #333;
}

.nav-item > .active {

border-bottom: 1px solid #333;

}

Después de eso, actualiza tu navegador. Desplázate un poco y notarás que el <Link> especificado ahora está subrayado:

Paso 4: Agregar más funciones

Además de las propiedades utilizadas anteriormente, existen otras funcionalidades como scrollToTop, scrollToBottom, por nombrar algunas, que puedes usar. Puedes llamar a estas funciones directamente y gestionar sus acciones de forma explícita. Con respecto a estas funcionalidades, naturalmente, el logotipo de la aplicación en una barra de navegación te llevará a la parte superior de la página de inicio.

Usando la función scrollToTop, agrega un manejador de clics al nav-logo para desplazar al usuario de regreso a la parte superior de la página:

scrollToTop = () => {
    scroll.scrollToTop();
};

scrollToTop = () => {

scroll.scrollToTop();

};

Usando la función scrollToTop, agrega un manejador de clics al nav-logo para desplazar al usuario a la parte inferior de la página:

scrollToTop = () => {
    scroll.scrollToBottom();
};

scrollToTop = () => {

scroll.scrollToBottom();

};

De vuelta en el navegador, ahora puedes desplazarte hacia abajo en la página, hacer clic en el logotipo en la barra de navegación y regresar a la parte superior de la página.

Conclusión

El desplazamiento suave se encuentra entre esas funcionalidades que pueden agregar mucho valor visual a una aplicación web. El paquete react-scroll puede permitirte aprovechar esta característica sin una sobrecarga significativa.

Como siguiente paso en tu experiencia de aprendizaje, echa un vistazo a más tutoriales de React y JavaScript que puedes encontrar en nuestro blog:

¡Feliz computación!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev es diseñador creativo en CloudSigma, centrado en una identidad empresarial coherente mediante el uso de canales de marketing tradicionales e innovadores. Es experto en fusionar la visión artística con el marketing estratégico para crear narrativas de marca impactantes.

Desplazamiento suave en acción usando React: un tutorial

Requisitos previos

La configuración básica: Instalar react-scroll

Paso 1: Clonar y ejecutar la aplicación React

Paso 2: Instalar y configurar React-Scroll

Paso 3: Estilizar los enlaces activos

Paso 4: Agregar más funciones

Conclusión

Preslav Dobrev

Comentarios