はんのうきそ
46752 ワード
01反応器はフレームですか、それともライブラリですか。
反応を検索すると
Google:Webフレームワーク
公式ホームページ:ライブラリ
フレーム・ライブラリの違い
ライブラリにフォルダ構造がありません
フレームワークにフォルダ構造を持つ
反応器は大きく4つのライブラリに分かれている.
フレームワークがもっと適当だと思います.
リアクターの特徴は、[変化した値](Variation Value)の状態だけを把握して再レンダリングすることです.
<!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>Document</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@6/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
<!-- js에서 버튼을 만드는 방법 -->
<!-- <button>버튼</button> -->
<!-- 리액트로 버튼을 만드는 방법(원리) -->
<script type="text/babel">
const id = 'ingoo2'
const btn = <button id={id}>버튼</button>
class App extends React.Component{
render(){
return (
<button>클래스 컴포넌트 버튼</button>
)
}
}
ReactDOM.render(
<App />
,document.querySelector('#root')
)
</script>
</body>
</html>
逆にjsを使用するとdivエントリ全体が変更されることを確認できます.
これは,変更値のみを変更する反応の効率が高いことを意味する.
4つの反応器を構成するライブラリ
1)react:react構文を含むライブラリ
2)react-dom:変更された値をチェックして、その領域のロールのみを変更する
3)babel:jsx=>js領域HTMLの使用を許可-フェイスブックから借用
4)webpack-facebook借用
少なくとも2つのライブラリさえあれば、反応器は反応器を生成することができる。
02 ReactDOM.render()
反応器は、単一ページアプリケーション(SPA)の作成に使用されます.
ReactDOM.render()
ReactDOM.render(
<App /> // 첫번째 인자값 : 내가 넣을 내용
,document.querySelector('#root') // 두번재 인자값 : 내가 넣을 위치
)
(1)別名=>a,button,input,liなど
(2)属性値(オブジェクト)=>inputtype="text"
(3)innerHTMLコンテンツ
03構成部品タイプ
構成部品は、Elementを関数またはクラスの動作として回収可能な単位です.
2種類の構成部品があります
ㄱ)類部品(過去によく使われたもの)
ㄴ)関数構成部品(現在主に使用)
デフォルトでは、RealtDOMは1つの構成部品のみを実行します.
(構成部品はJSX形式で使用)
出典:反応公式文書
ㄴHTMLで反応を実行するには、次のリンクをロードする必要があります.
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> //react 사용
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> // reactDOM 사용
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> // babel 사용<!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>Document</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@6/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
<!-- js에서 버튼을 만드는 방법 -->
<!-- <button>버튼</button> -->
<!-- 리액트로 버튼을 만드는 방법(원리) -->
<script type="text/babel">
//React-dom.render()
//첫번째 인자값 : 내가 넣을 내용
//두번재 인자값 : 내가 넣을 위치 => document.querySelector('#root')
//인자 값이 3개 들어감
//(1) 엘리먼트 명 => a, button, input, li 등등
//(2) 속성값(object) => <input type="text">
//(3) innerHTML 내용물 => <span>하이</span>
// const btn = React.createElement(('button', { id : 'heidi', class : 'heidi2'}, '버튼'))
const id = 'heidi2'
const btn = <button id={id}>버튼</button>
class App extends React.Component{
render(){
return (
<button>클래스 컴포넌트 버튼</button>
)
}
}
ReactDOM.render(
<App />
,document.querySelector('#root')
)
</script>
</body>
</html>
クラス構成部品としてテーブルを構成する場合。
<!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>Document</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@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
//tables 컴포넌트
//subject 컴포넌트
//content 컴포넌트
class Tables extends React.Component{
render(){
return(
<table>
<thead>
<Subject />
</thead>
<tbody>
<Content />
<Content />
<Content />
<Content />
<Content />
<tr>
<Tail />
</tr>
</tbody>
</table>
)
}
}
class Tail extends React.Component{
render(){
return(
<React.Fragment>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</React.Fragment>
)
}
}
class Subject extends React.Component{
render(){
return(
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
</tr>
)
}
}
class Content extends React.Component{
render(){
return(
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
)
}
}
class App extends React.Component{
render(){
return(
<Tables />
)
}
}
ReactDOM.render(
<App />
,document.querySelector('#root')
)
</script>
</body>
</html>テーブルを関数構成部品として構成する場合。
<body>
<div id="root"></div>
<script type="text/babel">
const Content = () => {
return(
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
)
}
const Subject = () => {
return(
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
</tr>
)
}
const Table = () => {
return(
<table>
<thead>
<Subject />
</thead>
<tbody>
<Content />
<Content />
<Content />
<Content />
<Content />
</tbody>
</table>
)
}
class App extends React.Component{
render(){
return(
<Table />
)
}
}
ReactDOM.render(<App />, document.querySelector('#root'))
</script>
</body>04 webpackとは?
ㄴブラウザと通信する複数の複雑なjsファイルを単一のjsファイルのバンドルパッケージに翻訳する.
複数人で1ページのアプリケーションを開発し、変数名などの競合を防止
viteがwebspackの代わりに現れた
これはもっと勉強しなければならない内容です.
Reference
この問題について(はんのうきそ), 我々は、より多くの情報をここで見つけました https://velog.io/@goldenoriole34/React-기초テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol