(TIL 2) React.js主な概念JSX

11825 ワード
React TIL react.js JSX テキストリンク

1) 🤔JSXとは何ですか。


Javascript+XMLの略!
JavaScriptにXMLを追加する拡張構文(XMLはHTMLの拡張構文)と理解できます.
JSXは1つのファイルでJavaScriptとHTMLを同時に作成できるので便利です.
サンプルを作成するためにコンポーネントにHTMLを追加します!
ただし、まず構成部品の作成方法を理解する必要があります.

2)構成部品の作成方法


1)クラスコンポーネント
function example() {
  return (
  );
}
2)機能コンポーネント方式
class example extends React.Component {
  render() {
    return (
    );
  }
}
Hooksが登場して以来、人々は機能コンポーネント方式をより多く使用しているようだ.
しかし、私はまず学院でclass方式を勉強したので、しばらくclass componentの作成方式を使います.
ここで理解したいのは、JSXを使用して戻り値にHTMLを書き込むことができます!

3）JSX使用例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello world찍기</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">

    class App extends React.Component{
        render(){
            return(
                <>
                    <h1 className="title">React 주요 개념</h1>
                    <ul>
                        <li>JSX</li>    
                        <li>엘리먼트와 렌더링</li>    
                        <li>Component와 Props</li>    
                        <li>State와 생명주기</li>    
                        <li>리스트와 key</li>    
                        <li>State 끌어올리기</li>    
                        <li>합성vs상속</li>     
                    </ul>
                </>
            )
        }
    }
        ReactDOM.render(
            <App />,
            document.querySelector('#root')
        )
    </script>
</body>
</html>
返信内容にHTMLを書いてみよう!

✔ここで学ぶこと!


1)return値は一番上の要素しか認識できません!
したがって、戻り時には、<>全体をバンドルします.
<>を外すと、次の赤い線が表示されます.

2)JSXはXML表記規則に従う!(呑呑呑呑呑呑呑呑呑
JSXは、前述のようにJavaScriptとXMLの略である.だから、私はもちろんXMLルールに従うと推測できます.そして、私は以前XMLルールを学んだことがないので、慣れていません.
XMLは終了フラグを入力する必要があります!また、HTMLとは異なり、XMLはimg、brなどの空白領域にスラッシュ(/)を書かなければならない.
        ReactDOM.render(
            <App />,
            document.querySelector('#root') 
        )
Appコンポーネントのロードと書き込みにも空のラベルを使用しますが、最後にスラッシュ(/)を付ける必要があります.
3)PascalCase(大文字で始まる)を使用!
構成部品名を指定するときにPascalCaseを使用します.
これはReactネーミングルールです!!
4)classセレクタclassName入力
クラスはコンポーネントの作成に使用されるため、既存のクラスセレクタはclassNameを入力しなければエラーは発生しません.
こんにちは!😊 私は公費支援で開発の勉強を始めた学生です!
もし私が提供した情報に間違いがあったら、メッセージを残してください.💚
私の文章を読んでくれてありがとう.🙇‍♀️
BAEKJOON : 14501
x 265ソース解析:参照フレーム管理