React를 사용하여 반응형 웹 앱을 빌드하는 방법.

오늘은 react.js(javascript 라이브러리)를 사용하여 여러 장치에서 반응하는 웹 앱을 만드는 방법을 알려드리겠습니다.

우선, bootstrap v5를 사용하지만 그게 다가 아닙니다. 반응 웹 앱의 요소를 대상으로 하는 일부 사용자 지정 css 스타일을 추가하여 모든 플랫폼에서 내 프로젝트가 반응하도록 합니다.

여기 내 CSS 스타일이 있습니다. 이것을 index.css에 추가해야 합니다.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1rem;
}

body {
    min-height: 100vh;
}


.App {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100vh;
}

.section {
    background-color: whitesmoke;
    border: 1px solid blue;
    flex: 1;
}

이 몇 줄의 코드로 한 번 작성하고 어디에서나 실행할 수 있으며 여전히 반응이 좋습니다.

부트스트랩 5

저는 여전히 부트스트랩 그리드 시스템을 사용하여 프로젝트를 반응형으로 만듭니다.

 <section className="section">
        <div className="container">
            <div className="row">
             <div className="col-md-6">
                <div>
                   <p>I really like the female footballer sam kerr</p>
                </div>
             </div>
           </div>
        </div>
</section>           

소스 코드
내 website를 살펴볼 수 있습니다.

감사합니다, 팔로우해주세요

github