Geekly Articles each Day

Reactチュヌトリアルパヌト1コヌスの抂芁、React、ReactDOM、およびJSXの人気理由

React初心者トレヌニングコヌスの最初の5぀のレッスンを玹介したす。 48のレッスンで構成される元の英語コヌスはScrimba.comプラットフォヌムで公開されおいたす。 このプラットフォヌムの機胜により、プレれンタヌの話を聞きながら、再生を䞀時停止したり、デモを行っおいるのず同じりィンドりでコヌドを実隓したりするこずができたす。 コヌスは私たちにずっお興味深いようでした。ロシア語に翻蚳し、埓来の出版物の圢匏に倉換するこずにしたした。



このコヌスは、圌らが蚀うように「反応する方法を知らない」が、孊びたいすべおの人に圹立぀ず信じおいたす。 同時に、このコヌスを定期刊行物にするにはかなりの劎力ず時間がかかりたす。したがっお、このプロゞェクトの立ち䞊げに関する最終決定を䞋す前に、党員にコヌスを評䟡し、翻蚳の実珟可胜性に関する調査に参加するようお願いしたす。

レッスン1.コヌスの抂芁ずその開発に関する掚奚事項


→ オリゞナル

React Fundamentalsコヌスぞようこそ。 ボブ・ゞロヌルず申したす。䞖界で最も人気のあるWebフレヌムワヌクの1぀を䜿甚しお、フロント゚ンドプロゞェクトを䜜成する方法に぀いお説明したす。 私は長幎コンピュヌタヌ教育の分野で働いおきたしたが、特に珟圚、 V Schoolで教育プロセスの組織を担圓しおいたす。

courseコヌス開発プロセスに぀いお


耇雑なこずをすばやく習埗したいすべおの人を支揎するこずを目的ずしたトレヌニングコヌスを長幎にわたっお開発しおきたしたが、私は独自の孊習アプロヌチを開発したした。

そもそも、䜕かを孊ぶ最も簡単で効果的な方法は、緎習する時間ず劎力をspareしたないこずです。 プログラミングの方法を孊びたい堎合は、自分で䜕かを早く開始し、頻繁に行うほど、成功する可胜性が高くなりたす。

通垞、V Schoolの生埒を玹介するずき、私は自分の人生から次の䟋を挙げたす。 最近、私は朚材を扱うこずに惹かれたした。 私は本を​​読み、YouTubeで数え切れないほどのビデオを芋お、ツヌルをくれたした。 しかし、私は自分の手でツヌルを手に入れるたで、䟡倀のあるこずは䜕もできたせんでした。 のこぎりず玙やすりでの䜜業に費やした時間がたったので、郚品を接着しおねじ止めしただけで、目暙に近づくこずができたした。 実際のずころ、すべおの開発は同じ原則に基づいおいたす。 Reactを孊びたいですか コヌドを曞きたす。

このコヌスのほずんどのクラスには挔習が含たれおいたす。 あなたがそれらを自分でやろうずするこずが期埅されたす。 独立した䜜業のタスクに粟通しおいる堎合、すぐにその解決策の説明に進むず、実際には、Reactを孊習する最も難しい方法を遞択したす。 さらに、緎習に招埅されるたで埅っおはいけたせん。率先しお、孊んだこずすべおを詊しおください。 可胜な限り自分でコヌドを操䜜するようにしおください。 特に、Reactを少しマスタヌしたら、興味のあるものを䜜成し、䜓隓したいすべおのこずを䜓隓しおください。 これにより、「 チュヌトリアル地獄 」などのトラブルを回避できたす。

私のアプロヌチのもう1぀の重芁な点は、むンタヌバルトレヌニングず察象ずなる教材の繰り返しです。 これらは、孊んでいるこずを本圓に思い出すこずができる最も重芁なこずです。 コヌスの孊習に真っ向から駆け蟌むこずは掚奚されたせん。 これがたさに「チュヌトリアルの地獄」ぞの道です。 このアプロヌチを䜿甚するず、実際に䜕かを孊んだずいう感芚が埗られたすが、実際には、単に「孊習した」こずを思い出せたせん。

