React Family Bucket を使用してバックエンド管理システムを構築する方法

今回は、React Family Bucket のバックエンド管理システムを構築する方法と、React Family Bucket のバックエンド管理システムを構築するための注意事項について説明します。実際の事例を見てみましょう。

はじめに

学生の頃は、一定の知識を習得するために演習やまとめを繰り返していましたが、それは社会に出ても同じではないでしょうか。ビジネスは演習と同じで、授業後に適切にまとめれば確実にレベルアップが早くなります。 同社は、react+node テクノロジースタックを採用しているため、小規模な ReactSPA プロジェクトを完成させました。将来的には、日常業務で遭遇したビジネスや研究で遭遇した興味深い事柄をデモに抽象化して表示する予定です。現時点ではこのプロジェクトは単なるプロトタイプであり、結果は次のとおりです。この記事をベースに、React Family Bucket を使用してバックエンド管理システムを構築する新しい記事を書きました。 （注：プロジェクトは随時更新されるため、記事がすぐに更新されない可能性がありますので、実際のプロジェクトが優先されます）

実際、このインターフェイス スタイルはバックエンド管理システム インターフェイスとして使用できるだけでなく、プロジェクトを表示できる美しいブログに変更することもできます。プロジェクトのアドレスはこちらです（ローカルでの実行がベターです） 良い意見がありましたら、Issue または PR を送信してください。

プロジェクトの初期構造と構造的理由は上記に記載されています。ts は時間の経過とともに導入されるため、プロジェクト構造は必然的に変更されますが、この基本プロトタイプに基づいて拡張されることは間違いありません。

ディレクトリ構造は以下で説明します

1. プロジェクトは最初に create-react-app で初期化されました。これは Facebook が公式に提供する React Scaffolding であり、業界で最高の React アプリケーション開発ツールの 1 つです。やがて People's log ミドルウェアをインポートできるようになります。など;

2. コンテナとコンポーネントの違いは、ホームページのスタイルに関連するコンポーネントがコンテナに配置されている限り、関数に関連するモジュール (私が実装したテーブル コンポーネントなど) を格納することです。ポップアップ 入力ボックス グループ

   など) はコンポーネント

3. に配置する必要があります。一部の一般的なフロントエンド構成は、呼び出し時に参照する必要がないように、グローバル (ブラウザー) に保存するのが最適です。これは便利です

ajax モジュールを自分で実装する必要がある理由は、クロスドメイン cors やその他の要件が必要な場合、複数の Ajax リクエストをカスタマイズする必要があるためです (fetch が使用されている場合、fetch は今後ますます強力になります)

5. テクノロジースタック関連

使用されている技術スタックはたくさんありますが、私はそれらのほとんどを API を確認しながら使用するため、関連する技術スタックを使用して解決したいくつかの点のみをリストします。

webpack(2.6)

①ロードオンデマンド:

babel-plugin-import は、コンポーネント コードとスタイルをオンデマンドでロードするための Babel プラグイン (原則) です。config/webpack.config.dev.js ファイルに次の変更を加えます。 ②魅力が少ない:

まず、less-loader を導入して、less スタイルをロードし、ファイルを変更します

{
 test: /\.(js|jsx)$/,
 include: paths.appSrc,
 loader: 'babel',
 query: {
   plugins: [
    ['import', [{ libraryName: "antd", style: 'css' }]],
   ],
  cacheDirectory: true
 }
},

ここでは、テーマの設定に Less-loader のmodifyVarsを使用します。変数やその他の設定方法については、「テーマの設定」ドキュメントを参照してください。

③ワンクリックでgh-pagesに公開:

gh-pages を使用する場合は、npm rundeploy を使用して、ワンクリックで独自の gh-pages を公開します。そのため、

ファイルを変更するときは、config/webpack.config.prod も変更する必要があります。 js まったく同じ変更を加えます。

config/webpack.config.dev.js ps: このようにしてgh-pagesに投稿しましたが、gh-pagesで表示されるプロジェクトのアドレスは明らかにローカルのものより数ピクセル大きいです。理由をご存知の方は教えてください。遠慮なく教えてください。

④参照パスの略称：

