React project 1

리액트로 만든 첫번째 기본 프로젝트 코드를 살펴보자

index.html

<html>
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="root"></div>
    <script src="index.pack.js"></script>
  </body>
</html>

구글폰트 head 사이에 넣어준거 보이고
당연히 css랑 연결해줘야 하니까

<link rel="stylesheet" href="style.css" />

이거 넣어준거고
바디에는 root라고 저렇게 되어있는데
저게 우리가 js파일에 쓰는게 들어가는 공간이다ㅎ

<script src="index.pack.js"></script>

이건 js파일이랑 연결해주는걸로보인다...

component 폴더에 Navbar과 Main으로 나눠져 있는데

Navbar.js 부터 살펴보면

import React from "react";
import Logo from "./logo.png";

export default function Navbar() {
  return (
    <nav className="Navbar">
      <img src={Logo} alt="logo" />
      <h4 className="nav--title">React Course - Project 1</h4>
    </nav>
  );
}

당연히 react import 해줘야 하고
아 저기 저 로고 넣는건 내가 문서 검색해서 찾은건데
일단 저 png파일이 component똑같은 폴더에 들어가 있는 상황이고
저렇게 import를 해준다음에

  <img src={Logo} alt="logo" />

이렇게 적어주어야 이미지가 적용이 되었다.
그냥 img src이렇게 했더니 로고가 안떴었음...

다음으로 Main 컴포넌트 살펴보기
Main.js

import React from "react";

export default function Main() {
  return (
    <div className="main">
      <h1 className="main--title">Fun facts about React</h1>;
      <ul className="main--text">
        <li>Was first released in 2013</li>
        <li>Was originally created by Jordan Walke</li>
        <li>Has well over 100K stars on GitHub</li>
        <li>Is maintained by Facebook</li>
        <li>Powers thousands of enterprise apps, including mobile apps</li>
      </ul>
    </div>
  );
}

이 아이는 따로 설명할게 없고 암튼 이 아이들을 보면
component들을 export default로 export해준게 보인다.
App.js를 살펴보면

import React from "react";
import Main from "./components/Main.js";
import Navbar from "./components/Navbar.js";

export default function App() {
  return (
    <div className="container">
      <Navbar />
      <Main />
    </div>
  );
}

이렇게 얘내들을 import해준걸 볼 수 있다.
이렇게 App.js에 모인애들을 이제
index.js에 이렇게 rendering 해주면 된다.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

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

물론 import해주는건 잊지 말고!

style.css 살펴보면

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
}

.Navbar {
  display: flex;
  align-items: center;
  background-color: #21222a;
  width: 550px;
  height: 90px;
  padding: 30px 26px;
  justify-content: space-between;
}

.nav--title {
  color: #deebf8;
  font-size: 16px;
  font-weight: 600;
}

.main {
  background-color: #282d35;
  width: 550px;
  height: 459px;
  color: #ffffff;
}
.main--title {
  margin: 0;

  font-weight: 700;
  font-size: 39px;
  line-height: 47px;
  letter-spacing: -0.05em;

  padding: 57px 99px 0px 27px;
}

.main--text {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  max-width: 450px;
}

.main--text > li {
  margin: 20.36px;
}

.main--text > li::marker {
  font-size: 1.4rem;
  color: #61dafb;
}

흠 일단 튜터님이 쓴 코드 그대로 따라한게 아니라
내가 검색하면서 만든 CSS는 이렇다.. 결과는 똑같게 나옴..
참고로 저기 marker pseduo class는 처음배운건데
저걸써주면 리스트 애들만 딱 잡아줘서 변경해준다고 함.

MDN링크 들어가보자

::marker

그 다음 첼린지로 로고를 배경화면에 넣는게 있었는데
나는 구글로 검색해서 이렇게했다.

Main.js에

import React from "react";
import Group from "./Group.png";

export default function Main() {
  return (
    <div
      className="main"
      style={{
        backgroundImage: `url(${Group})`,
      }}
    >
      <h1 className="main--title">Fun facts about React</h1>
      <ul className="main--text">
        <li>Was first released in 2013</li>
        <li>Was originally created by Jordan Walke</li>
        <li>Has well over 100K stars on GitHub</li>
        <li>Is maintained by Facebook</li>
        <li>Powers thousands of enterprise apps, including mobile apps</li>
      </ul>
    </div>
  );
}

이미지 import해서 넣어주는거랑 같은 방식으로 했는데
나머지는 css로 이렇게 했다.

.main {
  background-color: #282d35;
  width: 550px;
  height: 459px;
  color: #ffffff;
  background-size: auto;
  background-repeat: no-repeat;
  background-position: right center;
}

background 여러 이미지들이 나오지 않게 no-repeat으로 했고
position도 저렇게 정해줌...
그리고나서 완성 ~~~

Author And Source

이 문제에 관하여(React project 1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pouryourlove/React-project-1

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

React project 1

Author And Source

좋은 웹페이지 즐겨찾기