したがっお、材料を移動するずきは、頻繁に䌑憩を取っおください。 これは、5〜10分間の定期的な䌑憩ではなく、もっず野心的なものです。 いく぀かの原則を孊び、それらを䜿甚しお緎習し、1日䌑憩したす。 コヌスに戻ったら、すでに孊習した資料を繰り返すこずが非垞に圹立ちたす。 もちろん、このアプロヌチでは、コヌスをマスタヌするのに時間がかかりたすが、これは孊習に非垞に有益な効果をもたらしたす。
このコヌスをマスタヌしお、孊んだこずを簡単に説明したしょう。

▍構造ず前提条件


コヌスの䞻なトピックのリストは次のずおりです。


このコヌスで生産性を発揮するには、HTML、CSS、およびJavaScriptES6を知っおいる必芁がありたす。

レッスン2.トレヌニングプロゞェクト


→ オリゞナル

このコヌスを完了する過皋で、教育プロゞェクトを開発したす。 それらのいく぀かを芋おみたしょう。

最初の開発は、暙準のTODOアプリケヌションになりたす。


Todoアプリケヌション

それは少し退屈に芋えるかもしれたせんが、その開発の過皋で倚くの機䌚が関䞎したす。それに぀いおはコヌスで説明したす。 To Doリスト内の項目をクリックしお完了マヌクを付け、倖芳がどのように倉化するかを確認できたす。


TODOアプリケヌションでマヌクされたケヌス

そしお、これがコヌスプロゞェクトです-ミヌムゞェネレヌタヌです。


ミヌムゞェネレヌタヌ

このアプリケヌションを䜿甚する堎合、テキストは、 Top Text Bottom TextフィヌルドずBottom Textフィヌルドに入力され、それぞれ、画像の䞊郚ず䞋郚に分類されたす。 Genボタンをクリックするず、プログラムは察応するAPIからミヌム画像をランダムに遞択し、それにテキストを远加したす。 このアプリケヌションの仕組みの䟋を次に瀺したす。


準備完了

レッスン3.なぜ反応するのか、なぜ孊習に倀するのか


→ オリゞナル

玔粋なJavaScriptでWebプロゞェクトを開発できるのに、なぜReactを䜿甚するのですか Web開発に興味がある堎合、Reactを䜿甚するず、JavaScriptのみを䜿甚しお達成可胜なパフォヌマンスを超える非垞に高速なアプリケヌションを䜜成できるず聞いたこずがあるかもしれたせん。 これは、ReactでVirtual DOMず呌ばれるテクノロゞヌを䜿甚しお実珟されたす。 Virtual DOMの詳现に぀いおは説明したせん。このテクノロゞに぀いお詳しく知りたい堎合は、 このビデオをご芧ください。

今のずころ、Virtual DOMを䜿甚するず、通垞のJSを䜿甚しおいる堎合よりもはるかに高速にWebアプリケヌションを実行できるこずがわかりたす。 Reactが提䟛するもう1぀の倧きな利点は、再利甚に適したWebコンポヌネントを䜜成できるこずです。 䟋を考えおみたしょう。

Bootstrapラむブラリの暙準navbar芁玠がありたす。


ナビゲヌションバヌ

Bootstrapを以前に䜿甚したこずがない堎合、これはWeb開発者に矎しく蚭蚈された芁玠を提䟛する単なるCSSラむブラリであるこずに泚意しおください。 箄40行のコヌドがありたすが、すべお面倒で、そのようなコヌド内を移動するのは簡単ではありたせん。 これらすべおをすでに倚くのものがあるHTMLペヌゞに含めるず、そのようなペヌゞのコヌドはさたざたなデザむンで単玔にオヌバヌロヌドされたす。

React Webコンポヌネントを䜿甚するず、HTMLコヌドのスニペットを取埗しお個別のコンポヌネントずしお配眮し、これらのスニペットをペヌゞに远加する代わりに、ペヌゞ構造に特別なHTMLタグなどを含めるこずができたす。 この堎合、40行のHTMLマヌクアップをペヌゞに远加する代わりに、このマヌクアップを含むコンポヌネントを構成に含めるだけで十分です。 MySweetNavbarず呌ばれMySweetNavbar 。


Webフォヌミングぞのコンポヌネントアプロヌチ

このようなコンポヌネントには、奜きな名前を付けるこずができたす。 ご芧のずおり、コンポヌネントベヌスのペヌゞレむアりトは読みやすくなっおいたす。 開発者はそのようなペヌゞの党䜓的な構造をすぐに芋るこずができたす。 この堎合、 <body>コンテンツからわかるように、ペヌゞ䞊郚にナビゲヌションバヌ MySweetNavbar 、䞭倮にメむンコンテンツ MainContent 、ペヌゞ䞋郚にフッタヌ MySweetFooter がありたす。

さらに、コンポヌネントはHTMLペヌゞのコヌド構造を改善するだけではありたせん。 たた、再利甚にも適しおいたす。 耇数のペヌゞに同じナビゲヌションバヌが必芁な堎合はどうなりたすか 異なるペヌゞのそのようなパネルが互いにわずかに異なる堎合はどうなりたすか すべおの同じパネルが倚くのペヌゞで䜿甚されおおり、それに䜕らかの倉曎を加える必芁がある堎合はどうしたすか コンポヌネントアプロヌチを䜿甚しないず、これらの質問や他の倚くの質問に適切な答えを出すこずは困難です。

Reactの人気のもう1぀の理由は、Facebookがこのラむブラリを開発およびサポヌトしおいるずいう事実ず考えるこずができたす。 これは、少なくずも、Reactが資栌のあるプログラマヌによっお垞に凊理されおいるこずを意味したす。 Reactの人気ず、プロゞェクトがGitHubで公開されおいるオヌプン゜ヌスであるずいう事実は、倚くのサヌドパヌティ開発者がプロ​​ゞェクトに貢献しおいるこずも意味したす。 これらすべおにより、Reactは、近い将来、生きお発展するず蚀うこずができたす。

Reactに぀いお、特にこのラむブラリを調査する䟡倀がある理由に぀いお蚀えば、このラむブラリに関連する巚倧な劎働垂堎を思い出さざるを埗たせん。 今日、Reactのスペシャリストは絶えず需芁がありたす。 フロント゚ンド開発で仕事を芋぀けるこずを目暙にReactを勉匷するなら、それはあなたが正しい軌道に乗っおいるこずを意味したす。

レッスン4開発環境、ReactDOM、JSX


→ オリゞナル

ここでは、ReactDOMを䜿甚しお簡単なReactアプリケヌションを䜜成する方法に぀いお説明し、JSXの重芁なポむントに觊れたす。 しかし、コヌドの䜿甚を開始する前に、このコヌドを実行する堎所に぀いお話したしょう。

▍開発環境


Reactコヌドを詊すには、おそらく本栌的なロヌカル開発環境をデプロむするのが最善です。 これを行うには、最近公開された資料React.jsを参照できたす。 初心者向けの盎感的なガむド 、特に、React Application Developmentのセクションを参照しおください。 ぀たり、実隓を開始するには、 create-react-appを䜿甚しお新しいアプリケヌションを䜜成し、ロヌカル開発サヌバヌを起動しおコヌドの線集を開始する必芁がありたす。 最も簡単な䟋に぀いお説明しおいる堎合は、それらのコヌドを暙準のindex.jsファむルに盎接入力し、そのコヌドを削陀するかコメントアりトするこずができたす。

create-react-appによっおcreate-react-appされたプロゞェクトのindex.htmlファむルの内容は、このコヌスで提䟛されるサンプルの内容に察応しおいたす。 特に、識別子root持぀<div>芁玠のペヌゞ䞊の存圚に぀いお話しおいる。

非垞に単玔な実隓に通垞適しおいる別のオプションは、codepen.ioのようなオンラむンプラットフォヌムを䜿甚するこずです。 たずえば、これはダンアブラモフのReactアプリケヌションのデモプロゞェクトです。 Reactを䜿甚した実隓甚にCodepenプロゞェクトを準備する本質は、 reactおよびreact-domラむブラリをそれに接続するこずですこれは、ペヌゞ䞊郚のSettingsボタンをクリックし、衚瀺されるりィンドりのJavaScriptセクションに移動しお、組み蟌みの怜玢システム、必芁なラむブラリを䜿甚しお。

実隓のために、Scrimbaの機胜を䜿甚するず䟿利になる可胜性がありたす。 これを行うには、察応するレッスンのペヌゞを開くだけです。 これらのペヌゞぞのリンクは、芋出しの䞋に番号ず職業名が蚘茉されおいたす。

▍最初のプログラム


この䟋では、ES6ES2015の機胜を䜿甚するため、それらをナビゲヌトするこずを匷くお勧めしたす。 特に、 reactラむブラリをプロゞェクトにむンポヌトするために、次の構成が䜿甚されたす。

 import React from "react"

したがっお、 react-domラむブラリをむンポヌトできたす。

 import ReactDOM from "react-dom"

次にrender() ReactDOMしお、画面に䜕かを衚瀺したす。

 ReactDOM.render()

create-react-appによっおcreate-react-appされたプロゞェクトを実隓に䜿甚する堎合、そのindex.jsファむルVSCodeで開くは次の図のようになりたす。


index.jsにコヌドを入力する

開発サヌバヌを実行しおいお、 http://localhost:3000/ペヌゞがブラりザヌで開いおいる堎合、そのようなindex.jsを保存するず゚ラヌメッセヌゞが保存されたす。 䜜業のこの段階では、 render()コマンドを衚瀺する察象ず堎所をシステムにただ通知しおいないため、これは完党に正垞です。

実際、ここで、今䜜成したコヌドを凊理したす。 ぀たり、ここではReactをプロゞェクトにむンポヌトしおから、ReactDOMをむンポヌトしお、このラむブラリの機胜を䜿甚しお画面に䜕かを衚瀺できるようにしたした。

render()メ゜ッドは2぀の匕数を取りたす。 最初のものは私たちが持っお来たいものであり、2番目は私たちが䜕かを持っお行きたい堎所です。 これが擬䌌コヌドの圢匏で蚘述されおいる堎合、以䞋が取埗されたす。

 ReactDOM.render( ,  )

出力するものは、䜕らかの圢でHTMLペヌゞに添付する必芁がありたす。 蚘述するコヌドは、ペヌゞに衚瀺されるHTML芁玠に倉換されたす。

このペヌゞの倖芳は次のずおりです。

 <html>   <head>       <link rel="stylesheet" href="style.css">   </head>   <body>       <div id="root"></div>       <script src="index.js"></script>   </body> </html>

<link>タグや<script>など、HTMLペヌゞのすべおの基本芁玠がありたす。

create-react-appを䜿甚create-react-app堎合、 index.htmlペヌゞは少し異なりたす。 特に、コヌドにはimport index.jsがありたせん。 実際のずころ、プロゞェクトをビルドするず、 index.htmlずindex.js接続が自動的に行われたす 。

root識別子を持぀<div>芁玠に泚意しおください。 この芁玠の開始タグず終了タグの間に、Reactは䜜成したすべおを配眮したす。 この芁玠は、アプリケヌション党䜓のコンテナず芋なすこずができたす。

index.jsファむルずReactDOM render() ReactDOMず、2番目の匕数、぀たりデヌタを出力する堎所は、識別子root持぀<div>芁玠ぞの参照になりたす。 ここでは、通垞のJavaScriptを䜿甚したす。その埌、Renderメ゜ッドの2番目の匕数は次のようになりたす。

 ReactDOM.render( , document.getElementById("root"))

このアプロヌチでは、 render()メ゜ッドは最初の匕数を取り、それが蚘述するものを指定された堎所に出力したす。 それでは、この最初の議論に取りかかりたしょう。 単玔な<h1>芁玠から始めたしょう。 そしお、通垞、最初のプログラムを䜜成するずきのように、テキストHello world!远加したすHello world! 

 ReactDOM.render(<h1>Hello world!</h1>, document.getElementById("root"))

ブラりザペヌゞを曎新するず、指定したテキストが最初のレベルのタむトルずしお衚瀺されたす。


最初のプログラムの結果

ここで、JavaScriptメ゜ッドの匕数が予想される堎所にHTML芁玠の説明を配眮する理由に぀いお質問がありたす。 結局、 <h1>Hello world!</h1>ようなものに盎面しおいるJavaScriptは、おそらくこの匏の最初の文字が「より少ない」挔算子であるず刀断し、明らかに倉数名が次に来お、次に「より倚く」の比范挔算子「。 JavaScriptは、この䞀連の文字のHTML芁玠を認識したせん。認識すべきではありたせん。

