ビルドダークモードのテーマをトグルで反応

私は、このポストのために私のインスピレーションを得ました
前提条件:

ゼロからの反応プロジェクトの設定

ラビオハ・ 5月30日・ 6分読む

#react #javascript

このポストでは、ダークモードのテーマトグルを構築します.これは我々が目指しているものです.

さあ、始めましょう!

1（基本的に記載されている）からのすべてに従って、基本からの反応プロジェクトから始めてください。

I just created a new folder sun-moon and copied everything from the previous (react-from-scratch) except node_modules and did a fresh npm i.

依存性としてCSSローダーとミニCSSの抽出プラグインを追加します。

npm i css-loader mini-css-extract-plugin -D

これは私たちがインポートできるようになりますcss 我々の中でjs 次のようにします.

// in App.js file
import "./App.css";

では、作成しましょうApp.css インsrc フォルダとインポートApp.js .

3 .アップデートwebpack。設定。これにはCSSローダーとミニCSSのプラグインが含まれます。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./public"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /(\.scss|\.css)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: "./public/index.html" }), new MiniCssExtractPlugin()],
};

Sun and moonコンポーネントを作成する

This is basically going to contain Sun/Moon svg as react component.

ここから太陽と月のSVGを得ることができます.

Sun

Moon

しかし、手動で作成することができますReact Component からSVG しかし、我々はまた、これを使用することができますplayground は、SVG コンポーネントをReact SVGR
さて、上記の全てを行った後に、このようにしてプロジェクトは次のようになります.

---sun-moon
  |--node_modules
  |--...
  |--src
     |--App.js
     |--App.css
     |--index.js
     |--Sun.js
     |--Moon.js

DarkContextコンテキストを作成する

ファイルを作るDarkContext.js インsrc この内容のフォルダ

import { createContext } from "react";

export const DarkContext = createContext(false);

コンテキストオブジェクトを作成しますDarkContext RetristryライブラリからCreateContextメソッドを使用する

DarkContext デフォルトのテーマ値false .

アプリケーションをdarkcontextでラップします。プロバイダ

ラップApp with DarkContext.Provider と初期値を指定します.

現在、他のコンポーネントは、使用することによってテーマの値にアクセスすることができますDarkContext .

例ではSun and Moon コンポーネントは、現在のコンテキストがDark or Light (暗い).

Note: We could have passed the value of theme using props, and that would also be okay, but let's try to get a feel of react's context api.

では、この後App.js 次のようになります.

import React, { useState } from "react";
import { DarkContext } from "./DarkContext";

import "./App.css";

const App = () => {
  const [isDark, setIsDark] = useState(false);

  return (
    <DarkContext.Provider value={isDark ? true : false}>
      <div className="instruction">Click On Sun/Moon &#128071;</div>
      <div className={`app${isDark ? " dark" : ""}`}>
        Hello World
      </div>
    </DarkContext.Provider>
  );
};

export default App;

こちらです.App もmaintaining 内部状態isDark , コンテキストの値を更新するのに役立ちます.

<DarkContext.Provider value={isDark ? true : false}>
...
</DarkContext.Provider>

Sun & Moonコンポーネントを保持するThemeIconコンポーネントを作成する

import React, { useContext } from "react";
import Moon from "./Moon";
import Sun from "./Sun";

function ThemeIcon(props) {
  const { onClick } = props;

  return (
    <div className="theme-icon" onClick={onClick}>
      <Sun></Sun>
      <Moon></Moon>
    </div>
  );
}

export default ThemeIcon;

ここで空想は何もない、それは我々のSun and Moon また、コンポーネントを持っている必要がありますonClick 値を変更するハンドラisDark からApp's 内部の状態とそれはApp コンポーネント.

Appコンポーネントの「Themicon」コンポーネントを含み、OnClickハンドラを下に渡します。

import React, { useState } from "react";
import { DarkContext } from "./DarkContext";
import ThemeIcon from "./ThemeIcon";

