More than 3 years have passed since last update.

【React】Reactで作る、ウェブページ（ヘッダー、フッター）

Posted at 2020-10-01

index.htmlのbody部分にjsを読みこむ記述をする。

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <link rel="stylesheet" href="stylesheet.css">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

このdiv id="root"の要素にjsファイルで記述した内容が入ってくる。

そして、jsファイルをsrcというディレクトリにまとめたとすると、
次の階層にcomponentsフォルダと、index.jsファイルがある。

このindex.jsに全てをまとめてrootに表示する記述がされている。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('root'));

最後に、ヘッダー、フッターがどのように読み込まれるかだけまとめておく。

App.jsにまとめてインポートして、index.jsに送り出している。

App.js

import React from 'react';
import Header from './Header';
import Main from './Main';
import Footer from './Footer';

class App extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <Main />
        <Footer />
      </div>
    );
  }
}

export default App;

components/footer.js

import React from 'react';

class Footer extends React.Component {
  render() {
    return (
      <div className='footer'>
        <div className='footer-inner'>
          <div className='footer-logo'>
            <img src='https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/type_logo.png' />
            <p>Learn to code, learn to creative.</p>
          </div>
          <ul className='footer-list'>
            <li>会社概要</li>
            <li>採用</li>
            <li>お問い合わせ</li>
          </ul>
        </div>
      </div>
    );
  }
}

export default Footer;

components/header.js

import React from 'react';

class Header extends React.Component {
  render() {
    return (
      <div className='header'>
        <div className='header-logo'>
          <img src='https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/character_logo.svg' />
        </div>
      </div>
    );
  }
}

export default Header;

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up