More than 3 years have passed since last update.

Reactの表示の仕組みとCSSの適用

Posted at 2020-06-20

プログラミングの勉強日記

2020年6月21日　Progate Lv.140
ReactⅡ

##表示の仕組み
　App.jsに書かれているJSXは最終的にHTMLに変換されることでブラウザに表示される。Reactのコードを実際にブラウザに表示するためには、index.jsとindex.htmlのファイルも必要である。

###App.jsとindex.jsとidex.htmlの関係

App.js

class App extends Component{
  render()
    return(
      <div>
        <h1>HelloWorld</h1>
      </div>
    );
  }
}

index.js

import App from './component/App';
ReactDOM.rendr(<App/>, document.getElementByld('root');

　ReactDOM.rendr(<App/>でApp.jsのJSX（render()の括弧内の部分）がHTMLに変換されている。

index.html

<body>
  <div id="root"></div>
</body>

　document.getElementByld('root')で指定したid名の場所に挿入される。index.jsでは('id名')を記述する。

##CSSの適用
　JSXは最終的にindex.htmlに挿入されてブラウザに表示する。なので、indx.html内でstylesheet.cssを読み込むとCSSを適用することができる。
　JSXにクラス名を付ける場合、HTMLと書き方が違う。className='クラス名'と書く。
　

index.html

<head>
  <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
  <div id="root">
    <!--ここにHTMLが挿入される-->
  </div>
</body>

App.js

render(){
  retunr(
    <div>
      <h1='title'>Hello World</h1>
      <p className='subTitle'>Hello React</p>
    </div>
  );
}

stylesheet.css

h1{ /*JSXのタグ名を指定してCSSを適用する*/
  color:red;
}
.subTitle{
  color:blue;
}