技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

友人が卒業してインターンシップを始めたと聞きました。しかし、同社はまだ使用していますビュー、リーダーはしばらくしたら使用させてもらうと言った反応するプロジェクトを実行する前に、まず自分で学習してください。

ちなみに、私もブログを書いているので、困っている人たちの役に立てればと思います。

目次

1 プロジェクトのインストール

1.1 ディレクトリを選択してターミナルを起動します

1.2 create-react-app コマンドをインストールする

1.3 プロジェクトの作成

1.4 ディレクトリファイルの表示

1.5 プロジェクトを開始する

2 必ず使用されるサードパーティライブラリ

2.1 js-ツール-ビッグボックス

2.1.1 日時クラス

2.1.2 Webストアクラス

2.1.3 イベントクラス

2.1.4 数値クラス

2.1.5 文字列クラス

2.1.6 定期検証授業

2.1.7 ajaxクラス

2.1.8 データ データクラス

2.1.9 ブラウザ ブラウザクラス

2.2 以下または Sass プリプロセッサ

2.3 axiosリクエストライブラリ

2.4 UIライブラリ

---

1 プロジェクトのインストール

1.1 ディレクトリを選択してターミナルを起動します

この React プロジェクトを実行するためのディレクトリとしてコンピューター上のフォルダーを見つけ、フォルダーの URL に「cmd」と入力すると、ターミナルがポップアップ表示され、ターゲット ディレクトリを指定することもできます。

 

ここで「cmd」と入力し、Enter キーを押してターミナルのポップアップ ウィンドウを表示します。

1.2 create-react-app コマンドをインストールする

次のコマンドを実行します。 -g はグローバルにインストールすることを意味します

npm インストール -g 作成-react-app

1.3 プロジェクトの作成

たとえば、次の名前のファイルを作成したいとします。 js-ツール-ビッグボックス-React プロジェクトを作成したら、次のコマンドを実行できます。

React アプリを作成する js-ツール-ビッグボックス-React

次にターミナルがインストールされます。インストールは少し遅いかもしれません、インストールが完了したら、次の図に示すように、辛抱強く待ちます。

1.4 ディレクトリファイルの表示

• パブリック ディレクトリには、使い慣れた HTML ファイルといくつかの静的な必須ファイルが保存されます。
• src ディレクトリはプロジェクト開発にとって重要なディレクトリです。
• さらにその下の、index.js がエントリ ファイルです。
• App.js にいくつかの変更を加えて、Web ページの効果を確認してみてください。

1.5 プロジェクトを開始する

上の図では、VSCode エディターを使用して React プロジェクトを開きます。この時点で、コンソールに次のコマンドを入力します。

npm スタート

次に、プロジェクトはブラウザのアクティブ化を積極的に支援します。http://localhost:3000/アドレスをクリックすると、回転する React アイコンが表示され、プロジェクトがインストールされます。

 

2 必ず使用されるサードパーティライブラリ

プロジェクトのインストールが完了したら、プロジェクトの開発が開始されます。ことわざにあるように、労働者が仕事をうまくやり遂げたいなら、まず自分のエネルギーを研ぎ澄まさなければなりません。プロジェクト開発の前に、フロントエンド プロジェクト開発で必ず使用されるいくつかのことについて話しましょう。サードパーティのライブラリ 。これらのサードパーティ ライブラリを使用すると、開発に役立ちます。もっと効率的。

2.1 js-ツール-ビッグボックス

まず、js-tool-big-box の学習用アドレスにアクセスし、ここをクリックしてください。js-tool-big-box ツール ライブラリの学習アドレス

js-tool-big-box はフロントエンド開発プロジェクトにほぼ必須の npm ライブラリであり、機能が豊富で使いやすく、フロントエンド開発を非常に効率化します。現在の機能には以下が含まれますが、これらに限定されません。

2.1.1 日時クラス

1. 時刻と日付の変換。
2. より柔軟な時刻形式。
3. よりパーソナライズされた時間取得。
4. ある時点から現在までの期間（より詳細な返品情報）
5. 通常の年か閏年かを判断します。
6. 月は何日ありますか。
7. 黄道十二宮。
8. 年間の法定休日。
9. 世界中の主要都市の時刻を取得します。

2.1.2 Webストアクラス

1. URLのパラメータ値を取得する
2. クッキーを設定します。
3. クッキーを取得します。
4. Cookie を削除します。
5. localStorage を設定します。
6. ローカルストレージを取得する

2.1.3 イベントクラス

1. 手ぶれ補正
2. スロットル

2.1.4 数値クラス

1. 千の場合はカンマで区切ります。
2. 0 より大きいかどうかを判断します。
3. 整数が 0 より大きいかどうかを判断します。
4. 指定された範囲内の乱数を生成します。
5. 指定された桁数の乱数を生成します。
6. 数字を小文字の中国語に変換します。
7. 数字を大文字の中国語に変換します。

2.1.5 文字列クラス

1. 文字列を逆にします。
2. 横崗と小さなこぶ
3. 横崗は大きなこぶに変わります。
4. バージョン番号の比較。
5. 文字列のバイト長を取得します。
6. uuid を生成します。
7. ID番号に基づいて性別、年齢、生年月日を取得します。
8. 重要な情報を隠すには、文字列の途中に特殊記号を追加します。
9. 文字列の大文字と小文字の変換。

2.1.6 定期検証授業

1. 電子メール形式の検証。
2. 携帯電話番号形式の検証。
3. URL 形式の検証。
4. ID 番号形式の検証。
5. IP アドレス形式の検証。
6. 郵便番号形式の検証。

7. それが Unicode 文字であるかどうかを判断します。

8. パスワード強度値を検出します。

2.1.7 ajaxクラス

1. jsonp リクエストを送信します。
2. ファイルの純粋に機能するバージョンをダウンロードします。
3. ファイルのダウンロード、フェッチ + ダウンロード機能のバージョン;

2.1.8 データ データクラス

1. 配列からランダムな数の値を取得します。
2. テキストをクリップボードにコピーします。
3. アレイの重複排除。
4. より詳細なデータ型を取得します。
5. 数値配列のソート (順方向および逆順)。
6. オブジェクト配列のソート (順方向および逆順)

2.1.9 ブラウザ ブラウザクラス

1. 現在のブラウザがモバイルかどうかを確認します。
2. 要素が表示範囲内にあるかどうかを判断します。

3. 現在のブラウザが上または下にスクロールするかどうかを取得し、上と下からの現在の距離を取得します。

4. 全画面表示をオンまたはオフにします。

5. ブラウザの userAgent と詳細情報を取得します。

2.2 以下または Sass プリプロセッサ

CSS を記述する従来の方法は、比較的ローエンドです。less や sass などのプリプロセッサを使用すると、CSS 開発をより効率的に行うことができるため、強くお勧めします。

研究資料(Less クイック スタート | Less.js 中国語ドキュメント - Less 中国語 Web サイト (bootcss.com))

2.3 axiosリクエストライブラリ

通常、プロジェクトにはサーバーとの対話が含まれますが、現時点では axios を使用してリクエストを送信できます。

axios 学習ドキュメント(axios 中国語ドキュメント | axios 中国語 Web サイト | axios-js.com)

2.4 UIライブラリ

React の場合、C サイド開発の場合は、比較的軽量の UI ライブラリを手書きできることが望まれますが、B サイド開発の場合は、Ant Design をお勧めします。

Ant デザイン学習ドキュメント(Ant Design - エンタープライズ グレードの UI 設計言語と React コンポーネント ライブラリ)