👨🏾‍🎤 📶 🕚 Habrを素早く叩く方法 👽 🌎 🔑

これは2月13日月曜日に起こり、世界は同じではなくなります。空室オープン：

プロジェクトに取り組むために、強力なフロントエンド開発者を探しています。あなたには野心的な仕事があります：会社のすべての現在および新しいプロジェクトの開発にコンポーネントアプローチを導入すること。

お気に入りのサイトを移植してコンポーネントを反応させるプロセスは非常に簡単です。 Chrome DevToolsの[カーソル矢印の付いたボックス]ボタンをクリックし、選択したHTMLブロックをtemp.htmlファイルにコピーし、data-component = "MyReactComponent"というフォームの属性を将来のコンポーネントに追加し、コンソールで起動する必要があります。

$ html2react ./temp.html

./components/になります-既製のJSXスクリプト。

コンポーネントの美しさは何ですか？タスクの分解がより明確になり、人件費をより正確に推定できるため、開発プロセスの管理が容易になります。レイアウトブロックをコンポーネントに分割する方法、つまり1つのコンポーネント上の多くのコード、ある種のインタラクティブな追加機能など、理解が徐々に深まります。主なことは、関与しないことです。最初のタスクは、 Minimum Viable Product（MVP）です。

ああ、何人のベテランのWeb開発者がJavaScriptコード内のHTMLタグから混乱を押し出しましたか。 3年後にアレルギーがなくなり、ES6がやがて到着しました。逆行の悪夢です。しかし、この間、Reactエコシステムは成長し、力を得ました。以前と同様に、人々はReduxなしで生活し、おそらく苦しんでいました。 :)

素晴らしいのはcreate-react-appで、現在の初期段階でノードアプリケーションを構成する必要がなく、余分なものを課す必要がありません。

そして、ここでHabrの最初のページがローカルホストに表示されました：3000は元のものとほとんど区別できません-これは幸福です！

レイアウトにエラーがあり、レガシーブロックがあります。このコードには、慎重な表示と編集が必要です。テンプレート「 https://habrahabr.ru/ 」のリンクを「/＃/」に置き換えました。ほとんどの場合絶対リンクです。 @ font-faceを接続し、プレート「#scroll_to_top」の機能を復元しました。

 //   <a ... onclick="if (typeof ga === 'function') { ga('send', 'event', 'footer', 'links', 'ios_app'); }" > //    <a ... onClick={ga('footer', 'links', 'ios_app')} > //    export const ga = (eventCategory, eventAction, eventLabel) => () => { if (typeof window.ga === 'function') { window.ga('send', 'event', eventCategory, eventAction, eventLabel) } }

initialStateで偽のデータを入力しながらReduxをアクティブにします。すでにストアのフォームから新しい記事を追加できます。地下の「情報」列からのリンクを使用していくつかの静的ページを作成しました。ルーティングはかなりうまくいきますが、「ヘルプ」セクションでパンくずを実装する必要があります。「react-helmet」を使用して、cssファイルの接続を見ました（404ページの装飾が異なるため）。「reselect」（コンポーネントの例/ PostTeaserList.js-フローによるフィルター）、「redux-act」（レデューサーの例/ editPost.js）を使用します。副作用を処理するために、「redux-thunk」を接続しました。「styled-components」を使用してインラインスタイルを追加します（components / InfoHelpPost.jsの例）。

一般的なルールは詳細にこだわることではありません。タスクが15分で解決しない場合、または単に気が散る場合は、TODOとマークしてそれを延期します。時間の85％がマイナーな改善に費やされていると考えられています。スケルトンを迅速に成長させ、肉を構築することが重要です。これは、反復的な継続的統合の次のステップです。

PS

古いWebアプリケーションをすぐに再生成する必要がある場合は、流行のコンポーネントアプローチ（こんにちは、Delphi'95＆Rapid Application Development）を試してください。

Leonid Arkadievich、この機会を利用して、Mail.ruとFast Line Venturesにも挨拶を送ります。成功する外国プロジェクトの「適応」を簡素化します。ちなみに、インディー開発者にとって、これは小さなろうそく工場を上げる方法です。技術仕様、設計、レイアウトを節約します。アイデアは価値がないことを覚えていますか？実装もコスト削減の傾向があります。

チームがレイアウトと開発者に分かれている場合、反応したコンポーネントにレイアウトを転送する方法は、現在のReactプロジェクトに完全に適用できます。

新しいテクノロジー（Reactなど）を学習する場合、必要なテクノロジーを使用して既存のプロジェクトをコピーするのが最良のトレーニング方法です。少なくともGitHubのポートフォリオについては。プロジェクトのソースはここで更新されます。

デモ： yobr.ru

Habrを素早く叩く方法

PS

入門ビデオチュートリアル

More articles: