keyframes

keyframesはstyled-componentsに含まれる技術で、ネット動画を実現するのに役立ちます.

import styled, { keyframes } from 'styled-components';

function App() {
  return (
    <div className="App">
      <Box></Box>
    </div>
  );
}

const move = keyframes`
  0%{
    top: 20px;
    opacity: 1;
    left: 20px;
    background: green;
  }
  
  30%{
    top: 50px;
    background: orange;
  }

  50%{
    top: 200px;
    opacity: 0;
    left: 200px;
  }
  
  80%{
    top: 150px;
  }

  100%{
    top: 20px;
    opacity: 1;
    left: 20px;
    background: blue;
  }  
`;

const Box = styled.div`
  width: 300px;
  height: 300px;
  background-color: green;
  border-radius: 150px;
  position: absolute;
  top: 20px;
  left: 20px;
  animation: ${move} 2s 1s infinite;
  opacity: 1;
`;


export default App;

上記のコードに示すように、フレーム単位で様々なアニメーションを直感的に作成できます.コードを実行すると、菱形のトラックを描画し、色と透明度が変化する円を表示できます.

Progress Bar

Progressbarを実装します.まずはducks moduleで新しいaction・action creator・reducer case・Detail.jsを創ります.

// action
...
const UPDATE = "bucket/UPDATE";
...

// action ctreator
export const updagteBucket = (bucket) => {
    return { type: UPDATE, bucket };
}
...

// switch in Reducer
...
case "bucket/UPDATE": {
            const bucket_list = state.list.map((l, idx) => {
                if (idx === action.bucket) {
                    return { ...l, completed: true };
                } else {
                    return l;
                }
            })
            return { list: bucket_list };
        }
...

個別要素に対応する画面のdeleteBucketでは、既存のApp.js隣に接続し、メイン画面に対応する<Progress />では、適宜の位置でProgress.js要素を作成して接続する.

import { useSelector, useDispatch } from 'react-redux'
import { deleteBucket, updagteBucket } from './redux/modules/bucket';
...
<Button onClick={() => {
                    dispatch(updagteBucket(bucket_index));
                    props.history.goBack();
                }}>완료</Button>

最終立案completedApp.jsの価格は実数に応じてスタイルを盛り込む.

import React from 'react'
import styled from 'styled-components'
import { useSelector } from 'react-redux'

export const Progress = () => {
    const bucket_list = useSelector(state => state.bucket.list);
    let count = bucket_list.filter(l => l.completed === true).length;

    return (
        <ProgressBar>
            <HighLight width={(count / bucket_list.length) * 100 + "%"} />
        </ProgressBar>
    )
}

const ProgressBar = styled.div`
    background-color: #eee;
    width: 100%;
    height: 40px;
`;

const HighLight = styled.div`
    background-color: orange;
    height: 40px;
    width: ${props => props.width};
    transition: width 1s;
`;

Scroll Bar

最下端に現れるscrollTo基本的に受け入れるx・y座標の2つの因子を、スムーズに上昇させるためbehaviorオプションは、以下のコードに従ってディックシェリー形式で記述する.

<button onClick={() => {
          window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
        }}>top</button>

Firestore

使用Baasサービスの一つFireBase医FirestoreGoogleアカウントで行います.

[開始](Start)をクリックし、適切なプロジェクト名を選択し、[続行](Continue)をクリックします.

プロジェクトが完了したら、左上隅のメニューから
빌드クラウドを使用可能Firestore DatabaseJSON形式でデータを格納し、バックエンドに影響を及ぼさずにフロントエンドの学習に集中できるようにします.中央の「データベースの作成」をクリックすると、次の設定が表示されます.

ローカルでの開発を加速させるには、Firestore DBを選択し、「次へ」をクリックします.いつでも生産モードに変更できます.物理的NoSQLに割り当てられている箇所を特定します.この位置は実際の地形を表し、確定したら変更できません.選択테스트 모드에서 시작を押してDB
完成したダッシュボードには、asia-northeast2セット(これはドキュメントのセットであり、まずRDBMSのアーキテクチャに似た概念と理解される)の名前を設定します.

次に、表などの概念のドキュメントとフィールドを作成します.完了したドキュメントと内部フィールドは、ダッシュボードを介して入力、変更、削除機能をサポートします.

今から反応器にバインドしましょう사용 설정に次のコマンド語を入力します.

yarn add firebase

設置+컬렉션 시작エbash

import firebase from 'firebase/app';
import "firebase/firestore";

const firebaseConfig = {
}

firebase.initializeApp(firebaseConfig);

const firestore = firebase.firestore();

export { firestore };

完了後、再度ダッシュボードホームページに戻り、その中からsrc画面中firebase.js(Web)を選択します.

その後、画面でアプリケーションにニックネームを付け、アプリケーション登録をクリックします.

以下の手順で、앱에 Firebase 추가하여 시작하기アンの値を作成したばかり</>ファイルのfireBaseConfigにコピーし、値を記入します.
firebase.jsに戻り、接続const firebase = {}、設定は終了です.App.js出力firestore接続を簡単に確認できます.

import { firestore } from "./firebase";
...
componentDidMount() {
  // 컬렉션 가져오기
  const bucket = firestore.collection("bucket");
  
  // 특정 문서(bucket_item1) 가져오기
  bucket.doc("bucket_item1").get().then((doc) => {
      console.log(doc.data());
      console.log(doc.id);
    }); 
  
  // 모든 문서 가져오기
  bucket.get().then(docs => {
      let bucket_data = [];
      docs.forEach((doc) => {
        if (doc.exists) bucket_data = [...bucket_data, { id: doc.id, ...doc.data() }]
      })
      console.log(bucket_data);
    });
}
...

CRUD

入力、変更、削除を開始します.componentDidMount与えなければ、独自のIDを自動的に付与する.firebaseで出してみることができます.また、接続されていないコレクションの場合は、名前のコレクションが追加されます.

    // 입력
    bucket.add({ text: "그림 배우기", completed: false }).then((docRef) => {
      console.log(docRef);
      console.log(docRef.id);
    })

    // 수정
    bucket.doc("bucket_item1").update({ text: "리액트 공부" });

    // 삭제
    bucket.doc("bucket_item1").delete();