www.youtube.com
このYoutubeでは、Macを使っている。エディタはIntelliJ IDEAを使っている。
エディタは、ほかにもVisual Studio Codeや、EclipseにJavaScriptプラグインする方法などがあります。
１６：３７ あたり create-react-appで作成されるファイルについての説明
２０：１７あたり npm start、npm run buildの説明あり
最近の流れが、
・クラスコンポーネント⇒関数コンポーネント
・createRoot( )メソッドを使う
www.youtube.com
propsについての説明がわかりやすいです。
これに基づいて、こちらの環境で作成していきましょう。
index.jsのあるディレクトリ内に、componentsというフォルダを作成し、その中に、Article.jsとArticleContents.js と、article.css（Article.jsに対応するCSSファイル）を作成します。
まず、index.js内のApp1をすべてArticleに書き換えます。すなわち
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Article from 'Article'
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Article />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
下記のファイルを作成します。
Article.js
import React from 'react'
function Article() {
const name = "yuuzaki";
return (
<div className="article">
{name}
</div>
);
}
export default Article;
article.css
.article{
color: #ff0000;
}
※yarn startで始めておくと、Visual Studio Codeで修正し保存すると、ブラウザの表示がすぐに変更後に変わる。
propsに入っていきます。動画だと、11：18～です。
同じように作成していきます。
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Article from './Article'
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Article />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
Article.js
import React from 'react'
import Article from './components/ArticleContents';
function App() {
return (
<div className="article">
<Article
title={"日本一わかりやすい"}
content={"今日のトピック"}
/>
</div>
);
}
export default App;
ArticleContents.js（Article.jsのあるフォルダ内に、componentsフォルダを作成し、その中に作成）
import React from 'react';
function Article(props){
return(
<div>
<h2>{props.title}</h2>
<p>{props.content}</p>
</div>
)
}
export default Article;
article.css
.article{
color: #ff0000;
}
これで完成です。
ここで素人目から気になるのは、
return内です。HTML風ではありますが、少し違います。自分でタグを作成してます。
JSXの『X』は、XMLのことを指しております。
HTMＬとＸＭＬというのは似てますが、ＨＴＭＬの場合はすでにタグは決められてますが、ＸＭＬというのは、タグ作成の規則を定めたものを指し、その規則に従っていればタグが作成できるというものです。
なので、ＨＴＭＬで許容されていた <>だけというのはダメで、<p></p>あるいは、<p/>と記載する必要があります。
JavaScriptで、タグも含め最初から、ＨＴＭＬの文字列を作成し、そのあと、ビルドしたときに、ＨＴＭＬファイルが出来上がるといった方法をとっているようです。
