JSXとImport&Export
3946 ワード
JSX
リアクターで構成部品の外観を定義するときに使用するJavaScriptの構文を拡張します.
JSXルール
1ラベルを閉じる必要があります.
2 returnでは、2つ以上のタグを1つのタグで囲む必要があります.
またはタグを使用できます.
3 cssプロパティをオブジェクトとして作成し、適用します.
この場合、
最初は気まずくても、慣れてくると、既存のhtmlやcssを使うときよりも直感的で快適になります.つまりインデックスJSX構文は、jsファイルに直接適用できません.
JSXはモジュールをインポートして使用する必要があります.
3 cssプロパティをオブジェクトとして作成し、適用します.
制定法
export default function New() {
const Box = styled.div`
width: 50px;
heigt: 50px;
`
return (
<div>
<Box>안녕하세요!!</Box>
</div>
)
}
CSS-in-JS方式で記述されている.この場合、
export defautl function New()部分を矢印関数として記述してもよい.export default function New() {
const Box = styled.div`
width: 50px;
heigt: 50px;
`
return (
<div>
<Box>안녕하세요!!</Box>
</div>
)
}
export default New()export default New()と記入することに注意してください.最初は気まずくても、慣れてくると、既存のhtmlやcssを使うときよりも直感的で快適になります.つまりインデックスJSX構文は、jsファイルに直接適用できません.
ImportとExport
importおよびexportは、文字による出力および受信機能を有する.JavaScriptをより便利に使用するには、上記の例のコードに書いてあるように関数や変数をエクスポートしたり、モジュールをインポートしたり使用したりすることができます.JSXはモジュールをインポートして使用する必要があります.
import styled from '@emotion/styledReference
この問題について(JSXとImport&Export), 我々は、より多くの情報をここで見つけました https://velog.io/@imnamesol/JSXテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol