🎻 👨🏻‍🎓 👨‍🔬 Reactトレーニングコース、パート28：React Modern Features、Project Ideas、結論 👋🏿 👰🏾 👩‍👩‍👧‍👧

本日、Reactコースの翻訳の最後の部分で、Reactの最新の機能についてお話しし、Reactアプリケーションのアイデアについて議論します。このコースを受講しながら学んだことを繰り返して、多くを学ぶことができます。

レッスン46.最新のReactアプリケーションの開発

→ オリジナル

Facebookの多くのプログラマーがReactライブラリに取り組んでおり、React周辺の大規模なコミュニティのメンバーがプロジェクトに貢献しています。これはすべて、Reactが非常に迅速に開発されているという事実につながります。たとえば、2019年の初めにReactを勉強し、2年前にこのライブラリの資料を見た場合、それらの資料の発行以降にReactで発生した変更に気づかずにはいられません。たとえば、React 16.3では、いくつかの新しいコンポーネントライフサイクルメソッドが登場し、一部のメソッドは廃止されました。そして、たとえば、React 16.6にはさらに多くの新機能があります。 React 17.0およびこのライブラリの将来のバージョンでは、膨大な数の革新が期待されています。

次に、Reactの最新の機能について説明します。

これらの機能の多くは、Reactプロジェクトの開発に使用されるツールでサポートされているECMAScript仕様のバージョンに依存しています。 Babelトランスポーターを使用する場合、これは最新のJavaScript機能があることを意味します。まだ標準に含まれていないプロジェクトでJavaScript機能を使用する場合、標準に含まれていると変更される可能性があることに注意してください。

Reactアプリケーションの開発時に使用できる最新のJavaScript機能の1つは、矢印関数構文を使用してクラスメソッドを宣言する機能です。

テキストフィールドを表示するAppコンポーネントのコードは次のとおりです。

 import React, {Component} from "react" class App extends Component {   //        constructor() {       super()       this.state = {           firstName: ""       }       this.handleChange = this.handleChange.bind(this)   }     //        handleChange(event) {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App

これは、このアプリケーションのページがブラウザでどのように見えるかです。

ブラウザでのアプリケーション

handleChange()メソッドを矢印関数として書き直し、コンポーネントコードを次の形式にします。

 import React, {Component} from "react" class App extends Component {   //        constructor() {       super()       this.state = {           firstName: ""       }   }     //        handleChange = (event) => {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App

この変換中に、コードに小さな変更が加えられましたが、これらの変更はメソッドの動作に重大な影響を及ぼします。矢印関数のthisは、それらが配置されている字句スコープを示します。これらの関数はthisバインディングをサポートしていません。矢印関数のこの機能は、それらを使用して宣言されたメソッドがクラスコンストラクターでthisにバインドされる必要がないという事実につながります。

ここで検討する別の可能性は、クラスプロパティを使用することです。ここで、コンストラクターで状態を初期化するときに、 this.stateを使用します。そのため、クラスのインスタンスプロパティを作成します。これで、プロパティをコンストラクタの外部で作成できます。その結果、次のようにコードを変換できます。

 import React, {Component} from "react" class App extends Component {   //        state = { firstName: "" }     //        handleChange = (event) => {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App

ここで、対応するプロパティを宣言するときに状態を初期化することでコンストラクターを削除したことに注意してください。すべては、このJS機能が近い将来に標準に含まれることを示しています。

以下は、現在のReact機能のリストです。

コンテキストAPI Reduxの代わりに使用できますが、これはReduxライブラリの関連性が失われたことを意味するものではありません。
エラーの境界。
小道具テンプレートをレンダリングします。
高次コンポーネント。
React Router 。
フック反応。
新しいReact機能16.6 。

一般に、Reactは非常に迅速に開発されているため、Reactの開発に携わるすべての人がこのライブラリのイノベーションを常に監視することをお勧めします。

レッスン47. React Project Ideas

→ オリジナル

Reactの開発中に、私とTodoアプリケーションとミームジェネレーターという2つのプロジェクトを作成しました。 Reactを使用して作成したいものを既に知っている可能性があります。たぶん、あなたはすでにあなた自身のアプリケーションを開発しています。まだ決定しておらず、その実践がコンピューターテクノロジーを学ぶための最良の方法である場合、Reactを使用して作成できるWebアプリケーションのさまざまなアイデアを見つけることができる資料です。

レッスン48.結論

→ オリジナル

おめでとうございます！ React Libraryコースを修了しました。 Reactアプリケーションの基本的な構成要素を理解しました。これを使用して、独自のプロジェクトを作成できます。確かに、Reactを使用して何かを作成する場合は、まだ多くのことを学ぶ必要があるという事実に備えてください。

このコースの開発中に学んだ基本的な概念を見ていきましょう。

JSX。 JSXを使用すると、通常のHTMLコードに非常によく似た構文を使用してユーザーインターフェイスを記述できます。
コンポーネント開発への2つのアプローチ。クラスベースの機能的なコンポーネント。
Reactアプリケーションをスタイルするさまざまな方法。
親コンポーネントから子コンポーネントにプロパティを渡す。
コンポーネントの状態を使用して、データを保存および操作します。
条件付きレンダリング。
Reactでフォームを操作します。

ご清聴ありがとうございました！

親愛なる読者！ このコースの印象を共有し、Reactを使用して開発したい（または既に開発中の）ことを教えてください。

Reactトレーニングコース、パート28：React Modern Features、Project Ideas、結論

レッスン46.最新のReactアプリケーションの開発

レッスン47. React Project Ideas

レッスン48.結論

More articles: