React Scaffoldingをインストールしていることが前提なので、ここの見方が分からない場合は作成してください~
【Reactファミリーバケット学習】React Scaffoldingの初期化とプロジェクト構造解説_suohのブログのブログ-CSDNブログ
目次
質問 1: 単純な hello コンポーネントを作成するにはどうすればよいですか?
質問2、コンポーネントが多すぎてsrc直下が乱雑な場合はどうするか。どうやって対処すればいいのでしょうか？
質問4: コンポーネントが増えると、すべてのコンポーネントのjsとcssが混在して非常に汚くなりますが、どう対処すればよいですか?
質問 5: React のコンポーネントの js ファイルと純粋な関数の js ファイルは両方とも js で終わりますが、どのように区別すればよいですか?
質問6: app.jsファイルにコンポーネントを導入するのが面倒で、名前の重複が多いのですが、どう対処すればよいでしょうか？
質問 7: 同じクラス名を含む 2 つのコンポーネントを同時に app.js に導入すると、スタイルの競合が発生します。
質問8: コンポーネントを書く際、毎回手動でreactライブラリを導入し、classクラスを使ってコンポーネントを定義する必要があり、非常に面倒ですが、どうすれば解決できますか？
質問 1: 単純な hello コンポーネントを作成するにはどうすればよいですか?
1. hello.jsを定義する
// 引入react库，创建“外壳”组件app
import React, { Component } from "react";
// 定义hello组件并暴露
export default class Hello extends Component {
render() {
return <h3>hello,这是我的 第一个react组件！</h3>
}
}2.app.jsで導入する
効果を見てください
質問2、コンポーネントが多すぎてsrc直下が乱雑な場合はどうするか。どうやって対処すればいいのでしょうか？
回答: コンポーネント フォルダーを作成し、このフォルダーの下に反応コンポーネントを配置します。
同時に、インポートされたパスも変更する必要があります。
質問 3: スタイルを追加するにはどうすればよいですか?
新しいCSSファイルを作成する
その後、hello.js にインポートします。CSS を導入する場合、サフィックス名は省略できないことに注意してください。サフィックスを省略できるのは、js または jsx ファイルのみです
したがって、hello.css は次のように導入する必要があります。上記は間違った導入です
質問4: コンポーネントが増えると、すべてのコンポーネントのjsとcssが混在して非常に汚くなりますが、どう対処すればよいですか?
回答: コンポーネント内にサブフォルダー Hello を再度作成し、hello コンポーネントに関連する JS と CSS を配置できます。ファイル名は大文字にするのが最適です。これは、それが コンポーネント であることを意味し、非常に便利です。複数のコンポーネントを管理するために複数のフォルダーを作成できます。
質問 5: React のコンポーネントの js ファイルと純粋な関数の js ファイルは両方とも js で終わりますが、どのように区別すればよいですか?
方法 (1):名前を付ける、コンポーネント js ファイルの最初の文字を大文字にし、コンポーネント js を表す
方法(2):サフィックス名。コンポーネントのjsファイルのサフィックス名を直接jsxに変更できます。もちろん、インポート時にjsとjsxの両方のサフィックスを省略することもできます
質問6: app.jsファイルにコンポーネントを導入するのが面倒で、名前の重複が多いのですが、どう対処すればよいでしょうか？
とても簡単です。名前を変更し、インデックスするフォルダーの下のコンポーネント名を一律に変更します。
このとき、インデックスを導入する際に省略することができ、より簡潔になります。
質問 7: 同じクラス名を含む 2 つのコンポーネントを同時に app.js に導入すると、スタイルの競合が発生します。
まず、別のテストコンポーネントを作成します
hello コンポーネントと同様に、title という名前のクラスを追加し、それを yellow として定義します。
app.jsで導入されました
保存してエフェクトを見ると、2 つのコンポーネントの背景色が同じになり、後で紹介するクラス名のスタイルが優先されていることがわかります。
の解き方？これにはスタイルの競合の問題が伴います。
方法 (1): hello コンポーネントの CSS 名を直接、index.module.css として指定できます。
そうすると導入されると手法が変わってきますので、使用する際には注意が必要です
リフレッシュ後は正常です
方法(2)：lessでコンポーネントごとに一般的なクラス名を定義し、スタイルをネストして記述する もちろん実際の開発では2番目の方法がよく使われますが、1番目の方法は比較的面倒です。
.hello {
.title {
background: red;
}
}質問8: コンポーネントを書く際、毎回手動でreactライブラリを導入し、classクラスを使ってコンポーネントを定義する必要があり、非常に面倒ですが、どうすれば解決できますか？
回答: vsocde プラグインをインストールし、vscode で検索します
インストール後、 「rcc」（reactクラスコンポーネントとはreact内のクラスコンポーネントを意味します） をクリックする とクラスコンポーネントテンプレートが表示されます。
改行の後にコンポーネント名を変更します
Knock rfc (react 関数コンポーネントとは、react における関数コンポーネントを意味します)
