反応基本:我々の最初の反応アプリを作成する

私はやることによって学問を固く信じている.
このシリーズのために、我々は一歩一歩反応するつもりです.
この部分では、我々の最初のアプリケーションを作成し、我々は使用できるコンポーネントを作成する基本的な外観があります.

最初の反応アプリを作成する
最初のアプリケーションを作成するには、次のコマンドを実行する必要があります.
The my-app 部分は、あなたのアプリケーションの名前です.

npx create-react-app my-app 

Note are reading it right. It's npx not npm for this command

また、以下のコマンドを実行することにより、typescriptアプリとして起動できます.

npx create-react-app my-app --template typescript

しかし、このアプリケーションでは、プレーンバージョンを使用します.
では、次のコマンドを実行しますmy-app アプリケーションを起動するフォルダ

npm start

このコマンドはブラウザを開くでしょう、そして、あなたは基本的な反応ボイラー板を見るべきです.


最初のコンポーネントの作成
反応はコンポーネントベースのシステムです、あなたが見るすべては、構成要素でできています.
お気に入りのエディタでプロジェクトを開き、コンポーネントの作成方法を確認しましょう.
開けましょうsrc/App.js ファイルときれいなスレートから起動します.

function App() {
  return <div className='App'>My react app</div>;
}

export default App;

これはテキスト“私の反応アプリ”をレンダリングします.
まだ空想はありませんが、大丈夫です.
本棚になる最初のカスタムコンポーネントを加えましょう.

const Bookshelf = () => {
  return <div>Bookshelf</div>;
};

私は、我々の上にこのコードを置くほうを選びましたfunction App 今のところシンプルにする宣言.
このコンポーネントを使用するには、次のようにアプリケーションを変更する必要があります.

function App() {
  return (
    <div className='App'>
      <Bookshelf></Bookshelf>
    </div>
  );
}

私たちが今ページをリロードするならば、我々は「本棚」という語を見なければなりません.
これはまだファンシーではないかもしれませんが、ここでコンポーネントを使用する方法の概念を把握し始めているかもしれません.
ブックコンポーネントを作成しましょう.

const Book = () => {
  return <div>Book</div>;
};

しかし、固定名“本”の代わりに、我々はそれを使用するとき、この本のタイトルを与えたい.
のタイトルプロパティを追加しましょう!

const Book = ({ title }) => {
  return <div>{title}</div>;
};

我々は今このように我々のアプリでこの本をインポートすることができます:

function App() {
  return (
    <div className='App'>
      <Bookshelf></Bookshelf>
      <Book title='Laravel collections' />
    </div>
  );
}

そして、あなたはタイトル“ララベルコレクション”が表示される本を見る必要があります.
本棚が本棚の中にあるように、私たちがどこでこれを行っているかを見るかもしれません.
それを変えましょう.

<Bookshelf>
    <Book title='Laravel collections' />
    <Book title='Ruby for beginners' />
    <Book title='CSS is awesome' />
</Bookshelf>

しかし、我々が現在リフレッシュするならば、我々は何も見ないようにします!
なぜなら、私たちの本棚は子供のコンポーネントのレンダリング方法を知らないからです.
そのためには、子供たちを受け入れるために本棚を定義し、そうするようにしなければなりません.

const Bookshelf = ({ children }) => {
  return <div>{children}</div>;
};

今、我々はすべての本を見ることができるはずです!

コンポーネントの抽出
我々が我々のページにより多くのものを加えるならば、我々は速くあらゆる種類の構成要素を含む大きいファイルで終わります.
そして、それは反応が超強力であるところです.これらのコンポーネントをそれぞれのファイルに簡単に移動できます.
それがどのように作成するかについて見ましょうcomponents あなたのフォルダsrc .
次にBookshelf.js ファイルとして、このように本棚コードを追加します.

export default function Bookshelf({ children }) {
  return <div>{children}</div>;
}

では、このコンポーネントをApp.js ファイル:

import Bookshelf from './components/Bookshelf';

先に行くと、ブックコンポーネントの同じを試してください.
これらのコンポーネントを抽出することによって、我々は非常にクリーンで維持可能なコードを取得します.
私はあなたの最初の反応アプリを構築楽しんだ.
完全なコード例を見つけることができますGitHub .

読んでいただきありがとうございます、接続しましょう!
私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or