REACT_reactstrap Jumbotron

Jumbotron 은 대형 전관판의 의미하며, 넓은 영역에 눈에 띄게 정보를 표시해 사용자의 관심을 불러 일으킬 수 있다

 

- R046_ReactstrapJumbotron.js

import React, { Component } from 'react';
import { Jumbotron, Button } from 'reactstrap';

class R046_ReactstrapJumbotron extends Component {
    render() {
        return(
            <>
            <Jumbotron style={{backgroundColor: "#D38C7C"}}>
                <h1 className="display-4">REACT 200</h1>
                <p className="h4">Contrary to populr belief, Lorem Ipsum is not simpliy random text.</p>
                <hr className='my-2'/>
                <p> There are many variations of passages of Lorem Ipsum available.</p>
                <p className='lead'>
                    <Button color ="danger">Go Detail</Button>
                </p>
            </Jumbotron>
            </>
        )
    }
}

export default R046_ReactstrapJumbotron;

 

- Jumbotron은 사라져서 Jumbotron -> div로 수정 위에 코드랑 비교해보기

import React, { Component } from 'react';
import { Jumbotron, Button } from 'reactstrap';

class R046_ReactstrapJumbotron extends Component {
    render() {
        return(
            <>
            <div style={{backgroundColor: "#D38C7C"}}>
                <h1 className="display-4">REACT 200</h1>
                <p className="h4">Contrary to populr belief, Lorem Ipsum is not simpliy random text.</p>
                <hr className='my-2'/>
                <p> There are many variations of passages of Lorem Ipsum available.</p>
                <p className='lead'>
                    <Button color ="danger">Go Detail</Button>
                </p>
            </div>
            </>
        )
    }
}

export default R046_ReactstrapJumbotron;

 

- App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import Jumbotron from './R046_ReactstrapJumbotron'
import 'bootstrap/dist/css/bootstrap.css'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <Jumbotron/>
    </div>
  );
}

export default App;

 

결과