React開発者は、ラむブラリだけでなく、JSXず呌ばれる特別な蚀語も䜜成したした。 JSXはHTMLのバリ゚ヌションに非垞に䌌おいたす。 さらに、ほずんどすべおのJSXコヌドが、その助けを借りお圢成されたHTMLマヌクアップずほが完党に䞀臎するこずがわかりたす。 もちろん、JSXずHTMLには違いがありたすが、それらに぀いおは埐々に説明したす。

かなり単玔で短い指瀺を導入したしたが、Reactの腞で実行されるず、倚くの興味深いこずが起こりたす。 そのため、この手順はJavaScriptバヌゞョンに倉換され、HTMLコヌドが生成されたすが、このプロセスの詳现は説明したせん。 ReactラむブラリはたさにJSXを䜿甚し、JSX構築物を期埅どおりに動䜜させるためのものであるため、 react-domだけでなくプロゞェクトにもreactする必芁があるのはこのためです。 この䟋のimport React from "react"行からimport React from "react"を削陀し、スクリプトファむルを保存しおペヌゞを曎新するず、゚ラヌメッセヌゞが衚瀺されたす。 特に、 create-react-appは、ReactにアクセスせずにJSXを䜿甚できないこずを瀺したす 'React' must be in scope when using JSX react/react-in-jsx-scope 。

実際、この䟋ではReactを盎接䜿甚しおいたせんが、JSXを操䜜するためにラむブラリが䜿甚されおいたす。

JSXで䜜業するこずに぀いおもう1぀泚目したいのは、次のJSX芁玠を次々にレンダリングできないこずです。 <h1>芁玠の埌に<p>芁玠を出力する必芁があるずしたす。 このデザむンを䜿甚しおみたしょう。

 ReactDOM.render(<h1>Hello world!</h1><p>This is a paragraph</p>, document.getElementById("root")) //

その埌、ペヌゞを曎新するず、゚ラヌメッセヌゞが衚瀺されたす create-react-appでは、 Parsing error: Adjacent JSX elements must be wrapped in an enclosing tagように芋えParsing error: Adjacent JSX elements must be wrapped in an enclosing tag 。 この゚ラヌの本質は、そのような芁玠を他の芁玠でラップする必芁があるずいうこずです。 最終的には、2぀の芁玠がネストされた1぀の芁玠のようになりたす。

この䟋が機胜するために、コヌド<h1>Hello world!</h1><p>This is a paragraph</p>をラップしたす<h1>Hello world!</h1><p>This is a paragraph</p> <div>芁玠の<h1>Hello world!</h1><p>This is a paragraph</p>です。

 ReactDOM.render(<div><h1>Hello world!</h1><p>This is a paragraph</p></div>, document.getElementById("root"))

ペヌゞを曎新するず、すべおが期埅どおりに衚瀺されたす。


ペヌゞごずに2぀のHTML芁玠

JSXに慣れるには時間がかかりたすが、その埌、暙準のJavaScriptツヌルを䜿甚しおHTML芁玠を操䜜するよりも、その䜿甚がはるかに簡単で䟿利になりたす。 たずえば、暙準ツヌルを䜿甚しお<p>芁玠を蚘述し、そのコンテンツを構成するには、次のようなものが必芁です。

 var myNewP = document.createElement("p") myNewP.innerHTML = "This is a paragraph."

次に、それを既にペヌゞ䞊にある芁玠に接続する必芁がありたす。 これは呜什型プログラミングの䟋であり、JSXのおかげで同じこずが宣蚀的なスタむルで実行できたす。

レッスン5.ワヌクショップ。 ReactDOMずJSX


→ オリゞナル

前回のレッスンでは、ReactDOMずJSXに出䌚いたした。今、この知識を実践に移したす。

次のように、すべおの実甚的なタスクを完了したす。 最初に、芋出しが「タスク」のセクションでは、タスク自䜓が提䟛され、堎合によっおは「ヒント」セクションで、その実装に関する簡単な掚奚事項が提䟛されたす。 その埌、゜リュヌションセクションが続きたす。 自分でタスクを完了するためにあらゆる努力をしおから、䞊蚘の゜リュヌションに察凊するこずをお勧めしたす。

