最初のReactページを作成する方法

Rractとは何ですか?

Reactはユーザーインターフェースを構築するためのJavaScriptライブラリです

ユーザーインターフェースを構築します。フロントエンドのユーザーインターフェースは、HTMLページとして簡単に理解できます。

javscrtipt ライブラリ。これはフレームワークではなく、ライブラリです。React パッケージ全体がフレームワークです。

反応ファミリーバケット:

react: コアライブラリ react-dom: dom 操作 react-router: ルーティング、redux: 集中状態管理

背景

Rractは最高です！世界で最も多く使われている

特徴

宣言型<br /> HTML に似た構文を使用してページを定義します。 React では、ビューの変更はデータによって行われます。データが変更されると、React は DOM を効率的に更新してレンダリングできます。

定数リスト = [
  { id: 1、名前: 'フロントエンド'、給与: 100000 }、
  { id: 2、名前: 'バックエンド'、給与: 50 }
]

定数タイトル = (
  <ul>
    {リスト.マップ((項目) => (
      <li キー = {item.id}>
        <h3>クラス {item.name}</h3>
        <p>給与 {item.salary}</p>
      </li>
    ))}
  </ul>
）

ここに画像の説明を挿入

コンポーネント化（すべてのフレームワークに備わっていますが）
コンポーネントは、React で最も重要なコンテンツコンポーネントです。ページ内の部分的なコンテンツの組み合わせを表すために使用されます。複数のコンポーネントを再利用することで、完全なページ機能を実現できます。

一度学べばどこでも使える<br /> Web アプリケーションの開発には react/rect-dom を使用し、ネイティブモバイルアプリケーションの開発には react/react-native を使用します (react-native)
ReactはVR（仮想現実）アプリケーションの開発に使用できます

React スキャフォールディング

React プロジェクトをゼロから作成する

まずスキャフォールディングツールキットをグローバルにインストールします

コマンド: npm i -g create-react-app

足場ツールを使用してプロジェクトを作成する

コマンド: create-react-app 項目名

実行が完了しました

実行後、このようなフォルダが作成されます

ここに画像の説明を挿入

Vueフレームワークと同じ
1. srcディレクトリはプロジェクト開発用のコードを書く場所です
2.index.jsはエントリファイルです

package.jsonにそのようなコマンドがあります

ここに画像の説明を挿入

入場できます

mpn 実行開始
糸の始まり

プロジェクトを実行する

ここに画像の説明を挿入

次に、src以下のすべてのファイルを削除し、新しいindex.jsを作成します。
reactとreact-domの紹介

// react と react-dom をインポートする
'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。

真ん中に構造を書きます

// 要素を作成する const title = React.createElement('h1', {}, 'hello react (written by createElement)')

ここに画像の説明を挿入

しかしcreateElementは非効率すぎるので、 jsxを使うことができます

JSXとは何か

JSX: JavaScript XML の略語です。

JS コードで XML 構造を記述する
注: JSX は標準の JS 構文ではなく、JS の構文拡張です。 @babel/plugin-transform-react-jsx パッケージは、構文を解析するためのスキャフォールディングに組み込まれています。
Reactはこれを使用してUI（HTML）構造を作成します

理解：我們之前用html寫頁面，現在是用jsx來寫頁面

const title = <h1>HELLO REACT (jsx で記述)</h1>

ここに画像の説明を挿入

最後に、コードはpublic/index.htmlにレンダリングされるので、このコード行を一番下に追加してページにレンダリングします。Webpack はそれをリアルタイムで自動的にパッケージ化し、コードをpublic/index.htmlファイルに埋め込み、実行します。

// React 要素をレンダリングする ReactDOM.render(title, document.getElementById('root'))

上記のコードにより、ページは最終的にpublic/index.htmlのid=rootのdivにレンダリングされます。

ここに画像の説明を挿入

そこで私たちは最初のReactページを書きました

これで、React の最初のページを作成する方法に関するこの記事は終了です。React の最初のページの作成に関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: