jsxデフォルト構文、react

18952 ワード
React テキストリンク

jsxデフォルト構文




react

<html>
  <body>
  	<top></top>
	<sidebar></sidebar>
  </body>
</html>
topおよびsidebarに類似する標識をComponentと呼ぶ
---毒性を大幅に増加させる.
----->再利用
----->メンテナンス남이 만든 component를 사용할 수 있게 된다

ドライバ環境の構築


npm = node.jsのアプリショップ
npm install-g(グローバル実行)create-react-app
権限がない場合.
sudo npm install
create-act-app-vバージョンの確認
create-react-app . 開発に必要なすべてのインストール
npm run start後起動ctrl+cでクローズ
npm:インストール
npx:一度インストールして消去する
<div id="root"> 이 안에 들어가도록 약속해놓음 (html) </div>
idがrootのタグに含まれるcomponentはsrc(ソース)
ファイルを変更して作成
実際のサービスでbuildを使用する
npm run buildはサーバを終了します.
npx serve-s build(buildをディレクトリとする)
速度がめっきり上がる
デフォルトではApp.jsファイルへ
構成部品のコードの作成
import logo from “./logo.svg”;
import React, { Component } from “react”;
import “./App.css”;

class App extends Component {
  render() {
    return <div className=“App”>Hello, React!!</div>;
  }
}
export default App;
こんな形にします.(レンダリングと呼ばれる方法があります)
import React, { Component } from “react”;
import “./App.css”;

class App extends Component {
  render() {
    return (
    
    );
  }
}
デフォルトのシェイプを記憶

構成部品の形状を変更するには

class Subject extends Component {
  render() {
    // function 생략
    return (
      <header>
        <h1>{this.props.title}</h1>
        {this.props.sub}
      </header>
    );
  }
}
class App extends Component {
  // 유사 자바스크립트이다. 자바스크립트는 아님.
  render() {
    return (
      <div className=“App”>
        <Subject title=“WEB” sub=“world wide app”> </Subject>
        <Subject title=“React” sub=“For UI”></Subject>
        <TOC></TOC>
        <Content></Content>
      </div>
    );
  }
}
export default App;
{this.props.title}を使用すると、必要に応じてコンテンツを変更できます.

ファイルを個別に保存してインポート、エクスポート

import logo from “./logo.svg”;
import React, { Component } from “react”;
import “./App.css”;
import TOC from “./components/TOC”;
import Content from “./components/Content”;
import Subject from “./components/Subject”;
//하나의 컴포넌트는 하나의 태그로 감싸줘야한다.
//여기 이 TOC 대신에 다른파일에서 가져오려면 import TOC from ‘./components/TOC’
//  TOC 목차라는 뜻
// class TOC extends Component {
//   render() {
//     return (
//       <nav>
//         <ul>
//           <li>
//             <a href=“1.html”>HTML</a>
//           </li>
//           <li>
//             <a href=“2.html”>CSS</a>
//           </li>
//           <li>
//             <a href=“3.html”>JavaScript</a>
//           </li>
//         </ul>
//       </nav>
//     );
//   }
// }
// class Content extends Component {
//   render() {
//     return (
//       <article>
//         <h2>{this.props.title}</h2>
//         {this.props.desc}
//       </article>
//     );
//   }
// }
// class Subject extends Component {
//   render() {
    // function 생략
//     return (
//       <header>
//         <h1>{this.props.title}</h1>
//         {this.props.sub}
//       </header>
//     );
//   }
// }
class App extends Component {
  // 유사 자바스크립트이다. 자바스크립트는 아님.
  render() {
    return (
      <div className=“App”>
        <Subject title=“WEB” sub=“world wide app”></Subject>
        <Subject title=“React” sub=“For UI”></Subject>
        <TOC></TOC>
        <Content
          title=“HTML”
          desc=“HTML is HYPERText Markup Language”
        ></Content>
      </div>
    );
  }
}
export default App;
これらの冗長なアプリケーションのコードをすべて削除し、個別にファイルとして保存します.
アプリケーションはimport Content from "./components/Content"を含む
これで書くことができます../components/Contentファイル
import React, { Component } from “react”; // 고정!!!!
class Content extends Component {
  render() {
    return (
      <article>
        <h2>{this.props.title}</h2>
        {this.props.desc}
      </article>
    );
  }
}
export default Content; //export default 고정!!
これで外に出すことができます.複数ある場合は複数使用可能
TIL 48:論理回帰
Start learning Docker