【Reactの書き方】JSXのルールを解説

HTMLとCSSをひと通り学習して、Reactの学習に進もうと考えている方向けの記事です。
多分、Reactの書き方が独特に感じるはず。
Reactの学習に進む前に、「基本的な書き方」を確認しておくのがおすすめです。
Reactの書き方は「JSX記法」と呼ばれたりしま す。
普通のHTMLの書き方とはちょっと違います。
この記事では、その辺を詳しく解説していきます。
具体的な内容は以下です。
Reactコード基本の形
最上位の要素は1つにする
フラグメントを使う
<img>の書き方
style属性の書き方
「class」ではなく「className」
HTMLをJSXにまとめて変換したいとき
では順番に見ていきます。
Reactコード基本の形
Reactの基本の形は以下です。
const Home = () => {
return (
<h1>Home</h1>
);
};
export default Home;
上記のコードでは、「Home」というコンポーネントを定義しています。
コンポーネントは「部品」みたいな意味です。
Reactでは、このコンポーネントをいくつか作ります。
そして、コンポーネントを組み合わせてWebアプリやWebサイトを作っていくイメージです。
上記のコードでは「Home」という文字列を表示させるコンポーネントとなっております。
また、要素が1つだけの場合は「return」の後の「()」は省略できます。
以下のような感じです。
const Home = () => {
return <h1>Home</h1>;
};
まあ省略はできますが、「return」の後の「()」は念の為