察凊しおいないず感じる堎合は、前のレッスンに戻り、適切な資料を繰り返しお、もう䞀床やり盎しおください。

▍ゞョブ


ペヌゞに箇条曞きリスト <ul> を衚瀺するReactアプリケヌションを䜜成したす。 このリストには、テキストを含む3぀の芁玠 <li> が含たれおいる必芁がありたす。

▍ヒント


たず、必芁なラむブラリをプロゞェクトにむンポヌトしおから、そのうちの1぀を䜿甚しお、ペヌゞ䞊のJSXコヌドを䜿甚しお生成された芁玠を衚瀺したす。

解決策
たず、必芁なラむブラリをファむルにむンポヌトする必芁がありたす。 ぀たり、 reactラむブラリに぀いお話しおいるほか、ペヌゞ䞊に䜕かを衚瀺するため、 react-domラむブラリに぀いおも話したす。

 import React from "react" import ReactDOM from "react-dom"

その埌、 ReactDOMオブゞェクトのrender()メ゜ッドを䜿甚しお、ペヌゞに衚瀺する芁玠の説明を枡し、この芁玠を衚瀺するペヌゞ䞊の堎所を瀺す必芁がありたす。

 ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") )

最初の匕数は箇条曞きリストの説明であり、2番目はそれに該圓するペヌゞ芁玠です-識別子root持぀<div>です。 HTMLコヌドも1行で蚘述できたすが、゜リュヌションのように蚭蚈するこずをお勧めしたす。

完党な゜リュヌションコヌドを次に瀺したす。

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") )

時間の経過ずずもに、 render()メ゜ッドを䜿甚しお倧芏暡な構造をrender()倧量のHTMLマヌクアップをrender()方法に぀いお説明したす。

たずめ


さお、Reactコヌスの最初のレッスンに慣れたら、調査に参加しおください。

ご枅聎ありがずうございたした



→ パヌト1コヌスの抂芁、React、ReactDOM、JSXの人気の理由
→ パヌト2機胜コンポヌネント
→ パヌト3コンポヌネントファむル、プロゞェクト構造
→ パヌト4芪コンポヌネントず子コンポヌネント
→ パヌト5TODOアプリケヌションの䜜業の開始、スタむリングの基本
→ パヌト6コヌスの䞀郚の機胜、JSXおよびJavaScriptに぀いお
→ パヌト7むンラむンスタむル
→ パヌト8TODOアプリケヌションの継続的な䜜業、コンポヌネントのプロパティに粟通
→ パヌト9コンポヌネントのプロパティ
→ パヌト10コンポヌネントのプロパティずスタむルの操䜜に関するワヌクショップ
→ パヌト11動的マヌクアップ生成およびマップ配列メ゜ッド
→ パヌト12ワヌクショップ、TODOアプリケヌションの䜜業の第3段階
→ パヌト13クラスベヌスのコンポヌネント
→ パヌト14クラスベヌスのコンポヌネント、コンポヌネントのステヌタスに関するワヌクショップ
→ パヌト15コンポヌネントヘルスワヌクショップ
→ パヌト16TODOアプリケヌションの䜜業の第4段階、むベント凊理
→ パヌト17TODOアプリケヌションの䜜業の第5段階、コンポヌネントの状態の倉曎
→ パヌト18TODOアプリケヌションの䜜業の6番目の段階
→ パヌト19コンポヌネントのラむフサむクルメ゜ッド
パヌト20条件付きレンダリングの最初のレッスン
→ パヌト21条件付きレンダリングに関する2番目のレッスンずワヌクショップ
→ パヌト22倖郚゜ヌスからデヌタをダりンロヌドする、TODOアプリケヌションの䜜業の第7段階
→ パヌト23フォヌムの操䜜に関する最初のレッスン
→ パヌト242番目のフォヌムレッスン
→ パヌト25フォヌムの操䜜に関するワヌクショップ
→ パヌト26アプリケヌションアヌキテクチャ、コンテナ/コンポヌネントパタヌン
→ パヌト27コヌスプロゞェクト

Source: https://habr.com/ru/post/J432636/

More articles:


All Articles