React 勉強メモ-day01

反応の概要

反応紹介

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

https://reactjs.org/（英文）

https://react.docschina.org/ (中国語)

React は、ユーザーインターフェイス (UI、単純に HTML ページ) を構築するための JavaScript ライブラリです。
mvc の観点から見ると、React はビュー層 (V) の単なるソリューションです。つまり、ビューのレンダリングのみを担当し、M と C の完全な機能は提供しません。
反応/反応-dom/反応ルーター/redux: 框架
React は Facebook の内部プロジェクト (ニュースフィード、2011 年) から生まれ、その後 Instagram の Web サイトの構築に使用され (2012 年)、 2013 年 5 月にReactを導入しました。
React は最も人気のあるフロントエンド開発フレームワークの 1 つです。その他: Vue、Angular、およびその他のフレームワークの比較
vue との違い: 私の理解では、vue はより多くのコンポーネントと機能のカプセル化を提供するのに対し、React はより低レベルであり、より高度な JS スキルを必要とする傾向があります。

反応機能

1. 宣言型 UI

HTML を書くのと同じように、UI (HTML) がどのようなものかを記述するだけで済みます。

const aa = <div className="app">
    <h1>Hello React! 动态数据变化:{count}</h1>
</div>

宣言型スタイルは命令型スタイルに対応し、宣言型スタイルは何をするかに焦点を当て、命令型スタイルはどのようにするかに焦点を当てます。

2. コンポーネント化

コンポーネントはReact で最も重要なコンテンツです
コンポーネントは、ページ上のコンテンツの一部を表すために使用されます。
複数のコンポーネントを組み合わせて再利用して、完全なページ機能を実現します

ここに画像の説明を挿入

(react 内のすべてのものはコンポーネントです)

3. 一度学習すれば、どこでも使用可能

React/rect-dom を使用して Web アプリケーションを開発する
React/react-native を使用してモバイルネイティブアプリケーションを開発する (react-native) RN Android および iOS アプリケーションフラッター
React を使用して VR (仮想現実) アプリケーションを開発する (react360)

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

React Scaffolding の概要
React スキャフォールディングを使用してプロジェクトを作成する
プロジェクトのディレクトリ構成の調整
npm i -g @vue/cli React スキャフォールディング (CLI)
- React Scaffolding の概要
- React スキャフォールディングを使用してプロジェクトを作成する
- プロジェクトのディレクトリ構成の調整
- npm i -g @vue/cli (vue) => npm i -g create-react-app(react)
- vue create xxx (vue) => create-react-app xxx(react)
React Scaffolding の概要
- 足場：建設の各工程を円滑に進めるために設置される作業台
- フロントエンドプロジェクト開発において、スキャフォールディングは、フロントエンドプロジェクトの開発プロセスをスムーズに進めるために設定された開発プラットフォームです。
- 足場の意味:
  - 最新のフロントエンド開発はますます成熟しており、webpack、babel、eslint、sass/less/postcss などのさまざまなツールに依存する必要があります。
  - ツールの構成は面倒で繰り返しが多く、プロジェクト間の構成は類似している
  - 開発段階、プロジェクトリリース、さまざまな構成
    - プロジェクトを開始する前に、シェルフのセットアップを支援し、面倒な Webpack 構成を保存します。
    - プロジェクト開発中、ホットアップデート、コードのフォーマット、git 送信時のコードフォーマットの自動検証など。
    - プロジェクトがリリースされると、コード圧縮、最適化、オンデマンド読み込みなどを含む自動パッケージ化がワンクリックで行われます。
React スキャフォールディングを使用してプロジェクトを作成する
- 注文：npx create-react-app react-basic
  - npx create-react-app は固定コマンドであり、create-react-appReact スキャフォールディングの名前です。
  - 反応基本はプロジェクト名を表します。これは変更可能です
- プロジェクトを開始します:yarn startまたはnpm run start
- npxこれは、npm でのツールキットの使用を簡素化するために npm v5.2 に追加された新しいコマンドです
  - オリジナル: 1 グローバルインストールnpm i -g create-react-app2 スキャフォールディングコマンドによる React プロジェクトの作成
  - 現在: npx は最新の create-react-app を呼び出して React プロジェクトを直接作成します
