(TIL)React JSX構文

15578 ワード
テキストリンク

JSX構文


ラベルにclassNameを付けます。

// app.js
import './App.css';

<div className="클래스이름">
</div>
// app.css
.클래스이름{
	css주기
}

レスポンスにデータをバインドする


Binding:受信したデータをjsに保存しhtml形式で出力
function App() {

  let post = "강남";

  return (
    <div className="App">
      <div className="b-nav">
        뿌에에
      </div>
      <h4> 블로그 글 </h4>
      <h4> { post }</h4>
    </div>
  );
}

export default App;
出力結果

括弧でバインドできます.
function App() {

  function 함수() {
    return 100;
  }

  return (
    <div className="App">
      <div className="b-nav">
        뿌에에
      </div>
      <h4> 블로그 글 </h4>
      <h4> { 함수() }</h4>
    </div>
  );
}

export default App;

変数だけでなく、関数もバインドできます.
import logo from './logo.svg';
import './App.css';

function App() {

  return (
    <div className="App">
      <div className="b-nav">
        뿌에에
      </div>
      <h4> 블로그 글 </h4>
      <img src = {logo} />
    </div>
  );
}

export default App;

src、id、hrefなどの属性に{変数名、関数}などを加えてバインドすることもできます

JSXでスタイルを表示する方法

function App() {
  return (
    <div className="App">
      <div style={{color: 'blue'}}> 블로그 글 </div>
    </div>
  );
}

export default App;

style={objectデータ型}
function App() {
  return (
    <div className="App">
      <div style={{color: 'blue', fontSize:'30px'}}> 블로그 글 </div>
    </div>
  );
}

export default App;

スタイルを連続的に使用する場合は、カンマで連用します.
function App() {

  let post = {color: 'blue', fontSize:'30px'};

  return (
    <div className="App">
      <div style={ post }> 블로그 글 </div>
    </div>
  );
}

export default App;
スタイルは変数名として指定して{}で使用することもできます.
中間文字出力:substring()
[Java]Programmersトラベルパス(DFS)