JSX - Reactを学ぶなら知っておきたい、HTMLの表現手法
Summary
TLDRIn this informative video, the host, Tomostan Taniguchi, dives into the world of React, focusing on JSX, a syntax extension for JavaScript that allows for the inclusion of HTML-like elements in JavaScript code. The video is structured around a chapter from a book titled 'Starting with React Practical Introduction,' written by Yuta Yamada and published by SoftBank Creative. The host guides viewers through setting up a React project using Next.js, a framework that simplifies React development. He explains the basics of JSX, including its rules and syntax nuances, such as the use of className instead of class due to JavaScript's naming conventions. The video also covers how to dynamically insert variables into JSX, handle attributes, and apply styles. The host emphasizes the importance of understanding JSX for anyone looking to master React and Next.js, suggesting that it's a crucial skill for modern front-end development. He encourages viewers to experiment with JSX and to use available tools to convert HTML to JSX for easier integration into React-based projects. The video concludes with a recommendation to study the subject further, using resources like the mentioned book and the host's channel for ongoing learning.
Takeaways
- 📚 The speaker introduces JSX, a syntax for embedding HTML in JavaScript, commonly used with React but not exclusive to it.
- 🌟 JSX allows for a more integrated approach to writing HTML and JavaScript, making it easier to manipulate and interact with HTML elements within JavaScript.
- 🛠️ JSX requires understanding specific rules, such as enclosing multiple elements within a single parent element like a `div` or using a React Fragment.
- ⚠️ Be cautious with JSX as it behaves differently from HTML; for instance, self-closing tags in JSX need an explicit closing slash.
- 🔍 Attributes in JSX are treated as JavaScript, so 'class' becomes 'className' to avoid conflicts with the JavaScript keyword 'class'.
- 🔄 JSX enables dynamic output of attributes and styles, allowing for more interactive and data-driven UI components.
- ✅ The use of `{...link}` in JSX allows for the spreading of an object's properties as attributes, simplifying the syntax for complex elements.
- 💡 JSX comments are written using the JavaScript comment syntax, enclosed within `{/* ... */}` to avoid conflicts with HTML comment syntax.
- 🎨 The speaker demonstrates embedding variables directly into JSX, showcasing the power and convenience of JSX for dynamic content.
- ⛔ When embedding HTML within JSX, use the `dangerouslySetInnerHTML` attribute to prevent automatic escaping and allow raw HTML rendering.
- 📈 The speaker recommends using JSX conversion tools for existing HTML to facilitate the transition to JSX, making it easier to adopt React and Next.js in new projects.
Q & A
What is JSX and how is it used in React?
-JSX is a syntax extension for JavaScript that allows HTML to be written within JavaScript code. It's not exclusive to React but is commonly used with it. JSX makes it easier to manipulate HTML with JavaScript and is a key concept to learn when studying React.
What is the main difference between HTML and JSX?
-While HTML and JSX may look similar, JSX is not strictly HTML. JSX gets transpiled into HTML by the React framework, allowing for the use of JavaScript expressions within the markup.
How does one begin setting up a React project with Next.js?
-To start a React project with Next.js, you can use the command `npx create-next-app@latest` in the terminal. This command sets up a new Next.js application, which includes React as it is built on top of React.
What is the significance of the 'class' attribute in JSX?
-In JSX, the 'class' attribute is not used due to it being a reserved word in JavaScript. Instead, 'className' is used as the attribute name for assigning classes to elements.
How can you include multiple elements within a single JSX return statement?
-In JSX, you can wrap multiple elements with a single parent tag like `div`, or use a React Fragment (`<>...</>` or `<React.Fragment>`) to return multiple elements without adding extra nodes to the DOM.
What is the correct way to include comments in JSX?
-Comments in JSX are written using the JavaScript comment syntax, enclosed within curly braces and wrapped with the HTML comment syntax: `{/* comment text */}`.
How can you embed variables directly into JSX?
-In JSX, you can embed variables directly into the markup by enclosing the variable name in curly braces `{variableName}`. This allows for dynamic content to be rendered based on the variable's value.
What is the `dangerouslySetInnerHTML` attribute in JSX used for?
-The `dangerouslySetInnerHTML` attribute is used in JSX to render raw HTML from variables without escaping. It is used with caution because it can expose the application to cross-site scripting (XSS) attacks if not handled properly.
How do you dynamically assign attributes to JSX elements?
-Attributes in JSX can be dynamically assigned by embedding expressions within curly braces. For example, to dynamically set the `href` attribute of an anchor tag, you can write `{link}` where `link` is a JavaScript variable containing the URL.
What is the correct way to define and apply styles to JSX elements?
-Styles in JSX can be defined using an object where the property names are written in camelCase to match CSS property names. This object can then be applied to a JSX element using the `style` attribute, like so: `style={styles}`.
What is the recommended approach for handling CSS in a React application?
-It is recommended to use CSS classes and separate stylesheets for styling in React applications. While inline styles can be used, they can make the application harder to manage, especially as it grows in size and complexity.
What are the benefits of using Next.js for React development?
-Next.js is a framework built on top of React that provides features like server-side rendering, API routes, dynamic imports, and automatic code splitting. It simplifies the development of complex applications and is considered a fast and efficient way to build React applications.
Outlines
📚 Introduction to JSX in React
The speaker, Taniguchi from Tomostation, introduces JSX, a syntax for embedding HTML in JavaScript, which is commonly used in React. They reference a book titled 'Starting Practical Introduction to React' by Yamada Yoshihiro, which covers React basics and Next.js app development. The speaker discusses JSX as a way to integrate HTML with JavaScript, making it easier to manipulate and work with in React applications. They also provide a step-by-step guide on setting up a React project using Next.js and the necessary tools like Node.js, ESLint, and Tailwind.
🔍 Understanding JSX and Its Syntax
The speaker explains the intricacies of JSX, highlighting that it is not pure HTML and has certain rules, such as requiring a single parent element to wrap multiple elements. They discuss the use of React Fragments to avoid adding extra HTML elements and the need to convert certain HTML attributes to their JSX equivalents, like 'class' to 'className'. The speaker also covers the correct way to include comments in JSX and how to handle self-closing tags.
🎨 JSX for Dynamic Content and Styling
The video demonstrates how JSX allows for the dynamic insertion of variables into the UI, with an example of displaying a user's name. It also covers the use of the 'dangerouslySetInnerHTML' attribute for embedding raw HTML. The speaker further explains how to dynamically assign attributes and styles to JSX elements, showcasing the use of objects and the spread operator to pass multiple attributes at once. They also touch on the need to convert CSS property names to camelCase when defining styles in JavaScript.
🌐 Practical Uses of JSX in Web Development
The speaker emphasizes the practical benefits of using JSX, such as the ability to integrate JavaScript variables and logic directly into the UI. They provide examples of how to use JSX for dynamic content, including linking to URLs and applying styles. The video also suggests using tools to convert existing HTML to JSX, which can be helpful for transitioning existing websites to use React and Next.js.
📚 Encouraging Learning of React and Next.js
The speaker recommends the book 'Starting Practical Introduction to React' for a thorough study of React and Next.js, considering their importance in modern front-end development. They invite viewers to subscribe to their channel for continued learning on React, Next.js, Astro, WordPress, and other related topics. The speaker thanks the audience for watching and encourages them to explore React and Next.js through the provided resources.
Mindmap
Keywords
💡JSX
💡React
💡Next.js
💡Components
💡HTML
💡CSS
💡ESLint
💡Tailwind
💡Variables
💡Attributes
💡Fragment
Highlights
Introduction to JSX, a specification that allows embedding HTML within JavaScript, commonly used with React.
JSX is not exclusive to React but is fundamental to it, making it essential for anyone learning React.
JSX enables the combination of HTML and JavaScript, which traditionally were separate and had poor compatibility.
Demonstration of setting up a React project using Next.js, a framework that simplifies React learning.
Explanation of JSX syntax and how it differs from HTML, including the use of `className` instead of `class`.
JSX allows for the direct embedding of variables into the markup, making it highly versatile.
The use of `dangerouslySetInnerHTML` in JSX to embed raw HTML without escaping.
Attributes in JSX can be dynamically output, unlike static HTML attributes.
Introduction of React Fragments, which allow multiple elements to be returned without adding extra nodes to the DOM.
The special syntax for comments in JSX, which differs from HTML comment syntax.
The ability to define and apply styles dynamically within JSX, using JavaScript objects.
The importance of using tools to convert HTML to JSX for easier integration into React projects.
The convenience of JSX for developers familiar with HTML, despite initial learning curve.
The presentation of the book 'Starting with React Practical Introduction' by Yamada Yoshihiro, covering React basics to Next.js app development.
Emphasis on React and Next.js as essential subjects for front-end developers.
Encouragement for viewers to experiment with JSX and integrate it into their projects for practical experience.
The presenter's intention to continue providing information on React, Next.js, Astro, and WordPress in future content.
A call to action for viewers to subscribe to the channel for more updates on React and related technologies.
Transcripts
こんばんは、ともすたのたにぐちです。
今日はReactの話をしていきたいと思うんですけれども
その中でもですねこちらJSXというものについて
ご紹介していきたいと思います
今日はですねこちらの書籍
これから始めるReact実践入門
コンポーネントの基本からNext.jsによるアプリ開発まで
というですね
山田 祥寛さんが執筆された
ソフトバンククリエイティブさんの書籍
こちらが発売になったんですけれども
こちらですね一冊いただきましたので
参考にさせていただいて
今日はですねその中でチャプター2のところでですね
JSXの基本というところがあるので
そちらをですね参考にさせていただきながら
こちらの講座作らせていただきました
ありがとうございます
ということでこの JSXというものなんですけれども
これ何かと言いますとJavaScriptの中に
HTMLを組み込むことができるという規格になります
Reactだけのものではないんですけれども
基本的にはこのReactでよく使われる文法になるので
Reactを学習するときにはこのJSXについてもですね
慣れていかないといけないよということになります
要は、従来はHTMLとJavaScriptというのは
別々のものですので非常にこう相性が悪くてですね
HTMLを書いてJavaScriptを書いてということをしていたんですけれども
それをこの中に組み込むことができちゃいますよ
というのが JSX というものですね
ですので非常にこう扱いやすくなりますし
JavaScriptで操作しやすくなるというのが特徴ということですね
ではちょっとさっそく触りながらですねやっていきたいと思うので
まずReactを準備していきましょう
こちらですねターミナルを準備していきます
macOSの方はアプリケーションの中の
ユーティリティのターミナルですね
Windowsの方はスタートボタンを右クリックして
Microsoft Terminalこちらを起動しておいてください
Node.jsが必要なので、Node.jsのインストールが終わったところから
スタートしていきたいと思います
こちら np m の -v としてバージョン番号が出れば OK ですね
まだインストールしてない方は「nodejs インストール」とか
検索していただければすぐ出てくるかと思います
ではやっていきましょう
npx create-next-app@latest と入力していきます
今ですねReactを学習する時に
ここnext-appとしていまして
これNext.jsっていうフレームワークを使ったものなんですけれども
今、Reactを学習する時には
基本的にはこのNext.jsを入れて学習していただくのが
手っ取り早いかなというところがありますので
ReactとNext.jsは同じようなものだと
考えていただければと思います
ではこれでEnterしていきましょう
で OK ですかということですね
まずプロジェクトの名前を入れていきます
next-appとかとしましょうか
好きな名前で結構です
TypeScript使いますかということですね
今日はどっちでも大丈夫ですマ
Noのままいきましょうか
ESLint使いますかですね
これ Yes にしておきましょうかね
Tailwind使いますかですね
まあこれも Yes にしておきましょう
srcディレクトリー使いますかですね
これも Yes にしておきましょうか
Appルーター使いますかは Yes にしておきます
さあこんな感じですかね
customize the default import aliases
これは No のままで結構です
こんな感じでですね質問に答えていって
プロジェクトを作っていきます
これで準備できましたら next-app という
ディリクトリーができあがっていますので
これをですね Visual Studio Code で開いていきましょう
code . ですね
これで今作ったディリクトリーを
Visual Studio Codeで開くことができました
さあそしたらですねこちら見ていきましょう
src フォルダーの中のappフォルダーの中ですね
この中に page.js というファイルがあるんですけれども
ここがですねトップページの HTML を司っているところになります
これをブラウザーで見ていきましょう
ターミナルを起動して
ここで npm run dev と入力していきます
そうするとですねこちら
ローカルサーバーですね起動するので
これをですね見ていきましょう
こんな感じでページが表示されました
こちらの page.js が表示されている状態ということですね
さあではですねちょっとここでやっていきたいと思うんですけれども
今ですねまあここに書かれているのが
実際には JSX なんですが
ちょっと一旦全部消しちゃいたいと思います
この5行目のところですね main タグというのが始まっているので
この辺全部消していっちゃいましょう
ざーっと消していきます
ここですね main タグ閉じるのところまで消していきましょう
あと CSSがちょっとかかっているんですね
これで今ちょっと何もないですよということで
エラーが出ていますけれども
あとこちらですね globals.css というところでですね
CSS がかかっているので
これもちょっと消していきたいと思います
4行目から下ですね
これを全部消しちゃいましょう。
さあではこれでですね実際にやっていきましょう
page.js の方ですねこちらにこんなふうに書いていきます
p タグですね
で例えば「こんにちは」としていきましょう
で保存します
さあそうするとですね、これだけで
ページに表示されました
今ですねここよく見ていただくとわかるんですけれども
これ HTML のファイルではありません
そもそもが .js のファイルですよね
かつ3行目にですね
export default function Home() などと書かれていて
その関数というのが始まっていますけれども
JavaScriptの内部なんですよね
ですが、ここにこのように普通に HTML を書くと
そのままですね画面に表示されるよというのが
JSX というものになります
実際ですね生成される HTML もこんな感じ
きれいな p タグが生成されています
なんでこんなことができるのかというのは
普通にですね JavaScript を作っていたら
こんなことは、もちろんできないんですけれども
今 Next.js というフレームはこう使ってですね
中に React が入っていますので
それがですねこちらを処理してくれているよということになります
で JSX はですね HTML とは厳密には違うので
ちょっとですね差があるんですね
例えば、ではここにですねもう1つ p タグを入れまして
「ともすたへ」などとしましょう
保存します
そうするとですねこれエラーになっちゃうんですね
何かと言いますと
Unterminated regexp literalと書かれているんですけれども
何のこっちゃかもしれないんですが
これ終わってないですよということですね
どういうことかと言いますと
まずですね JSX の基本的なルールとして
この return の中にかける HTML の要素は1つだけ
というルールがあります
今ですねこれ p タグ1つあるんですけれども
1つの時はこれルール違反ではありません
問題ありません
なんですが2つ書くとですね
これ2つの要素がリターンの中に入ってしまっているので
これはダメですよということになります
いくつかやり方が
どうするかなんですけれどもあります
例えば1つのやり方としては
このdiv というタグですね
こういったレイアウトに影響しないタグでですね
全体を囲ってあげる
そうするとこのようにきちんと表示されるようになります
ただこれはですねちょっとデメリットもありまして
実際に生成される HTML の方ですね
こちらにもこの div タグというのができてしまうんですね
特にレイアウトとかに影響はないんですけれども
ただですねちょっとこう気持ち悪いところがあったりですとか
まあCSSによっては影響が出てきてしまう可能性があります
こういう場合どうするかなんですけれども
1つのやり方としてですね
React Fragmentというんですけれども
こういうですね非常に特殊なタグが使えます
これですね、 、 という形で
HTML のタグとも言えないようなものなんですが
これで囲ってあげると
ちゃんとですねエラーにならないですね
これはですね HTML のソースを見ても
何もですね出力されていません
JavaScript 特に React の方でですね
これはちゃんと処理してから出力してくれるので
こういうふうにきれいな HTML になってくれます
これですね実はあるものの省略でして
っていうですねちょっと特殊なタグがあって
これのですね略称なんですけれども
Next.jsの場合ですね
この React っていうオブジェクトが標準ではないので
not defined ということで
エラーになってしまうんですね
Reactっていうのをここでロードしてあげればいいんですけれども
この省略系の方が使いやすいかなと思いますので
省略系を使っていただいていいかなと思います
ということで複数のですね要素を JSX で表現したいときには
この React Fragment ですね
それか divタグとかarticleタグとか
そういったレイアウト系のタグをですね
1つ入れてあげるといいかなというところがあります
さあもう1つがですね
例えばこう hr というタグを使ってですね
罫線ですねを引きたいという場合なんですけれども
これもですねエラーになってしまいます
これ何かと言いますと
このいわゆる空要素ってやつですかね
終了タグがないタグがあるんですけれども
その場合ですねこの HTML の普通の書き方ではできません
XHTML って昔の規格があるんですけれども
その書き方をしないといけないんですね
/> でこうするとですね
ちゃんとこのように罫線が出ているんですけれども
空要素の時はですね
この /> 記号で閉じてあげるという
XHTML の書き方をしてあげましょうねということになります
続いてがですね属性にもいくつかですね変化があるんですね
例えばよく使うのがこの class っていう属性よく使うかと思います
例えば greeting とかとしましょう
でじゃあこの greeting というものに対してですね
こう文字を赤くしたいなということであれば
globals.css の方にですね
こちら greeting というクラスを
これですね color を red にしますよとかって書きました
そうするとこう赤が反映されるわけなんですけれども
実はですねこれちょっと正しくありません
正しく画面には表示されているんですけれども
デベロッパーツールの方で見るとですね
ちょっとおかしいなことが起こります
デベロッパーツールでここですねエラーが1件起こってます
見ていくとこんなエラーですね
DOM property 'class' が invalid 正しくないですよということですね
でもしかしたら className のことですかと
書かれているんですけれども
これもですね JSX の特徴の1つですね
class っていうのが JavaScript の用語と被ってしまっているので
使えません
なので JSX では class は className という名前に変わっています
なので普通に className に変えてあげるだけなんですけれども
こうですねで、赤いままきちんと表示されていて
これだと CSS のですね
エラーも表示されなくなるよということになります
画面がですねうまく表示されちゃうので
ちょっとですね見落としがちなんですけれども
プログラムとか組んでいくとですね
エラーになったりしますので気をつけてください
他にもですねいくつかありまして
for 属性が使えないので
htmlFor になったりとかですね
いくつか変化する場所があります
でこのあたりはですね HTML で普通に組んでしまったものを
JSX にしたいなという場合には
これをですねそれぞれ変更しないといけないんですけれども
こういったものはですね結構ツールが提供されています
例えばこれ transform というちょっと適当なですね
サービスを探しただけなんですけれども
HTMLをこちらに貼り付けてあげると
こっちにですね JSX として吐き出したものというのが出力されます
例えば class のところが className に変わったりですね
style が書き方が変わったりですとか htmlFor に変わったりですとか
そういった形でですね JSX で正しい書式に書き換えてくれるので
こういったツールを使ってあげるのが
一番早いかなと思いますね
さあそしてコメントの入れ方もですね
ちょっと違うんですね
HTML ではコメントをこのようにですね
コメントを入れることができるんですけれども
これですね残念ながらこちらではエラーになってしまいます
なぜかと言いますとこの ! とかがですね
JSX では使えないので
じゃあどうするかですが
こんなコメントになります
{/* そしてこちらは */} という形になります
これ JavaScript のですねコメントですね
こちら HTML に見えてるんですが
今この中って実は JavaScript ですので
JavaScript のコメントを書くようということになります
ちょっとユニークなのが
実はこのタグの中とかにですね
このようにコメントを書くことができるんですね
// とかとして p タグとかって書いてあげると
これですねコメントとしてきちんと機能しています
こうですね特に変化はないんですけれども
こんな書き方ができるのも JSX っていうのが
HTML に似ているんだけれども
実はちょっと違うよというところの一つかもしれません
ということでまあ JSX ですね
いくつかちょっと違いがあるので
HTML に慣れている方だとですね
JSX ちょっとこう違和感があったり
気持ち悪いなって感じるところはあると思うんですけれども
JSX をですね React ですとかこの Next.js で使えるようになると
どんなところが便利かといいますと
まず1 つが変数をそのまま埋め込むことができるよということですね
例えばちょっとやってみましょう
こちらですね上のところで、これいらないですね消しちゃって
const としていきますね
で name として自分の名前例えば入れたとしましょう
そしたらこの name っていう変数をですね
画面に出力したいなと思いました
その場合ですね
これまでの HTML を JavaScript で操作するとかですと
まあここに id 属性を振ってですね
で getElementById とかでですね
いろいろこう書いていかないといけなかったんですけれども
こちら JSX をですね使っている場合は
こんな風に書くことができます
これで画面を出力すると
ここがちゃんと たにぐちまこと さんになっていますよね
この {name}、マスタッシュ構文とかよく言いますけれども
{ } で変数の名前を囲ってあげると
文章の中にこの準備したですね
変数をそのまま埋め込むことができますよというのが
JSX の非常に便利なところかなと思います
ただですねここもちょっと注意が必要なのが
例えばですねこの中に HTML を組み込んだとします
ここで として太字にしましょうということですね
そうするとですねこちら埋め込んだ状態だと
ここですね まこと さんということで
タグがですねそのまま出力されます
これいわゆるエスケープというのがされているという状態ですね
HTMLをエスケープしないでそのままですね
表示したいなという場合にはこんな風に書くことができます
例えばここですね {name} さんのところを
タグで囲っていきましょうか
dangerouslySetInnerHTML
ちょっと長いですね
このように dangerouslySetInnerHTML というものにですね
入れることができるんですけれども
__html: name と入れていきます
とこういう形で書いていきます
そうするとですねこれ今保存すると
ここ まこと というところがですね
太字になっているのでお分かりの通り
この タグのですね
この中に HTML がそのまま入って
これはエスケープされないよということになります
このですね dangerouslySetInnerHTML という属性の部分ですね
このように書く必要があるよということです
これはもう決まり文句としてですね
覚えてしまうと早いかなと思います
また逆に言うとですね
基本的にはここでエスケープされて表示されるので
安全性が高いよということでもあります
どんどん行きましょう
続いて属性もですね動的に出力することができます
例えばではここではですね const link としましょうか
https://tomosta.jp と入れていきますね
このリンクという変数ですね
これを使っていきたいと思うんですけれども
例えばこの「ともすたへ」というところにですね
リンクを貼っていきましょう
href ですねこの属性のところに
今のものを埋め込んでいきます
linkですね「ともすたへ」のところを タグで囲っていきましょう
今ちょっと色が変わらないので分かりにくいんですけれども
「ともすたへ」 のところにリンクが張られていて
ともすたのサイトにリンクが張られています
さあこれちょっともう一度見ていきますと
このリンクというところに URL が入っていますよね
属性のところなんですけれども
でここに {link} を埋め込んでいると
気をつけないといけないのがここですね
HTML の属性なので " で囲いたくなってしまうんですが
これ囲うとですねうまく動かなくなります
リンクがこう張られてない状態ですね
なので変数を埋め込むときには
" で囲わないというのが約束になります
これですね囲わなくても HTML 出力されている時は
" が自動的に入っているのでご安心ください
このようにですね属性を動的に入れることができるんですけれども
JSX はですねもっと便利な機能があります
まとめて入れることができるんですね
例えばちょっとここを変えていきましょう
リンクをですねオブジェクト形式にしていきます
例えば href属性これにですね https://tomosta.jp を入れる
そして例えばtarget属性ですね
これブラウザーを新しく開くかどうかみたいのを
決めることができるんですけれども
これを _blank ということで新しいタブを開きますということですね
例えばtitle属性をですね
ともすた などにしておきましょうということで
さあこれでですね
今この link っていう中にたくさんのですね
属性が一気に入った状態になります
でこれをですね
ここに出力していきたいんですけれども
この時ですねこんな書き方ができます
{...link} としていきましょう
さあこれで見ていきます
そうするとここですね
リンクは張られています
HTML のソースを見ていきましょう
そうするとhref属性 target属性と title属性ですね
それぞれこのようにきちんと入っています
今のですねちょっともう一度見ていきますと
この書き方ですね {...link} というふうに書いて
このリンクというのが
上のところでオブジェクトとして定義されています
hrefとtargetとtitleそれぞれを定義しているんですけれども
これによってですね
それをまとめてここに書き出すことができるよということになります
例えばですねいわゆる論理属性ですかね
属性名だけを書くっていうのがあったかと思うんですけれども
例えば disabled というやつですね
書き出したい時はこれ true というのを値を入れてあげます
そうするとですねこちらの出力されるタグの方も
ここですね disabled属性がこのように表示されています
当たり前ですけれどもここですね false にしてあげると
生成される HTML からは属性名も外れていくよということですね
ここでですね属性も動的に制御することができますので
まあこの辺でですねプログラムであらかじめまとめておいて
まあそれを HTML の方に出力するという形ができます
あとスタイルシートもですねできます
const styles = {
例えば color をここでは blue にしましょうと
fontSize を例えば 1.5rem などとしましょうと
ここまでですねまたちょっと書き方が特殊なので
気をつけていただきたいんですけれども
まずですねここですね fontSizeですね
CSS のプロパティだとこれ font-size と - 区切りなんですけれども
- 区切りがですね JSX の中では使えません
fontSize とこのキャメルケースっていうんですけれども
二文字目が大文字になるという書き方ですね
このように書いていく必要があります
そうするとこの styles というところでですね
スタイルシートが定義されているので
先ほどのこの部分ですかね
ここに style= として styles というふうに書いていきます
さあそうするとこちら CSS が効きましたね
検証するときちんとですねここの p タグのところに
color: blue だよと
で font-size= 1.5rem だよと
font-size というプロパティもちゃんと - 区切りに変わっています
こんな風にですねスタイルシートも
動的に吐き出すことができますよということですね
実際にはですねこちらスタイルシートですね
インラインで書いてしまうと
色々と扱いにくくなってしまいますので
先ほどみたいにですね
この className の方で class を割り振って
それを CSS のファイルでですね
こう書いていくというのがいいかなと思いますけれども
とはいえなんかプログラムでですね
色を変えたりするときにはこういった書き方もいいかなと思います
ということでいかがだったでしょうか
JSX ちょっとですね最初は非常に扱いにくいなと
いうふうに感じるところはあるとは思うんですけれども
とはいえまこの JavaScript ですね HTML をいじれるというのは
非常にですねメリット大きいかなと思いますので
まずはですね少しいじってみていただいて
慣れてみていただくといいかなと思います
HTMLで組んでしまったものは
先ほどの通りこの HTML を JSX に変換するツールですね
こういったものを使っていただくと変換できますので
それで既存のですねウェブサイトとかも
こちらの JSX に持ってきて
Next.js 化するというような
プロジェクトもやってみるといいかもしれません
ということでですね今回改めてご紹介すると
ここでから始める React 実践入門
コンポーネントの基本から Next.js によるアプリ開発まで という書籍
今日はですねもう本当に一部ですねご紹介をしました
書籍ですね今私の手元に届いているのが
非常に分厚い書籍となっていて
かなりですねじっくりと勉強できる書籍になっています
まあ React と Next.js はですね
今フロントエンドをやるには
結構必須の科目になっていますので
ぜひですねちょっとこの機会に手に取っていただいて
学習してみていただければなと思います
僕の動画でもですね
引き続き React ですとか Next.js
あとまあ Astro とかですね
WordPress とかそういった情報もお届けできればと思いますので
興味ありましたらぜひチャンネル登録していただければと思います
ということで本日もご視聴ありがとうございました
5.0 / 5 (0 votes)