プロジェクトのディレクトリ構造の説明と調整
- 例証します:
  - srcこのディレクトリは、プロジェクト開発用のコードを記述するディレクトリです。
  - package.json2 つのコアライブラリをチェックしてください: react、react-dom(スキャフォールディングがインストールされているので、直接使用できます)
- 調整：
  1. src ディレクトリ内のすべてのファイルを削除します
  2. プロジェクトのエントリーファイルとしてindex.jsファイルを作成し、このファイルにReactコードを記述します
Reactの基本的な使い方

基本的な手順
- 使用手順
```
- 导入react和react-dom     
- 创建react元素(虚拟DOM)
- 渲染react元素到页面中
```
- 反応と反応ダムをインポートします
```
// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'
```
- 反応要素を作成する
```
// 创建元素
const title = React.createElement('h1', null, 'hello react')
```
- React 要素をページにレンダリングする
```
// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))
```
全体
```
import React from "react";
import ReactDom from "react-dom"

// 创建 虚拟DOM
// React.createElement('标签名',{标签属性：class建议写成className}，标签内容)
const vNode= React.createElement('div',{
      
      id:'aa'},'盒子')

//渲染到页面中
// ReactDom.render（元素，挂载对象）
ReactDom.render(vNode,document.getElementById("root"))
```
JSXの基本的な使い方

createElementの問題
- 面倒で簡潔ではない
- 直感的ではなく、説明されている構造を一目で確認できない
- 洗練されていない、開発経験が乏しい

ここに画像の説明を挿入

JSX

JSXはいJavaScript XML、省略形です。これは、JavaScript コードで XML (HTML) 形式のコードを記述することを意味します。

利点: 宣言構文はより直感的で、HTML と同じ構造をしているため、学習コストが削減され、開発効率が向上します。

JSX は React のコアコンテンツです

注: JSX は標準の JS 構文ではなく、JS の構文拡張です。スキャフォールディングに組み込まれている@babel/plugin-transform-react-jsxパッケージは、構文の解析に使用されます。
ここに画像の説明を挿入

使用手順

- 导入react和reactDOM包
- 使用jsx语法创建react元素
- 把react元素渲染到页面中

反応と反応DOMをインポートします

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

反応要素を作成する

// 创建元素
const title = <h1 title="哈哈"></h1>

レンダリング要素

// 渲染元素
ReactDOM.render(title, document.getElementById('root'))

JSXに関する注意事項

jsx 構文はスキャフォールディングでのみ使用できます
- JSX はブラウザで使用する前に、babel によってコンパイルおよび処理される必要があるためです。スキャフォールディングにはデフォルトですでにこの構成が含まれています。
JSX にはルートノードが必要です。<></> <React.Fragment></React.Fragment>
子のない要素は使用を/>終了できます
JSX の構文は JavaScript に近いです
- class=====>className
- for========>htmlFor
()JSX では行を折り返すことができます。JSX に複数の行がある場合は、自動的にセミコロンが挿入されるバグを防ぐために JSXを折り返すことをお勧めします。

よりきれいなプラグインを使用して反応コードをフォーマットする

プラグインをインストールする
より分かりやすい構成を追加する

// 保存到额时候用使用prettier进行格式化
"editor.formatOnSave": true,
// 不要有分号
"prettier.semi": false,
// 使用单引号
"prettier.singleQuote": true,
// 默认使用prittier作为格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode",

反応の概要

反応紹介

反応機能

1. 宣言型 UI

2. コンポーネント化

3. 一度学習すれば、どこでも使用可能

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

React Scaffolding の概要

React スキャフォールディングを使用してプロジェクトを作成する

プロジェクトのディレクトリ構造の説明と調整

Reactの基本的な使い方

基本的な手順

JSXの基本的な使い方

createElementの問題

JSX

使用手順

JSXに関する注意事項

よりきれいなプラグインを使用して反応コードをフォーマットする

おすすめ