[React]리액트 맛보기

index.js 작성

먼저 리액트를 사용하려면 index.js에 설정을 해줘야 한다.

import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

위와 같이 코드를 작성하면 React를 사용 할 수 있게 된다.
여기서 Hello World를 출력해보도록 하겠다..

root.render (
	<div>
  		<p>Hello World</p>
  	</div>
);

이런 식으로 root.render안에 html코드를 작성해주면 된다.

※ 항상 하나의 박스로 html코드를 감싸주어야 한다.

---

간단한 예제

이게 CSS와 JSX를 이용하여 다음과 같은 페이지를 만들어 볼 것이다.

파일 구조는 App.js Main.js Nav.js로 나누어서 만들 것이다.
먼저 위에 header 부분인 Nav.js를 먼저 작성해주도록 하겠다.

Nav.js

export default function Nav() {
  return (
    <nav>
      <img src="사진 파일명" />
      <h3>ReactFacts</h3>
      <h4>React Coures - Project1</h4>
    </nav>
  );
}

리액트는 export import를 이용해서 파일끼리 모듈을 주고 받을 수 있다.
다음은 section 부분인 Main.js를 작성해주도록 하겠다.

Main.js

export default function Main() {
  return (
    <main>
      <h1>Fun facts about React</h1>
      <ul>
        <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>
    </main>
  );
}

항상 하나의 박스로 묶어준다는 것을 잊지 않도록 한다.
다음은 Nav.js와 Main.js파일을 묶어줄 App.js 파일을 작성해주도록 하겠다.

App.js

import Main from "./Main";
import Nav from "./Nav";
import "./styles.css";

export default function App() {
  return (
    <div>
      <Nav />
      <Main />
    </div>
  );
}

이런식으로 import를 하면 파일들을 불러 올 수 있다. 그리고 여기서 CSS파일을 불러오는데 CSS파일은 다음과 같다.

style.css

* {
  margin: 0;
}
.App {
  font-family: sans-serif;
  text-align: center;
}
nav {
  background-color: #21222a;
  width: 100%;
  height: 91px;
  display: flex;
  align-items: center;
}
img {
  position: absolute;
  left: 3%;
}
h3 {
  color: #61dafb;
  position: absolute;
  left: 6%;

  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 30px;
  line-height: 27px;
  letter-spacing: -0.05em;
}
h4 {
  position: absolute;
  left: 80%;

  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 19px;
  text-align: right;

  color: #deebf8;
}
main {
  background-color: #282d35;
  color: white;
  height: 690px;
  background-image: url(사진 파일명);
  background-repeat: no-repeat;
  background-position: right 60%;
}
h1 {
  position: absolute;
  width: 424px;
  height: 41px;
  left: 100px;
  top: 148px;

  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 39.06px;
  line-height: 47px;
  letter-spacing: -0.05em;
}
ul {
  position: absolute;
  width: 1000;
  height: 100px;
  left: 100px;
  top: 220px;

  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 30px;
  line-height: 19px;
}
li {
  line-height: 19px;
  padding: 20px;
}
li::marker {
  color: #61dafb;
}

이제 우리가 만들었던 파일들을 App.js 파일로 다 불러왔기 때문에 index.js에서 App.js 파일을 불러와 사용해 주기만 하면 된다.

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

이제 홈페이지가 완성 되었다.