import "./App.css";

const App = () => {
  const [isDark, setIsDark] = useState(false);

  return (
    <DarkContext.Provider value={isDark ? true : false}>
      <div className={`app${isDark ? " dark" : ""}`}>
        <ThemeIcon onClick={() => setIsDark(!isDark)}></ThemeIcon>
      </div>
    </DarkContext.Provider>
  );
};

export default App;

この行を見ると

<div className={`app${isDark ? " dark" : ""}`}>

また、いくつか対応する見てくださいcss :

.app {
  width: 100vw;
  height: 100vh;
  ...
}

.dark {
  ...
}

我々は、HTMLの要素を言っていることに気づくでしょうdiv.app であるfull width and full height . とisDark is true CSSクラスを追加する予定ですdark 同様に.

Sun & Modeコンポーネントのコンテキストを使用する

に関してはuseContext

これは、入力として反応文脈オブジェクトを受け入れます.我々にとってはDarkContext .

出力useContext コンテキストの現在値true/false ).

だから、我々は使用されますuseContext コンテキストの現在の値を取得するにはSun/Moon コンポーネント.
このようにします.

const isDark = useContext(DarkContext);

我々のSun and Moon 次のようになります.

import React, { useContext } from "react";
import PropTypes from "prop-types";
import { DarkContext } from "./DarkContext";

function Sun() {
  // Things to notice here:
  const isDark = useContext(DarkContext);

  return (
    <svg
      version="1.1"
      id="Capa_1"
      x="0px"
      y="0px"
      viewBox="0 0 457.32 457.32"
      // Things to notice here:
      className={`sun ${isDark ? " sun-dark" : ""}`}
    >
      ...
    </svg>
  );
}

export default Sun;

それは正確に同じですMoon コンポーネントも.
では、

npm run start:dev

我々は、我々のアプリを見ることができるはずですhttp://localhost:8080/ .
我々が全体で議論しなかった唯一のものはそれですcss しかし、もし我々が理解できるならsun 消えていくmoon で、どのように来るmoon 消滅してsun それから、我々は我々が完全にそれを理解したと言うことができます.
しかし、我々は見ることができますcss コードはこちらgithub (この記事の最後に共有されたリンク)、何が起こっているかを理解しようとしますが、代わりにこれらの2つのスクリーンショットを見てみましょう、私は論理を理解するのに十分でなければならないと思います、残りはすべてその論理のためにちょうどコードを書いているだけです.
そこで、このスクリーンショットを最初に見てみましょう.

だから、私たちはIconContainer (我々のコードに関してはThemeIcon を保持しているコンポーネントSun アイコン/コンポーネント、太陽の不透明度1 そこにも見えるMoon でも不透明度だから目に見えない0 {opacity: 0} , 私がクリックするときIconContainer 我々Sun として不透明度を作ることによって目に見えないZero(0) (余分なクラスを追加することによって)sun-dark ) 月の不透明さがOne(1) (追加のクラスを追加します.moon-dark 月のSVGには、isDark ), 我々は別の一見を持つことができますSun/Moon コンポーネントと参照css classes が追加されています.
我々がクリックするときIconContainer , これは次のようになります.

したがって、これは私たちがクリックしたときに起こったことです.

DarkContext 's値は、真実であるということです.

Sun/Moon 彼らが行動するつもりであることに基づいて、文脈を通してその変化を知るつもりです.

Sun になりますsun-dark クラスへのSVG , どちらが見えなくなるかopacity: 0 )

Moon になりますmoon-dark クラスだけでなくSVG , どちらが表示されますかopacity: 1 )

我々が再びクリックするとき、同じことはちょうど逆で起こりそうです.
いくつかあるtransitions and transformation 私はそれをもっと面白くするために加えましたが、心配しないでください.私たちが上記の論理を理解できるなら、物事は簡単になります.
ここでライブデモを見ることができます.Sun Moon
全体のコードを見ることができますhere
――感謝、ラビ