230112 React project

2023. 1. 12. 12:05·Skills/React

SPA (single page application)
- main page(header, main component, footer)
- sub page(header, sub component, footer)
- detail page(header, detail component, footer)
=> Route 필요

Virtual DOM
- 업데이트 된 부분만 component 가져와서 redering => routing이라 함

 


* 방법
1. TERMINAL 접속


2. npm init react-app test(파일명)

(설치하는 방법은 다양함)

- npx create-react-app test
- npm i -g react-app test

 

npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd test
  npm start
  
  
=> 빠져나오려면 ctrl + c


3. 파일 살펴보기 
- public: 정적폴더 (.dist와 같은 역할)
- 레거시 기능: 이제 곧 없어질 기능들 React.StrictMode가 걸러냄(index.js) => 이것 때문에 기능 구현이 안된다면 빼버려도 됨


4. src 파일 안에 Component 파일 만듦


5. MyComponent.js 작성하고 App.js에 연결해줌

 

 

 

SCSS
- npm i scss
- npm start
- npm i styled-components

- npm i -g node-sass
- Live Sass Compiler

'Skills > React' 카테고리의 다른 글

230112 React useEffect, useReduser  (1) 2023.01.12
230106 React function, component  (0) 2023.01.06
230106 React Props, 비구조화 할당(구조분해 할당)  (1) 2023.01.06
230105 React syntax 실전  (2) 2023.01.05
230105 React syntax  (0) 2023.01.05
'Skills/React' 카테고리의 다른 글
  • 230112 React useEffect, useReduser
  • 230106 React function, component
  • 230106 React Props, 비구조화 할당(구조분해 할당)
  • 230105 React syntax 실전
개발자 윤구나
개발자 윤구나
개발 공부를 하고 있습니다. Let's go!
  • 개발자 윤구나
    이것은 무엇?????
    개발자 윤구나
    • 분류 전체보기
      • Skills
        • Java
        • Database
        • Flutter, Dart
        • JavaScript
        • React
        • HTML5
        • CSS3, SCSS
        • PHP
        • C#
        • Unity
        • Algorithm
        • GIT·GitHub
        • 그 외
      • Book Review
      • IT NEWS
      • 설계
      • 자기 계발
  • 블로그 메뉴

    • 홈
    • 방명록
  • 인기 글

  • 최근 글

  • 최근 댓글

  • 전체
    오늘
    어제
  • hELLO· Designed By정상우.v4.10.3
개발자 윤구나
230112 React project
상단으로

티스토리툴바