Cree Una Aplicación De Cambio De Tema React Con Componentes Con Estilo

Usando ThemeProvider, un componente contenedor disponible en componentes con estilo , podemos configurar rápidamente múltiples temas personalizados en React y cambiar entre ellos con facilidad.

Para demostrar esto, crearemos una aplicación React con citas de personajes populares de Game of Thrones . Este tutorial le mostrará cómo crear componentes con estilo y varios temas para la aplicación, cambiar el tema con solo hacer clic en un botón y guardar el tema en el almacenamiento local.

¿Por qué usar componentes con estilo para cambiar de tema?

Antes de pasar al tutorial, echemos un vistazo a algunas razones para usar componentes con estilo para cambiar de tema:

  • Soporte completo de temas: el ThemeProvidercomponente contenedor nos permite pasar el tema a todos los componentes de React debajo de él en el árbol de renderizado.
  • Eficiencia: los componentes con estilo utilizan la API React Context que ofrece un Contexto de tema al que podemos pasar un tema como accesorio, lo que permite acceder de forma dinámica dentro de cada componente, incluso aquellos que están profundamente anidados.
  • Flexibilidad: se puede acceder a cualquier tema creado en componentes con estilo en otros componentes de React utilizando el withThemecomponente de orden superior

Consulte la página de documentación avanzada de componentes con estilo para obtener más información.

requisitos previos

  • Conocimiento práctico de JavaScript y CSS
  • Familiaridad con la creación y el uso de componentes y Hooks en React
  • Editor de código de su elección

¡Empecemos!

Configuración de la aplicación React

Antes de construir nuestra aplicación, primero debemos configurar un entorno que nos permita desarrollar nuestra aplicación React rápidamente.

Comience ejecutando el siguiente comando:

npx create-react-app cambio de tema

En el fragmento anterior, theme-switchingse encuentra el nombre de la aplicación y la carpeta.

A continuación, cd en la aplicación:

cd theme-switching

Ahora, abra la carpeta en su editor de código.

A continuación, instale la styled-componentsdependencia a través de npm o Yarn para permitir styled-componentssu uso en la aplicación.

# with npm
npm install --save styled-components

# with yarn
yarn add styled-components

En este punto, podemos limpiar la aplicación eliminando los archivos no deseados.

Alternativamente, podemos reemplazar el código en el App.jsarchivo, así:

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Theme Switching</h1>
   </div>
  );
}

export default App;

Después de reemplazar el código, ejecute uno de los siguientes comandos para ver la aplicación en el navegador:

# with npm
npm start

# with yarn
yarn start

Esto puede tardar un poco en ejecutarse; una vez que haya terminado, inicie su navegador y navegue hasta http://localhost:3000.

La aplicación debería verse así:

Ahora, vamos a crear los componentes con estilo.

Crear los componentes con estilo

Para este tutorial, crearemos una aplicación web simple de una página que contiene los siguientes componentes:

  • Encabezamiento
  • Pie de página
  • Cuerpo con tarjetas que contienen citas de personajes populares de Game of Thrones
  • Barra de temas con botones para seleccionar una preferencia de tema

Para empezar, en la srccarpeta, crearemos una componentscarpeta. Dentro de la componentscarpeta, crearemos una tylescarpeta para albergar nuestros componentes con estilo.

A continuación, agregaremos GlobalStylesa la aplicación usando la styled-componentspalabra clave, createGlobalStyle.

En la stylescarpeta, cree un Global.jsarchivo y agregue lo siguiente:

Global.jsimport { createGlobalStyle } from "styled-components";

export const GlobalStyles = createGlobalStyle`
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 1%, 16%);
  font-family: monospace;
  overflow-x: hidden;
}
`

Este código proporciona un reinicio simple a todos los elementos de la aplicación y agrega algo de estilo al bodyelemento.

Crear el componente de encabezado

A continuación, crearemos un styled-componentarchivo para el encabezado: Header.styled.js. Al incluirlos .styleden la convención de nomenclatura de los archivos de componentes, podremos identificar fácilmente los componentes con estilo de los componentes regulares de React.

Ahora, importaremos styleddesde styled-componentsy agregaremos lo siguiente;

Header.styled.jsimport styled from "styled-components";

export const Header = styled.header`
  background-color: hsl(0, 0%, 93%);
  padding: 20px;
  text-align: center;
  font-weight: bold;
`;

Crear el componente de pie de página

Ahora, crearemos un styled-componentarchivo para el pie de página con los mismos pasos que usamos para crear el encabezado.

Footer.styled.jsimport styled from "styled-components";

export const Footer = styled.footer`
  background-color: hsl(0, 1%, 38%);
  padding: 40px 20px;
  text-align: center;
  color: hsl(0, 0%, 100%);

  a {
    color: hsl(0, 0%, 100%);
  }
`;

Ahora, volvamos al archivo App.js e importemos los componentes GlobalStyles, Headery Footercon estilo:

App.jsimport React from 'react';
import { GlobalStyles } from "./components/styles/Global";
import { Header } from "./components/styles/Header.styled";
import { Footer } from "./components/styles/Footer.styled";

function App() {
  return (
    <div className="App">
      <GlobalStyles />
      <Header>Game of Thrones Quotes</Header>
      
      <Footer>
          <p>
            Made with love by <a href="http://bio.link/timonwa">Timonwa</a>
          </p>
        </Footer>
    </div>
  );
}

export default App;

Por supuesto, puede cambiar el contenido del pie de página a su nombre o algo más.

Después de guardar el código y actualizar el navegador, la aplicación debería verse así:

Creando el componente de tarjetas

A continuación, crearemos un styled-componentarchivo en la stylescarpeta de las tarjetas: Cards.styled.js. Agreguemos el siguiente código:

Cards.styled.jsimport styled from "styled-components";

export const CardsContainer = styled.section`
  margin: 50px;
`;

export const Card = styled.div`
  background-color: hsl(60, 40%, 100%);
  border: 1px solid hsl(0, 0%, 87%);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  border-radius: 3px;
  max-width: 450px;
`;

export const CardTitle = styled.div`
  color: hsl(0, 1%, 38%);
  border-bottom: 1px solid hsl(0, 0%, 87%);
  text-align: center;
  padding: 10px;
  font-weight: bold;
`;

export const CardBody = styled.div`
  color: hsl(0, 1%, 38%);
  padding: 10px;
`;

En el código anterior, hemos creado un CardContainercomponente con estilo que albergará las tarjetas individuales. También hemos creado un Cardcomponente con estilo, junto con la tarjeta Titley los Bodycomponentes con estilo de tarjeta que se mostrarán en las tarjetas.

Crear el componente de comillas

Ahora, creemos un Quotescomponente React dentro de la componentscarpeta. Importaremos los Cardcomponentes al Quotes.jsarchivo y crearemos tarjetas para el archivo Quotes.

Quotes.jsimport React from "react";
import {
  CardsContainer,
  Card,
  CardTitle,
  CardBody,
} from "./styles/Cards.styled";

const Quotes = () => {
  return (
    <CardsContainer>
      <Card>
        <CardTitle>Bran Stark</CardTitle>
        <CardBody>
          <p>
            I was never going to be as good a lady as you. So I had to be
            something else. I never could have survived what you survived.
          </p>
        </CardBody>
      </Card>

      <Card>
        <CardTitle>Tyrion Lannister</CardTitle>
        <CardBody>
          <p>
            It's not easy being drunk all the time. If it were easy, everyone
            would do it.
          </p>
        </CardBody>
      </Card>

      <Card>
        <CardTitle>Jon Snow</CardTitle>
        <CardBody>
          <p>
            Sometimes there is no happy choice Sam, only one less grievous than
            the others.
          </p>
        </CardBody>
      </Card>
    </CardsContainer>
  )
};

export default Quotes;

Ahora, importaremos el Quotescomponente React al App.jsarchivo para que podamos verlo en el navegador:

App.jsimport React from 'react';
import { GlobalStyles } from "./components/styles/Global";
import { Header } from "./components/styles/Header.styled";
import { Footer } from "./components/styles/Footer.styled";
import Quotes from "./components/Quotes";

