これは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