loaders: [
 {
  exclude: [
   /\.html$/,
   /\.(js|jsx)$/,
+   /\.less$/,
   /\.css$/,
   /\.json$/,
   /\.svg$/
  ],
  loader: 'url',
 },
...
 // Process JS with Babel.
 {
  test: /\.(js|jsx)$/,
  include: paths.appSrc,
  loader: 'babel',
  query: {
   plugins: [
-    ['import', [{ libraryName: "antd", style: 'css' }]],
+    ['import', [{ libraryName: "antd", style: true }]], // 加载 less 文件
   ],
  },
...
+ // 解析 less 文件，并加入变量覆盖配置
+ {
+  test: /\.less$/,
+  loader: 'style!css!postcss!less?{modifyVars:{"@primary-color":"#1DA57A"}}'
+ },
]

参照パスの省略形を設定した後、

のようにどこでもこのように引用できます。 config/webpack.config.dev.js

antd(2.10)

antd是（蚂蚁金服体验技术部）经过大量的项目实践和总结，沉淀出的一个中台设计语言 Ant Design，使用者包括蚂蚁金服、阿里巴巴、口碑、美团、滴滴等一系列知名公司，而且我从他们的设计理念也学到了很多关于UI、UX的知识。

该项目采用的是antd最新的版本2.10.0,由于2.x的版本和1.x的版本还是相差蛮大的，之前参考的项目(基于1.x)改起来太费劲，所以在组件那块就干脆自己重新封装了一遍。这部分知识点我建议还是看文档，文档解决不了扒扒源码。

react-router(4.x)

react-router 4.x和2.x的差异又是特别的大，召唤文档,网上基本上都还是2.x的教程，看过文档之后，反正简而言之其就是要让使用者更容易上手。印象最深的是以前嵌套路由写法在4.x中写到同层了。如下示例他们的效果是相同的。

2.x：

<Route path="/" component={App}>
  <Route path="/aaaa" component={AAAA} />
  <Route path="/bbbb" component={BBBB} />
</Route>

4.x:

<Route path="/" component={App} />
<Route path="/aaaa" component={AAAA} />
<Route path="/bbbb" component={BBBB} />

还有更多的特性和API的出现，期待有更好的分析文章的出现，有机会我也会来总结下react-router(4.x)和(2.x)的差异。

fetch

先推荐这篇文章《传统Ajax已死，Fetch永生》，再推荐API;

fetch是个好东西，好在简单，除了promise最基本的用法，还能这样写

fetch(url).then(response => response.json())
 .then(data => console.log(data))
 .catch(e => console.log("Oops, error", e))

try {
 let response = await fetch(url);
 let data = await response.json();
 console.log(data);
} catch(e) {
 console.log("Oops, error", e);
}

但是其简洁的特点是为了让我们可以自定义其扩展，还是其本身就还不完善呢？我在调用JSONP的请求时，发现用fetch掉不同，后来在文档上才发现其不支持JSONP的调用，所幸社区还是很给力的找到了fetch-jsonp这个模块，实现了对百度音乐接口的JSONP调用。fetch-jsonp使用也和fetch类似，代码如下

fetchJsonp(url,{method: 'GET'})
  .then((res) =>res.json())
  .then((data) => {})

redux

使用了redux也已经有段时日了，我对redux的定义就是更好的管理组件的状态，没有redux的时候就像现在这个应用一样，逻辑少状态变化也还不太复杂，但是一旦逻辑复杂起来，各种组件状态、界面耦合起来，就容易出岔子，那redux就是为了解决这个而生的，让我们可以更多地关注UI层，而降低对状态的关注。之前也写了些redux的文章，纸上得来终觉浅，绝知此事要躬行。

--------------------------更新---------------------------

已经在项目中加入了redux技术栈。

项目的一些待扩展计划

封装组件

不管组件封装得好不好，个人感觉其是提高水平很高效的方法，多练，继续封装出各式各样的功能组件。

typescript

公司大概会在6月份开始，新的项目就要采用ts开发了，所以我也到时会在该项目中引人ts的语法，我现在的感觉是使用ts后，前后端对接会更加轻松，不会有一些类型不匹配的低级错误，而且antd貌似和ts也能兼容得蛮好。

测试框架

这部分其实我还是没什么经验的，先写上吧，有机会会拿这个项目开刀，并写心得。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

以上がReact Family Bucket を使用してバックエンド管理システムを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。