function App() {
  return (
    <div className="App">
      <GlobalStyles />
      <Header>Game of Thrones Quotes</Header>

      <Quotes />

      <Footer>
          <p>
            Made with love by <a href="http://bio.link/timonwa">Timonwa</a>
          </p>
        </Footer>
     </div>
  );
}

export default App;

La aplicación ahora debería verse así:

Creando los botones

Hasta ahora, hemos creado los componentes para la aplicación y agregado contenido. Ahora, creemos botones para los temas y un contenedor para albergar los botones.

En la stylescarpeta, crearemos un ThemeSwitching.styled.jsarchivo e incluiremos lo siguiente:

ThemeSwitching.styled.jsimport styled from "styled-components";

export const ThemeContainer = styled.div`
  background-color: hsl(0, 0%, 100%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid hsl(0, 0%, 87%);
`;

export const ThemeButton = styled.button`
  margin: 0 5px;
  padding: 10px;
  font-size: 0.5rem;
  border: 1px solid hsl(0, 0%, 87%);
  border-radius: 5px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  &:hover {
    box-shadow: 2px 2px 2px hsl(0, 0%, 87%);
`;

En el código anterior, hemos creado un ThemeContainercomponente con estilo que albergará todos los botones de tema y un componente con estilo ThemeButton para los botones de tema individuales.

También hemos agregado un hoverestado al botón. Cuando un usuario se desplaza sobre un botón, se mostrará un box-shadowefecto.

Ahora, importemos estos cambios de estilo agregando lo siguiente en la parte superior del App.jsarchivo junto con nuestras otras importaciones:

App.jsimport {
  ThemeContainer,
  ThemeButton,
} from "./components/styles/ThemeSwitching.styled";

En el mismo archivo, también agregaremos el siguiente fragmento de código entre el Headercomponente con estilo y el componente QuotesReact:

App.js<ThemeContainer>
  <span>Themes: </span>
  <ThemeButton className="light active"></ThemeButton>
  <ThemeButton className="dark"></ThemeButton>
  <ThemeButton className="blue"></ThemeButton>
  <ThemeButton className="green"></ThemeButton>
  <ThemeButton className="brown"></ThemeButton>
  <ThemeButton className="pink"></ThemeButton>
</ThemeContainer>

En este punto, todos los botones del tema tienen una apariencia idéntica:

Agreguemos diferentes colores de fondo a los botones de tema para representar los diferentes temas.

Agregaremos el siguiente código al Global.jsarchivo:

Global.js// theme buttons color
.light {
  background-color: hsl(0, 0%, 93%);
}
.dark {
  background-color: hsl(0, 0%, 20%);
}
.blue {
  background-color: hsl(195, 53%, 79%);
}
.green {
  background-color: hsl(150, 80%, 15%);
}
.brown {
  background-color: hsl(39, 70%, 50%);
}
.pink {
  background-color: hsl(350, 100%, 88%);
}

// active theme
.active{
    border: 3px solid hsl(0, 0%, 87%);
    }

Ahora, como se muestra a continuación, cada uno de los botones tiene un color diferente que corresponde a su tema. El tema claro (el tema actual) tiene un fondo gris claro y un borde diferente al de los otros botones. Esto se debe a que usamos active classNamepara especificar un sólido borderpara el tema actual. Más adelante en este tutorial, aplicaremos clics de función a los botones para agregarlos active classNameal botón del tema seleccionado cuando se alterna el botón.

Ahora vamos a crear los temas.

Creación de varios temas

Hasta ahora, hemos creado botones para seis temas. El color de fondo de cada botón corresponde a un tema. El botón de tema claro es blanco, el botón de tema oscuro es negro y los colores de los otros botones de tema coinciden con el nombre de tema correspondiente: azul, verde, marrón y rosa.

Ahora, es el momento de crear los temas.

En la stylescarpeta, creemos un Theme.styled.jsarchivo y agreguemos lo siguiente:

Theme.styled.jsexport const light = {
  name: "light-theme",
  colors: {
    header: "hsl(0, 0%, 93%)",
    background: "hsl(0, 0%, 100%)",
    footer: "hsl(0, 1%, 38%)",
    text: "hsl(0, 1%, 16%)",
    quoteBgc: "hsl(60, 40%, 100%)",
    quoteTitle: "hsl(0, 1%, 38%)",
    quoteBody: "hsl(0, 1%, 38%);",
    quoteBorder: "hsl(0, 0%, 87%)",
    border: "hsl(0, 0%, 87%)",
  },
};

export const dark = {
  name: "dark-theme",
  colors: {
    header: "hsl(0, 0%, 20%)",
    background: "hsl(0, 1%, 16%)",
    footer: "hsl(0, 0%, 93%)",
    text: "hsl(0, 0%, 100%)",
    quoteBgc: "hsl(0, 0%, 35%)",
    quoteTitle: "hsl(0, 0%, 100%)",
    quoteBody: "hsl(0, 0%, 100%)",
    quoteBorder: "hsl(0, 0%, 59%)",
    border: "hsl(0, 0%, 78%)",
  },
};

export const blue = {
  name: "blue-theme",
  colors: {
    header: "hsl(195, 53%, 79%)",
    background: "hsl(194, 100%, 97%)",
    footer: "hsl(195, 52%, 28%)",
    text: "hsl(0, 1%, 16%)",
    quoteBgc: "hsl(0, 0%, 100%)",
    quoteTitle: "hsl(195, 52%, 28%)",
    quoteBody: "hsl(0, 0%, 38%)",
    quoteBorder: "hsl(0, 0%, 87%)",
    border: "hsl(0, 0%, 87%)",
  },
};

export const green = {
  name: "green-theme",
  colors: {
    header: "hsl(150, 80%, 15%)",
    background: "hsl(150, 80%, 20%)",
    footer: "hsl(150, 80%, 80%)",
    text: "hsl(150, 80%, 80%);",
    quoteBgc: "hsl(150, 60%, 60%)",
    quoteTitle: "hsl(130, 90%, 10%)",
    quoteBody: "hsl(130, 70%, 10%)",
    quoteBorder: "hsl(130, 80%, 20%)",
    border: "hsl(170, 100%, 60%)",
  },
};

export const brown = {
  name: "brown-theme",
  colors: {
    header: "hsl(39, 70%, 50%)",
    background: "hsl(37, 83%, 54%)",
    footer: "hsl(39, 50%, 20%)",
    text: "hsl(100, 0%, 20%)",
    quoteBgc: "hsl(50, 100%, 70%)",
    quoteTitle: "hsl(37, 23%, 24%)",
    quoteBody: "hsl(30, 23%, 24%)",
    quoteBorder: "hsl(50, 50%, 50%)",
    border: "rgb(224, 189, 33)",
  },
};

export const pink = {
  name: "pink-theme",
  colors: {
    header: "hsl(350, 100%, 88%)",
    background: "hsl(300, 80%, 88%)",
    footer: "hsl(300, 10%, 28%)",
    text: "hsl(300, 100%, 28%)",
    quoteBgc: "hsl(350, 50%, 78%)",
    quoteTitle: "hsl(300, 50%, 28%)",
    quoteBody: "hsl(320, 20%, 28%)",
    quoteBorder: "hsl(300, 50%, 28%)",
    border: "hsl(300, 50%, 58%)",
  },
};

En el código anterior, hemos creado seis objetos de tema diferentes y hemos nombrado cada objeto de acuerdo con el color del tema. Hemos exportado los objetos de la misma manera que exportamos los otros componentes con estilo.

Ahora que hemos creado los temas, usemos ThemeProviderpara agregarlos a la aplicación.

Adición de temas conThemeProvider

ThemeProvider proporciona nuestro tema a cada componente dentro de su contenedor a través de la API React Context. Usaremos ThemeProviderpara habilitar el cambio de tema.

Primero importemos ThemeProvider y luego importemos nuestros temas del Theme.styled.jsarchivo al App.jsarchivo.

App.jsimport { ThemeProvider } from "styled-components";
import {
  light,
  dark,
  blue,
  green,
  brown,
  pink,
} from "./components/styles/Theme.styled";

