【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を構築することができます!
是非参考ください!
是非フォローしてください
最新の情報をお伝えします