【React】簡単なレンダリングをします！

投稿者 投稿日:


Reactで簡単なレンダリングを行うためには、まずはReactアプリケーションをセットアップして、コンポーネントを作成してそれをレンダリングする必要があります

以下に、基本的な手順を示します

Reactアプリケーションのセットアップ

最初に、Node.jsとnpm（またはyarn）がインストールされていることを確認してください

次に、以下のコマンドを使用して、Reactアプリケーションを作成します

npx create-react-app my-app
cd my-app
npm start

新しいReactプロジェクトが作成され、ブラウザでlocalhost:3000で実行されるはずです

コンポーネントの作成

ReactではUIをコンポーネントとして表現します
例えば、次のようなシンプルなコンポーネントをsrc/App.jsに作成できます

// src/App.js

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is a simple rendering example.</p>
    </div>
  );
}

export default MyComponent;

コンポーネントのレンダリング

src/index.jsで、作成したコンポーネントをレンダリングします

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './App';

ReactDOM.render(
  <React.StrictMode>
    <MyComponent />
  </React.StrictMode>,
  document.getElementById('root')
);

ブラウアで表示

npm startを実行してReactアプリケーションを起動し、ブラウザでlocalhost:3000にアクセスします
すると、MyComponentがレンダリングされた画面が表示されるはずです（以下イメージ）


以上がReactで簡単なレンダリングを行う基本的な手順です
この例ではMyComponentというシンプルなコンポーネントを作成し、それをsrc/index.jsでレンダリングしています
必要に応じて、コンポーネントの内容や構成を変更して、より複雑なUIを構築することができます！

是非参考ください！

是非フォローしてください

最新の情報をお伝えします

投稿者: Mon