Mediumで関連記事のレコードを反応させる
React Related Record Medium
1.1。 この単一のMedium記事に詰め込まれたすべての基本的なReact.jsの概念
この単純なMediumの記事には、react.jsのすべての基本概念が含まれています（次のコードはオリジナルから抜粋したものです。詳細についてはオリジナルをお読みください）
基本概念＃1：Reactはすべてコンポーネントに関するものです
Reactは、再利用可能なコンポーネントの概念に基づいて設計されています。ウィジェットを定義してから、それらを組み合わせてより大きなコンポーネントにすることができます。すべての大小のコンポーネントは、異なるプロジェクトでも再利用できます。反応コンポーネント（最も単純な形式）は、プレーンなjavascript関数（プレーンな古いjavaScript関数）です。
// example 1 // https://jscomplete.com/repl?j=Sy3QAdKHW function Button (props){ //Such as:return a dom element return 例1については次の点に注意してください。
- コンポーネントの名前は大文字で始まります。この要件は、HTML要素とReact要素を混合するときにそれらを区別することです。
- 各コンポーネントは、HTML要素と同様に、プロパティのリストを持つことができます。反応では、このリストの名前は小道具と呼ばれます。
- 上記のButtonコンポーネントの戻り出力値は、HTMLの形式のように見えることがわかります。それはjavaSCriptでもHTMLでもありませんし、react.jsでもありません。ただし、これは非常に人気があり、reactアプリケーションのデフォルト設定になっています。これはJSXと呼ばれ、javascriptの拡張です。
基本コンセプト＃2：JSXの変更点（フラックスとはJSX）
JSX構文を使用しない例1を次に示します。
// Example 2 - // https://jscomplete.com/repl?j=HyiEwoYB- function Button (props) { return React.createElement( 'button', { type: 'submit' }, props.label ) } // ReactDOM.render( React.createElement(Button, { label: 'Save' }), mountNode ) Copy codecreateElementはreactのAPIであり、creactElementは実際にツリーを作成しています。
// example 3 // https://jscomplete.com/repl?j=r1GNoiFBb const InputForm = React.createElement( 'form', { target: '_blank', action: 'https://google.com/search' }, React.createElement('div', null, 'Enter input and click Search'), React.createElement('input', { name: 'q', className: 'input' }), React.createElement(Button, { label: 'Search' }) ) // InputForm function Button (props) { return React.createElement( 'button', { type: 'submit' }, props.label ) } // ReactDOM.render(InputForm, mountNode) Copy code次の点に注意してください：
InputForm反応成分ではなく、反応要素です。これが私たちがいる理由ですReactDOM.render直接使用されたが、使用されていないフォームReact.createElementこの関数は、最初の2番目のパラメーターの後に複数のパラメーターを受け入れます。 3番目のパラメータリストから始めて、子要素の作成を含めることです- 要素が属性や小道具を必要としない場合、
React.createElement2番目の引数はnullまたは空のオブジェクトにすることができます - HTML要素とReact要素を混在させることができます。
- React APIは、DOMAPIにできるだけ近づけようとします
私たちはHTMLフォームの表示や記述に慣れているため、HTMLに似た構文を使用します。 JSX
// Example 4 - JSX (compared with example 3) // https://jscomplete.com/repl?j=SJWy3otHW const InputForm = 次の点に注意してください：
- これはHTMLではありません。ここのように
className代わりにclass - 上記の一見HTMLフォームをjavascriptと見なすと、最後にセミコロンが追加されていることがわかります。
上記の例4はJSXであり、ブラウザーにはコンパイル済みバージョン3と同等のものが表示されます。したがって、JSXバージョンをReact.createElementに変換するプリプロセッサーが必要です。
ちなみに、JSXは単独で使用できます。Reactのみではありません。
基本概念＃3：JSXのどこでもjavaScipt式を使用できます
JSXでは、中括弧のペアで囲まれた任意のjavaScript式を使用できます。
// Example 5 // https://jscomplete.com/repl?j=SkNN3oYSW const RandomValue = () => { Math.floor(Math.random() * 100) } // ReactDOM.render(, mountNode) Copy codejavaScript ${}のテンプレート構文と同様に、中括弧でjavaScript式を記述します。
JSXの唯一の制約は次のとおりです。式のみにすることができます。したがって、通常のifステートメントを使用することはできません。3値式を使用する必要があります。 javaScript変数（変数）も式であるため、コンポーネントが受け取る小道具を配置する必要があります。中括弧内
javaScriptオブジェクトも式です。中括弧内でjavaScriptオブジェクトを使用することもあります。これにより、中括弧のように見えますが、実際には中括弧で記述されたオブジェクトです。例として、ReactでCSSスタイルオブジェクトをstyle属性に渡します。
// column 6 // https://jscomplete.com/repl?j=S1Kw2sFHb const ErrorDisplay = ({message}) => 'red', backgroundColor: 'yellow' } }> {message} ReactDOM.render( 'These aren't the droids you're looking for' />, mountNode ) Copy codeReact要素は、これも式であるため、jSXでも使用できます。 React要素は本質的に関数呼び出しであることを忘れないでください
// Example 7 - Using the react element in {} // https://jscomplete.com/repl?j=SkTLpjYr- const MaybeError = ({errorMessage}) => {errorMessage && } const ErrorDisplay = ({message}) => 'red', backgroundColor: 'yellow' } }> {message} ReactDOM.render( 0.5 ? 'Not good' : ''} />, mountNode ) Copy codeまた、JavaScriptのコレクションメソッド（map、reduce、filter、concatなど）は式を返すため、JSXで使用することもできます。
// Example 8 - Using an array map on {} // https://jscomplete.com/repl?j=SJ29aiYH- const Doubler = ({value=[1, 2, 3]}) => {value.map(e => e * 2)} ReactDOM.render(, mountNode) Copy code基本概念＃4：クラスでReactコンポーネントを書くことができます
// Example 9 - Using the class to write the react component // https://jscomplete.com/repl?j=ryjk0iKHb class Button extends React.Component { render() { return {this.props.label} } } ReactDOM.render( // Example 10 - // https://jscomplete.com/repl?j=rko7RsKS- class Button extends React.Component { constructor(props) { super(props) this.id = Date.now() } render() { return {this.props.label} } } ReactDOM.render( // Example 11 // https://jscomplete.com/repl?j=H1YDCoFSb class Button extends React.Component { clickCounter = 0 handleClick = () => { console.log(`Clicked: ${++this.clickCounter}`) } render() { return ( {this.props.label} ) } } // Use it ReactDOM.render( 基本コンセプト＃5：Reactイベント：2つの重要な違い
// Example 12 // https://jscomplete.com/repl?j=HkIhRoKBb class Form extends React.Component { handleSubmit = (event) => { event.preventDefault() console.log('Form submitted') } render() { return ( 基本コンセプト＃6 :(すべてのReactコンポーネントにはストーリーがあります）
基本概念＃7：Reactコンポーネントにはプライベート状態があります
// Example 13 - // https://jscomplete.com/repl?j=H1fek2KH- class CounterButton extends React.Component { state = { clickCounter: 0, currentTimestamp: new Date(), } handleClick = () => { this.setState((prevState) => { return { clickCounter: prevState.clickCounter + 1 } }) } componentDidMount() { setInterval(() => { this.setState({ currentTimestamp: new Date() }) }, 1000) } render() { return ( Click Clicked: {this.state.clickCounter}
Time: {this.state.currentTimestamp.toLocaleString()}
) } } ReactDOM.render(, mountNode) Copy code基本コンセプト＃8：反応は反応します
基本コンセプト＃9：Reactはあなたのエージェントです
基本コンセプト＃10：すべてのReactコンポーネントにはストーリーがあります（パート2）