[React] 리액트 설치 및 실행하기

1. NODE.JS 설치

2. extensions에서 다음 항목 설치

3. 터미널로 프로젝트 생성

이렇게 생성하면 오류가 난다... ?

==> 설치한 파일과 경로가 맞지 않아서 생기는 문제 !  위치를 정확히 설정해주고 재설치 해본다.

설치완료 ! 

이렇게 자동으로 뜬다. 이 화면이 확인이 된다면, 리액트를 사용할 준비가 되었다는 뜻이

이 코드는 React 애플리케이션의 기본적인 구조를 보여줍니다. 각 부분에 대한 설명은 다음과 같습니다:

1. import logo from './logo.svg';: logo.svg 파일을 가져와서 logo라는 변수에 할당합니다. 이 이미지는 앱의 로고로 사용됩니다.
2. import './App.css';: App.css 파일을 가져와서 현재 파일에서 사용합니다. 이 파일에는 애플리케이션의 스타일이 정의되어 있을 것으로 예상됩니다.
3. function App() { ... }: App이라는 함수 컴포넌트를 정의합니다. 이 컴포넌트는 React 애플리케이션의 진입점 역할을 합니다. 즉, 이 함수 컴포넌트가 렌더링되면 화면에 보여질 내용을 정의합니다.
4. return ( ... );: JSX 문법을 사용하여 애플리케이션의 UI를 정의합니다. 이 부분은 애플리케이션이 화면에 표시되는 내용을 포함합니다.
5. <div className="App"> ... </div>: 클래스 이름이 "App"인 <div> 요소를 생성합니다. 이 요소는 애플리케이션의 루트 요소로 사용됩니다.
6. <header className="App-header"> ... </header>: 클래스 이름이 "App-header"인 <header> 요소를 생성합니다. 이 요소는 애플리케이션의 헤더 부분으로 사용됩니다.
7. <img src={logo} className="App-logo" alt="logo" />: logo 이미지를 보여주는 <img> 요소를 생성합니다. 클래스 이름이 "App-logo"로 지정되어 있습니다.
8. <p> ... </p>: 텍스트를 보여주는 <p> 요소를 생성합니다. 이 부분은 "Edit <code>src/App.js</code> and save to reload."라는 텍스트를 보여줍니다.
9. ... : 외부 링크를 가리키는 <a> 요소를 생성합니다. 이 요소는 "Learn React"라는 텍스트를 보여주고, 클릭 시 https://reactjs.org로 이동합니다. noreferrer와 noopener는 보안 관련 속성입니다.
10. export default App;: App 함수 컴포넌트를 내보냅니다. 이것은 이 파일에서 정의된 기본 내보내기로, 다른 파일에서 이 컴포넌트를 가져와 사용할 수 있도록 합니다.

이렇게 구성된 코드는 간단한 React 애플리케이션의 기본 구조를 보여주며, 실제 애플리케이션에서는 이 구조를 기반으로 필요한 기능과 디자인을 추가하여 확장할 수 있습니다.

# Created by https://www.toptal.com/developers/gitignore/api/react
# Edit at https://www.toptal.com/developers/gitignore?templates=react

### react ###
.DS_*
*.log
logs
**/*.backup.*
**/*.back.*

node_modules
bower_components

*.sublime*

psd
thumb
sketch

# End of https://www.toptal.com/developers/gitignore/api/react

깃허브에 올리기 전 ignore로 파일 빼주기 -> 깃허브 데스크톱 ( Repository settings )
⇒ 리액트 용량이 너무 커서 필요한 것만 업로드하기 위함 ( module 부분 )

command창에서 깃에 올려져 있는 프로젝트를 받아서 실행 모듈 설치

1. cd 01.my-app 엔터(프로젝트로 들어가기)
2. npm install (모듈 설치 후 실행)