Ahora que hemos importado los temas, envolvamos los componentes de la aplicación con el ThemeProvidercomponente. También pasaremos un accesorio de tema al ThemeProvidercomponente.

Esta propiedad de tema pasa cualquier objeto de tema asignado a cada componente y elemento de la aplicación que está envuelto por ThemeProvider, lo que les permite tener acceso a todas las propiedades presentes en el objeto de tema.

Por ahora, estamos pasando el lightobjeto del tema como accesorio.

App.jsfunction App() {
  return (
    <ThemeProvider theme={light}>
      <div className="App">
    <GlobalStyles />
      <Header>Game of Thrones Quotes</Header>
       
      <ThemeContainer>
        <span>Themes: </span>
        <ThemeButton className="light active"></ThemeButton>
        <ThemeButton className="dark"></ThemeButton>
        <ThemeButton className="blue"></ThemeButton>
        <ThemeButton className="green"></ThemeButton>
        <ThemeButton className="brown"></ThemeButton>
        <ThemeButton className="pink"></ThemeButton>
       </ThemeContainer>

   
      <Quotes />

      <Footer>
          <p>
            Made with love by <a href="http://bio.link/timonwa">Timonwa</a>
          </p>
        </Footer>
     </div>
     </ThemeProvider>
  );
}

Ahora, entraremos en cada uno de los componentes con estilo y refactorizaremos los códigos para acceder a las propiedades de color del tema, que actualmente está configurado como tema claro.

Primero importaremos el Theme.styledcomponente; Explicaré por qué un poco más adelante en este tutorial.

Global.jsimport * as theme from "./Theme.styled";Global.styled.jsbody {
  background-color: ${({ theme }) => theme.colors.background};
  color: ${({ theme }) => theme.colors.text};
  font-family: monospace;
  overflow-x: hidden;
}

// theme buttons color
.light {
  background-color: ${theme.light.colors.header};
}
.dark {
  background-color: ${theme.dark.colors.header};
}
.blue {
  background-color: ${theme.blue.colors.header};
}
.green {
  background-color: ${theme.green.colors.header};
}
.brown {
  background-color: ${theme.brown.colors.header};
}
.pink {
  background-color: ${theme.pink.colors.header};
}

// active theme
.active{
    border: 3px solid ${({ theme }) => theme.colors.border};
}

En el bodyestilo, accedemos a las propiedades de colores del tema que pasamos usando una función sin nombre que también toma el tema como argumento. Ahora, si configuramos el tema propen dark, obtendremos el color de fondo y del texto de las darkpropiedades de color del tema. Lo mismo ocurre con la luz, el azul, el verde, el marrón y el rosa.

Sin embargo, no se accede al color de fondo del botón desde el accesorio del tema, sino directamente desde el tema que importamos. Si configuramos el color de fondo del botón de acuerdo con el tema proppasado, los seis botones tendrían el mismo color de fondo: el del tema activo (actual). Esta es la razón por la que importamos el Theme.styledcomponente primero.

Probemos esto:

Global.styled.js// theme buttons color
.light {
  background-color: ${({ theme }) => theme.colors.header};
}
.dark {
  background-color: ${({ theme }) => theme.colors.header};
}
.blue {
  background-color: ${({ theme }) => theme.colors.header};
}
.green {
  background-color: ${({ theme }) => theme.colors.header};
}
.brown {
  background-color: ${({ theme }) => theme.colors.header};
}
.pink {
  background-color: ${({ theme }) => theme.colors.header};
}

Como puede ver, todos los botones de tema actualmente tienen un color de fondo gris claro, como se especifica en el tema predeterminado prop: light.

Volvamos los botones al código correcto:

Continuando con nuestra refactorización, hagamos cambios en los otros componentes con estilo, como el , Headery para que puedan tener acceso a nuestro accesorio de tema.FooterCardThemeSwitching

Reemplace el código relevante en las propiedades de estilo existentes con lo siguiente:

Header.styled.jsexport const Header = styled.header`
  background-color: ${({ theme }) => theme.colors.header};
`;Footer.styled.jsexport const Footer = styled.footer`
  background-color: ${({ theme }) => theme.colors.footer};
  color: ${({ theme }) => theme.colors.background};

  a {
    color: ${({ theme }) => theme.colors.background};
  }
`;Card.styled.jsexport const Card = styled.div`
  background-color: ${({ theme }) => theme.colors.quoteBgc};
  border: 1px solid ${({ theme }) => theme.colors.quoteBorder};
`;

export const CardTitle = styled.div`
  color: ${({ theme }) => theme.colors.quoteTitle};
  border-bottom: 1px solid ${({ theme }) => theme.colors.quoteBorder};
`;

export const CardBody = styled.div`
  color: ${({ theme }) => theme.colors.quoteBody};
`;ThemeSwitching.styled.jsexport const ThemeContainer = styled.div`
  background-color: ${({ theme }) => theme.colors.background};
  border-bottom: 1px solid ${({ theme }) => theme.colors.border};
`;

export const ThemeButton = styled.button`
  border: 1px solid ${({ theme }) => theme.colors.border};

  &:hover {
    box-shadow: 2px 2px 2px ${({ theme }) => theme.colors.border};
`;

Como se muestra a continuación, la aplicación aún se ve igual en el navegador. También podemos cambiar el tema propa otros temas para confirmar que cada tema tiene la apariencia deseada con los elementos con estilo.

Ahora es el momento de hacer que los botones del tema funcionen.

Cambiando temas

No tiene sentido darle al usuario una preferencia de tema si el usuario no puede cambiarlo en la interfaz de usuario, ¿verdad? Entonces, escribamos el código que permitirá cambiar de tema con solo hacer clic en un botón.

Crearemos un selectedTheme estado con useStateReact Hook. Este estado se establecerá inicialmente en el lightobjeto del tema.

Primero, importaremos el useStateHook al archivo App.js:

App.jsimport React, { useState } from "react";

Luego, crearemos el estado, así, justo antes de la returnclave:

