React_2
構成部品の作成
public
:npm start実行時にファイルのドキュメントルートディレクトリを検索する
むはんのうじょうたい
反応前
pure.html<html>
<body>
<!-- <header>
<h1>WEB</h1>
world wide web!
</header> -->
<!-- header * 99123123개 라면 ? 매우 혼란스러울 것 -->
<!-- 그렇다면 ? -->
<!-- <Subject></Subject> 이렇게만 적어도기능은 같고 알기 쉽게 된다면 훨씬 편리할 것. -->
<nav>
<ul>
<li><a href="1.html"></a>HTML</li>
<li><a href="3.html"></a>CSS</li>
<li><a href="2.html"></a>JS</li>
</ul>
</nav>
<article>
<h2>HTML</h2>
HTML is HyperText Markup Language.
</article>
</body>
</html>
創造<Subject></Subject>App.js
製造
<html>
<body>
<!-- <header>
<h1>WEB</h1>
world wide web!
</header> -->
<!-- header * 99123123개 라면 ? 매우 혼란스러울 것 -->
<!-- 그렇다면 ? -->
<!-- <Subject></Subject> 이렇게만 적어도기능은 같고 알기 쉽게 된다면 훨씬 편리할 것. -->
<nav>
<ul>
<li><a href="1.html"></a>HTML</li>
<li><a href="3.html"></a>CSS</li>
<li><a href="2.html"></a>JS</li>
</ul>
</nav>
<article>
<h2>HTML</h2>
HTML is HyperText Markup Language.
</article>
</body>
</html>
import React, { Component } from "react"
import "./App.css"
class Subject extends Component {
//render : 필수
render() {
return (
// 중요 ! 컴포넌트는 하나의 최상위 태그만 있을 수 있다.
<header>
<h1>WEB</h1>
world wide web!
</header>
)
}
}
// ++ 추가로 만든 부분
class TOC extends Component {
render() {
return (
<nav>
<ul>
<li>
<a href="1.html"></a>HTML
</li>
<li>
<a href="3.html"></a>CSS
</li>
<li>
<a href="2.html"></a>JS
</li>
</ul>
</nav>
)
}
}
class Content extends Component {
render() {
return (
<article>
<h2>HTML</h2>
HTML is HyperText Markup Language.
</article>
)
}
}// 클래스형
// 컴포넌트를 만드느 코드부분
class App extends Component {
render() {
return (
<div className="App">
<Subject></Subject>
<TOC></TOC>
<Content></Content>
</div>
)
}
}
export default App
Webブラウザは反応を知らない.
これは、JSX言語でプレゼンテーションすると、HTMLタグがWebブラウザに適用されるためです.
類似のJavaScript(!=JavaScript)
: JSX
create-act-app JSXをJSX言語に変換
Reference
この問題について(React_2), 我々は、より多くの情報をここで見つけました https://velog.io/@aksel26/React2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol