[React] WebStorm으로 React 설정하고 hello React 글씨를 화면에 출력하기.

 

 

 

참고로 React에 대해서 잘 모릅니다.

아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다!

 

 

---

 

 

 

React로 hello,React를
화면에 띄워보자.

 

 

 

 

1. 프로젝트 생성하기

 

□ Vite로 설정하기 

□ helloreact 이름 작성하기

□ Template에서 react 설정하기.

 

 

 

□ rolldown-vite [ No ] 라고 선택하기

 · rolldown: Vite의 롤업/ESBuild 자리를 대체할 예정인 Rust 번들러(Rolldown) 기반의 실험 패키지이다.

 · 안정/호환성이 더 중요하거나 처음 학습하는 경우→ No

 · 새로운 것 테스트·빌드속도 체감이 목표 → Yes

 

 

 

□ Install with npm and start now?에서 [ No ]를 선택한다.

 · 잘 모르겠는데 여기서 Yes를 선택하고 설치하면 텅 빈 프로젝트가 된다.

 · 그래서 따로 설치한다.

 

 

 

□ npm install

 · 여기서 untitled1은 캡처하려고 새롭게 만든 프로젝트 이름이라 무시해도 된다.

 

 

 

□ npm run dev

 · 여기서 untitled1은 캡처하려고 새롭게 만든 프로젝트 이름이라 무시해도 된다.

 

 

 

□ React 프로젝트 완성!

 

 

 

 

 

---

 

 

 

 

 

2. hello React 화면 출력시키기.

 

□ App.jsx 코드 작성하기.

export default function App() {
  return <div style={{ padding: 50, fontSize: 32}}> hello REACT </div>;
}

export default는 이 파일의 기본 내보내기이다. 기본 내보내기는 파일당 1개만 가능하다. funtction App은 함수형 컴포넌트 선언이다. 컴포넌트 이름은 반드시 대문자로 시작해야한다.

Vue에서는 script, template, style로 각 기능이 나뉘어서 적었는데, 여기선 어떻게 하는지 아직 잘 모르겠다. 다음에 좀 더 구체적으로(?) 글씨를 설정해보도록 하겠다!

 

 

□ 화면 출력

 · localhost:5173