App.jsfunction App() {
  // theme state
  const [selectedTheme, setSelectedTheme] = useState(light);
  return (

A continuación, pasaremos selectedThemecomo accesorio de tema en el archivo ThemeProvider. Cuando selectedThemecambia el estado, la propiedad del tema cambiará, lo que hará que la página se actualice al nuevo tema.

App.jsreturn (
    <ThemeProvider theme={selectedTheme}>
      <div className="App">

Ahora, escribiremos una HandleThemeChangefunción que se ejecutará cada vez que se haga clic en un botón de tema. Esto se agregará al App.jsarchivo, justo debajo de la useStatefunción:

App.js// function to handle user theme selection on click and save it to local storage
  const HandleThemeChange = (theme) => {
    setSelectedTheme(theme);
  };

Cuando un usuario hace clic en un botón, se pasa un argumento a la HandleThemeChangefunción como parámetro (es decir, el objeto de tema asociado con ese botón). Luego, la HandleThemeChangefunción cambia el selectedThemeestado al parámetro que se pasó.

Por ejemplo, si el usuario hace clic en el darkbotón de tema, el objeto de tema oscuro se pasaría como argumento y se usaría como parámetro en la HandleThemeChangefunción. La función establecería el selectedThemeen dark. Esto, a su vez, pasaría como accesorio al ThemeProvider, actualizando la apariencia de la página en el navegador con las propiedades de color asociadas con el tema seleccionado.

Ahora, necesitamos adjuntar esta función a los botones. Agregaremos lo siguiente al App.jsarchivo:

Aplicación.js

       <ThemeContainer>
          <span>Themes: </span>
          <ThemeButton
            className={`light ${selectedTheme === light ? "active" : ""}`}
            onClick={() => HandleThemeChange(light)}></ThemeButton>
          <ThemeButton
            className={`dark ${selectedTheme === dark ? "active" : ""}`}
            onClick={() => HandleThemeChange(dark)}></ThemeButton>
          <ThemeButton
            className={`blue ${selectedTheme === blue ? "active" : ""}`}
            onClick={() => HandleThemeChange(blue)}></ThemeButton>
          <ThemeButton
            className={`green ${selectedTheme === green ? "active" : ""}`}
            onClick={() => HandleThemeChange(green)}></ThemeButton>
          <ThemeButton
            className={`brown ${selectedTheme === brown ? "active" : ""}`}
            onClick={() => HandleThemeChange(brown)}></ThemeButton>
          <ThemeButton
            className={`pink ${selectedTheme === pink ? "active" : ""}`}
            onClick={() => HandleThemeChange(pink)}></ThemeButton>
        </ThemeContainer>

En el código anterior, agregamos un operador ternario condicional al classNamede cada botón.

Este operador verifica si selectedThemees igual al tema asociado con el botón. Si es así, agrega una active clase a ese botón.

Por ejemplo, nuestro selectedThemees igual a lightdebido al código que se ejecutó en la HandleThemeChangefunción. Entonces, si hacemos clic en el lightbotón, activese agregará una clase al lightbotón ya que nuestra selectedThemetambién es igual a light.

Como recordará anteriormente en este tutorial, la activeclase agrega un estilo de sombra de cuadro a cualquier botón de tema que tenga la activeclase adjunta.

Echemos un vistazo a la aplicación en el navegador y seleccionemos un nuevo tema. Notarás que los colores de la página cambian según el tema seleccionado. Además, el botón del tema seleccionado tiene una sombra de cuadro.

Video 

¡La aplicación está casi completa! Todavía tenemos un problema crucial que solucionar para que el cambio de tema funcione perfectamente.

Actualmente, si seleccionamos un tema que no sea el tema de luz preseleccionado (predeterminado), los colores de la página vuelven a los asociados con el tema de luz cuando recargamos la página:

Video

El color vuelve al tema predeterminado porque la preferencia del tema no se almacena ni se guarda en ningún lugar (es decir, en el almacenamiento local o en la memoria caché).

Este es un tema crítico que debe ser abordado. Para las aplicaciones con más de una página, el tema volvería al tema predeterminado cada vez que el usuario navegara a una nueva página.

Guardar el tema en el almacenamiento local

Guardar el selectedThemealmacenamiento local es relativamente fácil y solo implica unas pocas líneas de código. Usaremos useEffectReact Hook junto con localStorage.

Actualicemos la HandleThemeChangefunción, así:

App.jsconst HandleThemeChange = (theme) => {
    setSelectedTheme(theme);
    localStorage.setItem("current-theme", JSON.stringify(theme));
  };

Ahora, cuando un usuario haga clic en un botón de tema, el selectedThemeestado cambiará y el tema preferido se guardará localStoragecomo current-theme.

Notarás que necesitamos encadenar el themeprimero antes de guardarlo en formato localStorage.

Ahora, vamos a crear el useEffectgancho. Esta función debe colocarse en el código inmediatamente después de useState:

App.js  // theme state
  const [selectedTheme, setSelectedTheme] = useState(light);

  // react hook to get the theme selected by the user that is saved in local storage
  useEffect(() => {
    const currentTheme = JSON.parse(localStorage.getItem("current-theme"));
    if (currentTheme) {
      setSelectedTheme(currentTheme);
    }
  }, []);

También necesitamos importar este Hook desde React para usarlo:

import React, { useState, useEffect } from "react";

Cuando la aplicación se carga inicialmente, useEffect verifica localStorage para ver si hay un tema actual almacenado. Si se almacena un tema actual, useEffect devuelve este tema como una cadena y analizamos los datos para volver a cambiarlo a JavaScript. useEffect también establece el selectedThemetema almacenado.

Si useEffect no encuentra un tema almacenado en localStorage, establece el selectedThemetema predeterminado (en este caso, el tema claro).

Si elegimos cualquier tema además del tema claro y actualizamos la página, nuestra preferencia de tema permanecerá, como se muestra:

Video

Conclusión

Los componentes con estilo hacen que sea muy fácil crear y mantener múltiples temas para las aplicaciones web de React.

En este tutorial, demostramos cómo crear un conmutador de temas personalizado para una aplicación React con el tema de Game of Thrones utilizando componentes con estilo. También mostramos cómo usar el almacenamiento local para guardar la preferencia de tema de un usuario, de modo que cuando vuelvan a cargar la página, naveguen a otra página o incluso cierren la página o el navegador y luego vuelvan a visitar la página unos días después, su preferencia de tema sigue siendo la misma. mismo.

Puede ver el código completo utilizado en el tutorial en GitHub y la aplicación implementada aquí .

 Fuente: https://blog.logrocket.com/build-react-theme-switcher-app-styled-components/

#react 

What is GEEK

Buddha Community

Cree Una Aplicación De Cambio De Tema React Con Componentes Con Estilo
Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Cree Una Aplicación De Cambio De Tema React Con Componentes Con Estilo

Usando ThemeProvider, un componente contenedor disponible en componentes con estilo , podemos configurar rápidamente múltiples temas personalizados en React y cambiar entre ellos con facilidad.

Para demostrar esto, crearemos una aplicación React con citas de personajes populares de Game of Thrones . Este tutorial le mostrará cómo crear componentes con estilo y varios temas para la aplicación, cambiar el tema con solo hacer clic en un botón y guardar el tema en el almacenamiento local.

¿Por qué usar componentes con estilo para cambiar de tema?

Antes de pasar al tutorial, echemos un vistazo a algunas razones para usar componentes con estilo para cambiar de tema:

  • Soporte completo de temas: el ThemeProvidercomponente contenedor nos permite pasar el tema a todos los componentes de React debajo de él en el árbol de renderizado.
  • Eficiencia: los componentes con estilo utilizan la API React Context que ofrece un Contexto de tema al que podemos pasar un tema como accesorio, lo que permite acceder de forma dinámica dentro de cada componente, incluso aquellos que están profundamente anidados.
  • Flexibilidad: se puede acceder a cualquier tema creado en componentes con estilo en otros componentes de React utilizando el withThemecomponente de orden superior

Consulte la página de documentación avanzada de componentes con estilo para obtener más información.

requisitos previos

  • Conocimiento práctico de JavaScript y CSS
  • Familiaridad con la creación y el uso de componentes y Hooks en React
  • Editor de código de su elección

¡Empecemos!

Configuración de la aplicación React

Antes de construir nuestra aplicación, primero debemos configurar un entorno que nos permita desarrollar nuestra aplicación React rápidamente.

Comience ejecutando el siguiente comando:

npx create-react-app cambio de tema

En el fragmento anterior, theme-switchingse encuentra el nombre de la aplicación y la carpeta.

A continuación, cd en la aplicación:

cd theme-switching

Ahora, abra la carpeta en su editor de código.

A continuación, instale la styled-componentsdependencia a través de npm o Yarn para permitir styled-componentssu uso en la aplicación.

# with npm
npm install --save styled-components

# with yarn
yarn add styled-components

En este punto, podemos limpiar la aplicación eliminando los archivos no deseados.

Alternativamente, podemos reemplazar el código en el App.jsarchivo, así:

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Theme Switching</h1>
   </div>
  );
}

export default App;

Después de reemplazar el código, ejecute uno de los siguientes comandos para ver la aplicación en el navegador:

# with npm
npm start

# with yarn
yarn start

Esto puede tardar un poco en ejecutarse; una vez que haya terminado, inicie su navegador y navegue hasta http://localhost:3000.

La aplicación debería verse así:

Ahora, vamos a crear los componentes con estilo.

Crear los componentes con estilo

Para este tutorial, crearemos una aplicación web simple de una página que contiene los siguientes componentes:

  • Encabezamiento
  • Pie de página
  • Cuerpo con tarjetas que contienen citas de personajes populares de Game of Thrones
  • Barra de temas con botones para seleccionar una preferencia de tema

Para empezar, en la srccarpeta, crearemos una componentscarpeta. Dentro de la componentscarpeta, crearemos una tylescarpeta para albergar nuestros componentes con estilo.

A continuación, agregaremos GlobalStylesa la aplicación usando la styled-componentspalabra clave, createGlobalStyle.

En la stylescarpeta, cree un Global.jsarchivo y agregue lo siguiente:

Global.jsimport { createGlobalStyle } from "styled-components";

export const GlobalStyles = createGlobalStyle`
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 1%, 16%);
  font-family: monospace;
  overflow-x: hidden;
}
`

Este código proporciona un reinicio simple a todos los elementos de la aplicación y agrega algo de estilo al bodyelemento.

Crear el componente de encabezado

A continuación, crearemos un styled-componentarchivo para el encabezado: Header.styled.js. Al incluirlos .styleden la convención de nomenclatura de los archivos de componentes, podremos identificar fácilmente los componentes con estilo de los componentes regulares de React.

Ahora, importaremos styleddesde styled-componentsy agregaremos lo siguiente;

Header.styled.jsimport styled from "styled-components";

export const Header = styled.header`
  background-color: hsl(0, 0%, 93%);
  padding: 20px;
  text-align: center;
  font-weight: bold;
`;

Crear el componente de pie de página

Ahora, crearemos un styled-componentarchivo para el pie de página con los mismos pasos que usamos para crear el encabezado.

Footer.styled.jsimport styled from "styled-components";

export const Footer = styled.footer`
  background-color: hsl(0, 1%, 38%);
  padding: 40px 20px;
  text-align: center;
  color: hsl(0, 0%, 100%);

  a {
    color: hsl(0, 0%, 100%);
  }
`;

Ahora, volvamos al archivo App.js e importemos los componentes GlobalStyles, Headery Footercon estilo:

App.jsimport React from 'react';
import { GlobalStyles } from "./components/styles/Global";
import { Header } from "./components/styles/Header.styled";
import { Footer } from "./components/styles/Footer.styled";

function App() {
  return (
    <div className="App">
      <GlobalStyles />
      <Header>Game of Thrones Quotes</Header>
      
      <Footer>
          <p>
            Made with love by <a href="http://bio.link/timonwa">Timonwa</a>
          </p>
        </Footer>
    </div>
  );
}

export default App;

Por supuesto, puede cambiar el contenido del pie de página a su nombre o algo más.

Después de guardar el código y actualizar el navegador, la aplicación debería verse así:

Creando el componente de tarjetas

A continuación, crearemos un styled-componentarchivo en la stylescarpeta de las tarjetas: Cards.styled.js. Agreguemos el siguiente código:

Cards.styled.jsimport styled from "styled-components";

export const CardsContainer = styled.section`
  margin: 50px;
`;

export const Card = styled.div`
  background-color: hsl(60, 40%, 100%);
  border: 1px solid hsl(0, 0%, 87%);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  border-radius: 3px;
  max-width: 450px;
`;

export const CardTitle = styled.div`
  color: hsl(0, 1%, 38%);
  border-bottom: 1px solid hsl(0, 0%, 87%);
  text-align: center;
  padding: 10px;
  font-weight: bold;
`;

export const CardBody = styled.div`
  color: hsl(0, 1%, 38%);
  padding: 10px;
`;

En el código anterior, hemos creado un CardContainercomponente con estilo que albergará las tarjetas individuales. También hemos creado un Cardcomponente con estilo, junto con la tarjeta Titley los Bodycomponentes con estilo de tarjeta que se mostrarán en las tarjetas.

Crear el componente de comillas

Ahora, creemos un Quotescomponente React dentro de la componentscarpeta. Importaremos los Cardcomponentes al Quotes.jsarchivo y crearemos tarjetas para el archivo Quotes.

Quotes.jsimport React from "react";
import {
  CardsContainer,
  Card,
  CardTitle,
  CardBody,
} from "./styles/Cards.styled";

const Quotes = () => {
  return (
    <CardsContainer>
      <Card>
        <CardTitle>Bran Stark</CardTitle>
        <CardBody>
          <p>
            I was never going to be as good a lady as you. So I had to be
            something else. I never could have survived what you survived.
          </p>
        </CardBody>
      </Card>

      <Card>
        <CardTitle>Tyrion Lannister</CardTitle>
        <CardBody>
          <p>
            It's not easy being drunk all the time. If it were easy, everyone
            would do it.
          </p>
        </CardBody>
      </Card>

      <Card>
        <CardTitle>Jon Snow</CardTitle>
        <CardBody>
          <p>
            Sometimes there is no happy choice Sam, only one less grievous than
            the others.
          </p>
        </CardBody>
      </Card>
    </CardsContainer>
  )
};

export default Quotes;

Ahora, importaremos el Quotescomponente React al App.jsarchivo para que podamos verlo en el navegador:

App.jsimport React from 'react';
import { GlobalStyles } from "./components/styles/Global";
import { Header } from "./components/styles/Header.styled";
import { Footer } from "./components/styles/Footer.styled";
import Quotes from "./components/Quotes";

function App() {
  return (
    <div className="App">
      <GlobalStyles />
      <Header>Game of Thrones Quotes</Header>

      <Quotes />

      <Footer>
          <p>
            Made with love by <a href="http://bio.link/timonwa">Timonwa</a>
          </p>
        </Footer>
     </div>
  );
}

export default App;

La aplicación ahora debería verse así:

Creando los botones

Hasta ahora, hemos creado los componentes para la aplicación y agregado contenido. Ahora, creemos botones para los temas y un contenedor para albergar los botones.

En la stylescarpeta, crearemos un ThemeSwitching.styled.jsarchivo e incluiremos lo siguiente:

ThemeSwitching.styled.jsimport styled from "styled-components";

export const ThemeContainer = styled.div`
  background-color: hsl(0, 0%, 100%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid hsl(0, 0%, 87%);
`;

export const ThemeButton = styled.button`
  margin: 0 5px;
  padding: 10px;
  font-size: 0.5rem;
  border: 1px solid hsl(0, 0%, 87%);
  border-radius: 5px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  &:hover {
    box-shadow: 2px 2px 2px hsl(0, 0%, 87%);
`;

En el código anterior, hemos creado un ThemeContainercomponente con estilo que albergará todos los botones de tema y un componente con estilo ThemeButton para los botones de tema individuales.

También hemos agregado un hoverestado al botón. Cuando un usuario se desplaza sobre un botón, se mostrará un box-shadowefecto.

Ahora, importemos estos cambios de estilo agregando lo siguiente en la parte superior del App.jsarchivo junto con nuestras otras importaciones:

App.jsimport {
  ThemeContainer,
  ThemeButton,
} from "./components/styles/ThemeSwitching.styled";

En el mismo archivo, también agregaremos el siguiente fragmento de código entre el Headercomponente con estilo y el componente QuotesReact:

App.js<ThemeContainer>
  <span>Themes: </span>
  <ThemeButton className="light active"></ThemeButton>
  <ThemeButton className="dark"></ThemeButton>
  <ThemeButton className="blue"></ThemeButton>
  <ThemeButton className="green"></ThemeButton>
  <ThemeButton className="brown"></ThemeButton>
  <ThemeButton className="pink"></ThemeButton>
</ThemeContainer>

En este punto, todos los botones del tema tienen una apariencia idéntica:

Agreguemos diferentes colores de fondo a los botones de tema para representar los diferentes temas.

Agregaremos el siguiente código al Global.jsarchivo:

Global.js// theme buttons color
.light {
  background-color: hsl(0, 0%, 93%);
}
.dark {
  background-color: hsl(0, 0%, 20%);
}
.blue {
  background-color: hsl(195, 53%, 79%);
}
.green {
  background-color: hsl(150, 80%, 15%);
}
.brown {
  background-color: hsl(39, 70%, 50%);
}
.pink {
  background-color: hsl(350, 100%, 88%);
}

// active theme
.active{
    border: 3px solid hsl(0, 0%, 87%);
    }

Ahora, como se muestra a continuación, cada uno de los botones tiene un color diferente que corresponde a su tema. El tema claro (el tema actual) tiene un fondo gris claro y un borde diferente al de los otros botones. Esto se debe a que usamos active classNamepara especificar un sólido borderpara el tema actual. Más adelante en este tutorial, aplicaremos clics de función a los botones para agregarlos active classNameal botón del tema seleccionado cuando se alterna el botón.

Ahora vamos a crear los temas.

Creación de varios temas

Hasta ahora, hemos creado botones para seis temas. El color de fondo de cada botón corresponde a un tema. El botón de tema claro es blanco, el botón de tema oscuro es negro y los colores de los otros botones de tema coinciden con el nombre de tema correspondiente: azul, verde, marrón y rosa.

Ahora, es el momento de crear los temas.

En la stylescarpeta, creemos un Theme.styled.jsarchivo y agreguemos lo siguiente:

Theme.styled.jsexport const light = {
  name: "light-theme",
  colors: {
    header: "hsl(0, 0%, 93%)",
    background: "hsl(0, 0%, 100%)",
    footer: "hsl(0, 1%, 38%)",
    text: "hsl(0, 1%, 16%)",
    quoteBgc: "hsl(60, 40%, 100%)",
    quoteTitle: "hsl(0, 1%, 38%)",
    quoteBody: "hsl(0, 1%, 38%);",
    quoteBorder: "hsl(0, 0%, 87%)",
    border: "hsl(0, 0%, 87%)",
  },
};

export const dark = {
  name: "dark-theme",
  colors: {
    header: "hsl(0, 0%, 20%)",
    background: "hsl(0, 1%, 16%)",
    footer: "hsl(0, 0%, 93%)",
    text: "hsl(0, 0%, 100%)",
    quoteBgc: "hsl(0, 0%, 35%)",
    quoteTitle: "hsl(0, 0%, 100%)",
    quoteBody: "hsl(0, 0%, 100%)",
    quoteBorder: "hsl(0, 0%, 59%)",
    border: "hsl(0, 0%, 78%)",
  },
};

export const blue = {
  name: "blue-theme",
  colors: {
    header: "hsl(195, 53%, 79%)",
    background: "hsl(194, 100%, 97%)",
    footer: "hsl(195, 52%, 28%)",
    text: "hsl(0, 1%, 16%)",
    quoteBgc: "hsl(0, 0%, 100%)",
    quoteTitle: "hsl(195, 52%, 28%)",
    quoteBody: "hsl(0, 0%, 38%)",
    quoteBorder: "hsl(0, 0%, 87%)",
    border: "hsl(0, 0%, 87%)",
  },
};

export const green = {
  name: "green-theme",
  colors: {
    header: "hsl(150, 80%, 15%)",
    background: "hsl(150, 80%, 20%)",
    footer: "hsl(150, 80%, 80%)",
    text: "hsl(150, 80%, 80%);",
    quoteBgc: "hsl(150, 60%, 60%)",
    quoteTitle: "hsl(130, 90%, 10%)",
    quoteBody: "hsl(130, 70%, 10%)",
    quoteBorder: "hsl(130, 80%, 20%)",
    border: "hsl(170, 100%, 60%)",
  },
};

export const brown = {
  name: "brown-theme",
  colors: {
    header: "hsl(39, 70%, 50%)",
    background: "hsl(37, 83%, 54%)",
    footer: "hsl(39, 50%, 20%)",
    text: "hsl(100, 0%, 20%)",
    quoteBgc: "hsl(50, 100%, 70%)",
    quoteTitle: "hsl(37, 23%, 24%)",
    quoteBody: "hsl(30, 23%, 24%)",
    quoteBorder: "hsl(50, 50%, 50%)",
    border: "rgb(224, 189, 33)",
  },
};

export const pink = {
  name: "pink-theme",
  colors: {
    header: "hsl(350, 100%, 88%)",
    background: "hsl(300, 80%, 88%)",
    footer: "hsl(300, 10%, 28%)",
    text: "hsl(300, 100%, 28%)",
    quoteBgc: "hsl(350, 50%, 78%)",
    quoteTitle: "hsl(300, 50%, 28%)",
    quoteBody: "hsl(320, 20%, 28%)",
    quoteBorder: "hsl(300, 50%, 28%)",
    border: "hsl(300, 50%, 58%)",
  },
};

En el código anterior, hemos creado seis objetos de tema diferentes y hemos nombrado cada objeto de acuerdo con el color del tema. Hemos exportado los objetos de la misma manera que exportamos los otros componentes con estilo.

Ahora que hemos creado los temas, usemos ThemeProviderpara agregarlos a la aplicación.

Adición de temas conThemeProvider

ThemeProvider proporciona nuestro tema a cada componente dentro de su contenedor a través de la API React Context. Usaremos ThemeProviderpara habilitar el cambio de tema.

Primero importemos ThemeProvider y luego importemos nuestros temas del Theme.styled.jsarchivo al App.jsarchivo.

App.jsimport { ThemeProvider } from "styled-components";
import {
  light,
  dark,
  blue,
  green,
  brown,
  pink,
} from "./components/styles/Theme.styled";

Ahora que hemos importado los temas, envolvamos los componentes de la aplicación con el ThemeProvidercomponente. También pasaremos un accesorio de tema al ThemeProvidercomponente.

Esta propiedad de tema pasa cualquier objeto de tema asignado a cada componente y elemento de la aplicación que está envuelto por ThemeProvider, lo que les permite tener acceso a todas las propiedades presentes en el objeto de tema.

Por ahora, estamos pasando el lightobjeto del tema como accesorio.

App.jsfunction App() {
  return (
    <ThemeProvider theme={light}>
      <div className="App">
    <GlobalStyles />
      <Header>Game of Thrones Quotes</Header>
       
      <ThemeContainer>
        <span>Themes: </span>
        <ThemeButton className="light active"></ThemeButton>
        <ThemeButton className="dark"></ThemeButton>
        <ThemeButton className="blue"></ThemeButton>
        <ThemeButton className="green"></ThemeButton>
        <ThemeButton className="brown"></ThemeButton>
        <ThemeButton className="pink"></ThemeButton>
       </ThemeContainer>

   
      <Quotes />

      <Footer>
          <p>
            Made with love by <a href="http://bio.link/timonwa">Timonwa</a>
          </p>
        </Footer>
     </div>
     </ThemeProvider>
  );
}

Ahora, entraremos en cada uno de los componentes con estilo y refactorizaremos los códigos para acceder a las propiedades de color del tema, que actualmente está configurado como tema claro.

Primero importaremos el Theme.styledcomponente; Explicaré por qué un poco más adelante en este tutorial.

Global.jsimport * as theme from "./Theme.styled";Global.styled.jsbody {
  background-color: ${({ theme }) => theme.colors.background};
  color: ${({ theme }) => theme.colors.text};
  font-family: monospace;
  overflow-x: hidden;
}

// theme buttons color
.light {
  background-color: ${theme.light.colors.header};
}
.dark {
  background-color: ${theme.dark.colors.header};
}
.blue {
  background-color: ${theme.blue.colors.header};
}
.green {
  background-color: ${theme.green.colors.header};
}
.brown {
  background-color: ${theme.brown.colors.header};
}
.pink {
  background-color: ${theme.pink.colors.header};
}

// active theme
.active{
    border: 3px solid ${({ theme }) => theme.colors.border};
}

En el bodyestilo, accedemos a las propiedades de colores del tema que pasamos usando una función sin nombre que también toma el tema como argumento. Ahora, si configuramos el tema propen dark, obtendremos el color de fondo y del texto de las darkpropiedades de color del tema. Lo mismo ocurre con la luz, el azul, el verde, el marrón y el rosa.

Sin embargo, no se accede al color de fondo del botón desde el accesorio del tema, sino directamente desde el tema que importamos. Si configuramos el color de fondo del botón de acuerdo con el tema proppasado, los seis botones tendrían el mismo color de fondo: el del tema activo (actual). Esta es la razón por la que importamos el Theme.styledcomponente primero.

Probemos esto:

Global.styled.js// theme buttons color
.light {
  background-color: ${({ theme }) => theme.colors.header};
}
.dark {
  background-color: ${({ theme }) => theme.colors.header};
}
.blue {
  background-color: ${({ theme }) => theme.colors.header};
}
.green {
  background-color: ${({ theme }) => theme.colors.header};
}
.brown {
  background-color: ${({ theme }) => theme.colors.header};
}
.pink {
  background-color: ${({ theme }) => theme.colors.header};
}

Como puede ver, todos los botones de tema actualmente tienen un color de fondo gris claro, como se especifica en el tema predeterminado prop: light.

Volvamos los botones al código correcto:

Continuando con nuestra refactorización, hagamos cambios en los otros componentes con estilo, como el , Headery para que puedan tener acceso a nuestro accesorio de tema.FooterCardThemeSwitching

Reemplace el código relevante en las propiedades de estilo existentes con lo siguiente:

Header.styled.jsexport const Header = styled.header`
  background-color: ${({ theme }) => theme.colors.header};
`;Footer.styled.jsexport const Footer = styled.footer`
  background-color: ${({ theme }) => theme.colors.footer};
  color: ${({ theme }) => theme.colors.background};

  a {
    color: ${({ theme }) => theme.colors.background};
  }
`;Card.styled.jsexport const Card = styled.div`
  background-color: ${({ theme }) => theme.colors.quoteBgc};
  border: 1px solid ${({ theme }) => theme.colors.quoteBorder};
`;

export const CardTitle = styled.div`
  color: ${({ theme }) => theme.colors.quoteTitle};
  border-bottom: 1px solid ${({ theme }) => theme.colors.quoteBorder};
`;

export const CardBody = styled.div`
  color: ${({ theme }) => theme.colors.quoteBody};
`;ThemeSwitching.styled.jsexport const ThemeContainer = styled.div`
  background-color: ${({ theme }) => theme.colors.background};
  border-bottom: 1px solid ${({ theme }) => theme.colors.border};
`;

export const ThemeButton = styled.button`
  border: 1px solid ${({ theme }) => theme.colors.border};

  &:hover {
    box-shadow: 2px 2px 2px ${({ theme }) => theme.colors.border};
`;

Como se muestra a continuación, la aplicación aún se ve igual en el navegador. También podemos cambiar el tema propa otros temas para confirmar que cada tema tiene la apariencia deseada con los elementos con estilo.

Ahora es el momento de hacer que los botones del tema funcionen.

Cambiando temas

No tiene sentido darle al usuario una preferencia de tema si el usuario no puede cambiarlo en la interfaz de usuario, ¿verdad? Entonces, escribamos el código que permitirá cambiar de tema con solo hacer clic en un botón.

Crearemos un selectedTheme estado con useStateReact Hook. Este estado se establecerá inicialmente en el lightobjeto del tema.

Primero, importaremos el useStateHook al archivo App.js:

App.jsimport React, { useState } from "react";

Luego, crearemos el estado, así, justo antes de la returnclave:

App.jsfunction App() {
  // theme state
  const [selectedTheme, setSelectedTheme] = useState(light);
  return (

A continuación, pasaremos selectedThemecomo accesorio de tema en el archivo ThemeProvider. Cuando selectedThemecambia el estado, la propiedad del tema cambiará, lo que hará que la página se actualice al nuevo tema.

App.jsreturn (
    <ThemeProvider theme={selectedTheme}>
      <div className="App">

Ahora, escribiremos una HandleThemeChangefunción que se ejecutará cada vez que se haga clic en un botón de tema. Esto se agregará al App.jsarchivo, justo debajo de la useStatefunción:

App.js// function to handle user theme selection on click and save it to local storage
  const HandleThemeChange = (theme) => {
    setSelectedTheme(theme);
  };

Cuando un usuario hace clic en un botón, se pasa un argumento a la HandleThemeChangefunción como parámetro (es decir, el objeto de tema asociado con ese botón). Luego, la HandleThemeChangefunción cambia el selectedThemeestado al parámetro que se pasó.

Por ejemplo, si el usuario hace clic en el darkbotón de tema, el objeto de tema oscuro se pasaría como argumento y se usaría como parámetro en la HandleThemeChangefunción. La función establecería el selectedThemeen dark. Esto, a su vez, pasaría como accesorio al ThemeProvider, actualizando la apariencia de la página en el navegador con las propiedades de color asociadas con el tema seleccionado.

Ahora, necesitamos adjuntar esta función a los botones. Agregaremos lo siguiente al App.jsarchivo:

Aplicación.js

       <ThemeContainer>
          <span>Themes: </span>
          <ThemeButton
            className={`light ${selectedTheme === light ? "active" : ""}`}
            onClick={() => HandleThemeChange(light)}></ThemeButton>
          <ThemeButton
            className={`dark ${selectedTheme === dark ? "active" : ""}`}
            onClick={() => HandleThemeChange(dark)}></ThemeButton>
          <ThemeButton
            className={`blue ${selectedTheme === blue ? "active" : ""}`}
            onClick={() => HandleThemeChange(blue)}></ThemeButton>
          <ThemeButton
            className={`green ${selectedTheme === green ? "active" : ""}`}
            onClick={() => HandleThemeChange(green)}></ThemeButton>
          <ThemeButton
            className={`brown ${selectedTheme === brown ? "active" : ""}`}
            onClick={() => HandleThemeChange(brown)}></ThemeButton>
          <ThemeButton
            className={`pink ${selectedTheme === pink ? "active" : ""}`}
            onClick={() => HandleThemeChange(pink)}></ThemeButton>
        </ThemeContainer>

En el código anterior, agregamos un operador ternario condicional al classNamede cada botón.

Este operador verifica si selectedThemees igual al tema asociado con el botón. Si es así, agrega una active clase a ese botón.

Por ejemplo, nuestro selectedThemees igual a lightdebido al código que se ejecutó en la HandleThemeChangefunción. Entonces, si hacemos clic en el lightbotón, activese agregará una clase al lightbotón ya que nuestra selectedThemetambién es igual a light.

Como recordará anteriormente en este tutorial, la activeclase agrega un estilo de sombra de cuadro a cualquier botón de tema que tenga la activeclase adjunta.

Echemos un vistazo a la aplicación en el navegador y seleccionemos un nuevo tema. Notarás que los colores de la página cambian según el tema seleccionado. Además, el botón del tema seleccionado tiene una sombra de cuadro.

Video 

¡La aplicación está casi completa! Todavía tenemos un problema crucial que solucionar para que el cambio de tema funcione perfectamente.

Actualmente, si seleccionamos un tema que no sea el tema de luz preseleccionado (predeterminado), los colores de la página vuelven a los asociados con el tema de luz cuando recargamos la página:

Video

El color vuelve al tema predeterminado porque la preferencia del tema no se almacena ni se guarda en ningún lugar (es decir, en el almacenamiento local o en la memoria caché).

Este es un tema crítico que debe ser abordado. Para las aplicaciones con más de una página, el tema volvería al tema predeterminado cada vez que el usuario navegara a una nueva página.

Guardar el tema en el almacenamiento local

Guardar el selectedThemealmacenamiento local es relativamente fácil y solo implica unas pocas líneas de código. Usaremos useEffectReact Hook junto con localStorage.

Actualicemos la HandleThemeChangefunción, así:

App.jsconst HandleThemeChange = (theme) => {
    setSelectedTheme(theme);
    localStorage.setItem("current-theme", JSON.stringify(theme));
  };

Ahora, cuando un usuario haga clic en un botón de tema, el selectedThemeestado cambiará y el tema preferido se guardará localStoragecomo current-theme.

Notarás que necesitamos encadenar el themeprimero antes de guardarlo en formato localStorage.

Ahora, vamos a crear el useEffectgancho. Esta función debe colocarse en el código inmediatamente después de useState:

App.js  // theme state
  const [selectedTheme, setSelectedTheme] = useState(light);

  // react hook to get the theme selected by the user that is saved in local storage
  useEffect(() => {
    const currentTheme = JSON.parse(localStorage.getItem("current-theme"));
    if (currentTheme) {
      setSelectedTheme(currentTheme);
    }
  }, []);

También necesitamos importar este Hook desde React para usarlo:

import React, { useState, useEffect } from "react";

Cuando la aplicación se carga inicialmente, useEffect verifica localStorage para ver si hay un tema actual almacenado. Si se almacena un tema actual, useEffect devuelve este tema como una cadena y analizamos los datos para volver a cambiarlo a JavaScript. useEffect también establece el selectedThemetema almacenado.

Si useEffect no encuentra un tema almacenado en localStorage, establece el selectedThemetema predeterminado (en este caso, el tema claro).

Si elegimos cualquier tema además del tema claro y actualizamos la página, nuestra preferencia de tema permanecerá, como se muestra:

Video

Conclusión

Los componentes con estilo hacen que sea muy fácil crear y mantener múltiples temas para las aplicaciones web de React.

En este tutorial, demostramos cómo crear un conmutador de temas personalizado para una aplicación React con el tema de Game of Thrones utilizando componentes con estilo. También mostramos cómo usar el almacenamiento local para guardar la preferencia de tema de un usuario, de modo que cuando vuelvan a cargar la página, naveguen a otra página o incluso cierren la página o el navegador y luego vuelvan a visitar la página unos días después, su preferencia de tema sigue siendo la misma. mismo.

Puede ver el código completo utilizado en el tutorial en GitHub y la aplicación implementada aquí .

 Fuente: https://blog.logrocket.com/build-react-theme-switcher-app-styled-components/

#react 

Mathew Rini

1615544450

How to Select and Hire the Best React JS and React Native Developers?

Since March 2020 reached 556 million monthly downloads have increased, It shows that React JS has been steadily growing. React.js also provides a desirable amount of pliancy and efficiency for developing innovative solutions with interactive user interfaces. It’s no surprise that an increasing number of businesses are adopting this technology. How do you select and recruit React.js developers who will propel your project forward? How much does a React developer make? We’ll bring you here all the details you need.

What is React.js?

Facebook built and maintains React.js, an open-source JavaScript library for designing development tools. React.js is used to create single-page applications (SPAs) that can be used in conjunction with React Native to develop native cross-platform apps.

React vs React Native

  • React Native is a platform that uses a collection of mobile-specific components provided by the React kit, while React.js is a JavaScript-based library.
  • React.js and React Native have similar syntax and workflows, but their implementation is quite different.
  • React Native is designed to create native mobile apps that are distinct from those created in Objective-C or Java. React, on the other hand, can be used to develop web apps, hybrid and mobile & desktop applications.
  • React Native, in essence, takes the same conceptual UI cornerstones as standard iOS and Android apps and assembles them using React.js syntax to create a rich mobile experience.

What is the Average React Developer Salary?

In the United States, the average React developer salary is $94,205 a year, or $30-$48 per hour, This is one of the highest among JavaScript developers. The starting salary for junior React.js developers is $60,510 per year, rising to $112,480 for senior roles.

* React.js Developer Salary by Country

  • United States- $120,000
  • Canada - $110,000
  • United Kingdom - $71,820
  • The Netherlands $49,095
  • Spain - $35,423.00
  • France - $44,284
  • Ukraine - $28,990
  • India - $9,843
  • Sweden - $55,173
  • Singapore - $43,801

In context of software developer wage rates, the United States continues to lead. In high-tech cities like San Francisco and New York, average React developer salaries will hit $98K and $114per year, overall.

However, the need for React.js and React Native developer is outpacing local labour markets. As a result, many businesses have difficulty locating and recruiting them locally.

It’s no surprise that for US and European companies looking for professional and budget engineers, offshore regions like India are becoming especially interesting. This area has a large number of app development companies, a good rate with quality, and a good pool of React.js front-end developers.

As per Linkedin, the country’s IT industry employs over a million React specialists. Furthermore, for the same or less money than hiring a React.js programmer locally, you may recruit someone with much expertise and a broader technical stack.

How to Hire React.js Developers?

  • Conduct thorough candidate research, including portfolios and areas of expertise.
  • Before you sit down with your interviewing panel, do some homework.
  • Examine the final outcome and hire the ideal candidate.

Why is React.js Popular?

React is a very strong framework. React.js makes use of a powerful synchronization method known as Virtual DOM, which compares the current page architecture to the expected page architecture and updates the appropriate components as long as the user input.

React is scalable. it utilises a single language, For server-client side, and mobile platform.

React is steady.React.js is completely adaptable, which means it seldom, if ever, updates the user interface. This enables legacy projects to be updated to the most new edition of React.js without having to change the codebase or make a few small changes.

React is adaptable. It can be conveniently paired with various state administrators (e.g., Redux, Flux, Alt or Reflux) and can be used to implement a number of architectural patterns.

Is there a market for React.js programmers?
The need for React.js developers is rising at an unparalleled rate. React.js is currently used by over one million websites around the world. React is used by Fortune 400+ businesses and popular companies such as Facebook, Twitter, Glassdoor and Cloudflare.

Final thoughts:

As you’ve seen, locating and Hire React js Developer and Hire React Native developer is a difficult challenge. You will have less challenges selecting the correct fit for your projects if you identify growing offshore locations (e.g. India) and take into consideration the details above.

If you want to make this process easier, You can visit our website for more, or else to write a email, we’ll help you to finding top rated React.js and React Native developers easier and with strives to create this operation

#hire-react-js-developer #hire-react-native-developer #react #react-native #react-js #hire-react-js-programmer

Franz  Becker

Franz Becker

1651604400

React Starter Kit: Build Web Apps with React, Relay and GraphQL.

React Starter Kit — "isomorphic" web app boilerplate   

React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack, Babel and Browsersync. Helping you to stay productive following the best practices. A solid starting point for both professionals and newcomers to the industry.

See getting started guide, demo, docs, roadmap  |  Join #react-starter-kit chat room on Gitter  |  Visit our sponsors:

 

Hiring

Getting Started

Customization

The master branch of React Starter Kit doesn't include a Flux implementation or any other advanced integrations. Nevertheless, we have some integrations available to you in feature branches that you can use either as a reference or merge into your project:

You can see status of most reasonable merge combination as PRs labeled as TRACKING

If you think that any of these features should be on master, or vice versa, some features should removed from the master branch, please let us know. We love your feedback!

Comparison

 

React Starter Kit

React Static Boilerplate

ASP.NET Core Starter Kit

App typeIsomorphic (universal)Single-page applicationSingle-page application
Frontend
LanguageJavaScript (ES2015+, JSX)JavaScript (ES2015+, JSX)JavaScript (ES2015+, JSX)
LibrariesReact, History, Universal RouterReact, History, ReduxReact, History, Redux
RoutesImperative (functional)DeclarativeDeclarative, cross-stack
Backend
LanguageJavaScript (ES2015+, JSX)n/aC#, F#
LibrariesNode.js, Express, Sequelize,
GraphQL
n/aASP.NET Core, EF Core,
ASP.NET Identity
SSRYesn/an/a
Data APIGraphQLn/aWeb API

Backers

♥ React Starter Kit? Help us keep it alive by donating funds to cover project expenses via OpenCollective or Bountysource!

lehneres Tarkan Anlar Morten Olsen Adam David Ernst Zane Hitchcox  

How to Contribute

Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issue or feature request, participate in discussions, upvote or downvote the issues you like or dislike, send pull requests.

Learn More

Related Projects

  • GraphQL Starter Kit — Boilerplate for building data APIs with Node.js, JavaScript (via Babel) and GraphQL
  • Membership Database — SQL schema boilerplate for user accounts, profiles, roles, and auth claims
  • Babel Starter Kit — Boilerplate for authoring JavaScript/React.js libraries

Support

License

Copyright © 2014-present Kriasoft, LLC. This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.


Author: kriasoft
Source Code: https://github.com/kriasoft/react-starter-kit
License: MIT License

#graphql #react 

Juned Ghanchi

1621573085

React Native App Developers India, React Native App Development Company

Expand your user base by using react-native apps developed by our expert team for various platforms like Android, Android TV, iOS, macOS, tvOS, the Web, Windows, and UWP.

We help businesses to scale up the process and achieve greater performance by providing the best react native app development services. Our skilled and experienced team’s apps have delivered all the expected results for our clients across the world.

To achieve growth for your business, hire react native app developers in India. You can count on us for all the technical services and support.

#react native app development company india #react native app developers india #hire react native developers india #react native app development company #react native app developers #hire react native developers