天気予報アプリケーションの移行に反応する.js

始める前に

1週間半の間、私はGitTubで迷って、私に興味のある問題を見つけました.助けを得るために貢献を探している多くの人々、または多くの企業がバギー問題を解決するためです.それらはすべてOKですが、今回は実際には私の魅力はありません.
そこで今回は、アプリケーションを配備してからずっとやりたいプロジェクトの一つを強化することにしました.Weather App .

天気はどうですか。

Googleサービスのおかげで、我々は天気予報なしで天気を知っているか、実際に外に行くことができます.
しかし、ときにどのような現在の天気は、特定の都市ではなく、あなたの場所になるだろうし、それを見つけるには、Googleは大きなオプションではありません.それはあなたが期待して高速ではない、それはあまりに重いWebサービスである可能性があります.

Weather Application 小さなWebアプリケーションは、都市名で検索天気を支援することです.
それはDarksky APIとMapbox APIを使用して、リアルタイムの気象情報を取得します.

何が問題ですか。

The issue はプログラムを反応させる.jsつまり、アプリケーションは現在、ノードでのみ書き込まれます.jsこれは、サーバー側のプログラムがあり、レンダリングする.html ページ、それに依存handlebars .
それは完全に動作しますが、問題は、応答のUIをサポートしていません.モバイルプラットフォームでこれを見るとき、それはよくありません.また、多くのhandlebar ファイルを作成し、それらをレンダリングすると、ページの読み込みに時間がかかりました.
これらの問題は、プログラムがノードでサーバ側に分離されるならば解決されるでしょう.JSとフロントエンドの反応.js

反応をインストールします。js

開始するには、最初に反応をインストールする必要があります.jsnpx create-react-app [app-name] ディレクトリ内の反応アプリを生成します.あなたのマシンに反応をインストールしない場合は、まずインストールをお願いします.
その後、サンプルを取得します.プロジェクト.

構成要素を作る

アプリケーションは主に6つの部分がありますヘッダ、Navbar、検索、結果、フッター---.したがって、このようなコンポーネントツリーを作成します.
メイン
ヘッダ/Navbar/
ヘッダー/ナビバンド/
ヘッダ/Navlink/
フッター/フッター
はてなブックマーク
そして、それぞれのフォルダには[component_name].jsx ファイル.

ハンドバーからプログラムを移行する。日本学術振興会

メインフォルダは、すべてのコンポーネントを含むルートコンテナです.これでSwitch and React.lazy 負荷、およびreact-router-dom .

import React from "react";
import { Route, Switch } from "react-router-dom";
import "./App.css";
...
const App = () => {
...
  return (
         <div className="App">
          ....
         </div> 
   );
};

検索コンポーネント

const Search = (props) => {
  ...
  return (
    <div className={styles.main-content}>
      <p>Use this site to get your weather!</p>

      <form >
        <input className={styles.input} placeholder="Location..." />
        <button className={styles.button}>Search</button>
      </form>
    ...
    </div>
  );
};

ヘッダーコンポーネント

const Header = (props) => {
 ...
  return (
    <div className={styles.header}>
        ...
    </div>
  );
}

上記の2つのコンポーネントのように、他のコンポーネントは、同様に実装されます.

次は何ですか。

限られた時間のため、これのために多くの作品.私はその問題を3つに分けた.

We need to make a REST API server ----> どのクライアントがaxios そこからのリクエストを得ることができます.

Make a different CSS style -----> これまでのところ、プログラムは今のところ同じCSSスタイルを使用しています.ブートストラップ.module.css が使用されます.

Make a redux or hook to handle state and communicate with REST API. -----> これは、アプリケーションを完全に実装されます.

上記のすべてが解決されると、問題は続行されます.つの問題がすべて完了したら、私は徐々に更新されます.