> For the complete documentation index, see [llms.txt](https://pasahu1805.gitbook.io/react-1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pasahu1805.gitbook.io/react-1/master.md).
# React
## 1.Node.js
{% embed url="" %}
### 학원용(node-v13.14.0-x64.msi)
{% embed url="" %}
#### 버전이랑 체크하기
## 2.npm 설치
노드 패키지 매니저(npm)
```
npm -v
```
### zeplin 설치
{% embed url="" %}
## 3.React Developer Tools 설치(크롬앱스토어)
## 4.git 설치
{% embed url="" %}
## 5.리액트 앱 만들기
명령 프롬프트를 이용하여 현재 만들고 싶은 폴더로 이동합니다.
```
npx create-react-app portfolio
```
## 6. 기본 셋팅하기
### App.js
```jsx
import React from 'react';
function App(){
return
Hello
}
export default App;
```
### index.js
```jsx
import React from 'react';
import ReactDom from 'react-dom';
import App from './App';
ReactDom.render(, document.getElementById('root'));
```
### index
```jsx
React Portfolio
```
## 7. 컴퍼넌트 만들기
### Visual Studio Code 에 복붙
## 8. props 개념 익히기
## 9. 라우터 만들기
리액트는 싱글 페이지로 구성되어 있기 때문에 가상의 주소를 만들어 주어야 합니다. 라우터를 이용하여 URL을 통해 특정 컴퍼넌트를 불러와서 사이트를 구성할 것입니다. 우선 react-router-dom 패키지를 설치합니다.
```jsx
npm install react-router-dom
```
```jsx
import React from 'react';
import Main from './routes/Main';
import About from './routes/About';
import Reference from './routes/Reference';
import Script from './routes/Script';
import Animation from './routes/Animation';
import Site from './routes/Site';
import Contact from './routes/Contact';
import Header from './components/Header';
import { HashRouter, Route} from 'react-router-dom';
function App(){
return (
)
}
export default App;
/*
라우터를 연동하여 주소를 만들어줍니다.
App.js 에 import 해줍니다.
```
## 10. scss 설치하기
```jsx
npm install node-sass
```
```jsx
npm uninstall node-sass // 버전 호환 안될시 삭제후 재설
npm install node-sass@4.14.1
```
## 11.npm install axios 설치하기
```jsx
npm install axios
```
## 12.vue 설치하기
```jsx
npm i -g @vue/cli
```
### 명령 프롬프트 사용하여 설
```jsx
vue create _______
```
## firebase 배
Visual Studio => Task Explorer 다운
TERMINAL , 명령프롬프트 사용
```jsx
npm install -g firebase-tools
firebase login -> Y
firebase init -> Y -> Hosting -> use an existing project -> vue900.class -> dist -> N -> N
firebase init -> Y -> Hosting -> use an existing project -> react999.class -> build -> N -> N
```