React 내부 자습서(1)
7836 단어 React
본 강좌의 목표
상단 내비게이션과 로그인 기능이 있는 일반 웹 페이지를 React의 SPA로 만드는 방법을 알아보세요.
아래와 같은 사이트를 만듭니다.
내부 구성원의 목표로서 목표는 Firebase를 이용하여 배경 논리를 제작하여 단독 도메인 Hosting을 실현하는 것이다.
시리즈
1: 간단한create-react-app 사용 방법 및 파일 설정
1 개요
전제 조건
React 개발 환경 구축
React의 개발 환경도 웹팩 등을 이용하여 0부터 자신의 취향에 따라 제작할 수 있지만 이 강좌를 참고할 수 있는 수준의 사람은 우선craete-react-app 명령을 이용하는 것이 좋다.
설치 도구
npm install -g create-react-app
프로젝트 (응용 프로그램) 제작 및 동작 확인
명령을 설치한 후 React 항목을 만듭니다.
항목 만들기
create-react-app react-tutorial
일단 동작 확인.
프로젝트 폴더로 이동하여 yarn start를 실행합니다.
cd react-tutorial
yarn start
쓰레기?문서 조직 및 구조 이해
생성할 때 각종 쓸모없는 파일 (public와 src 내) 이 있으니 정리해 보세요.
기준은 다음과 같은 구조가 있다.
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── serviceWorker.js
├──yarn.lock
└── node_modules
index.html
누구나 인덱스를 안다.html.많이 썼지만 중요한 점은
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
서비스워커 같은 건 당분간 필요 없으니까 꺼.
index.js에서 다음에 App을 편집합니다.js의 내용을 id='root'에 표시합니다!명령하다.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
App.js
많이 썼지만 일시적으로 Hello React로 표시되는 코드입니다.
App.js
import React from 'react';
import './App.css';
function App() {
return (
<div>
<p>Hello React.</p>
</div>
);
}
export default App;
쓸모없는 파일 삭제
이전에 사용하지 않은 파일을 삭제합니다.
rm -rf public/*.ico public/*.png public/*.json public/*.txt
rm -rf src/*.svg src/serviceWorker.js src/App.test.js
디렉토리 구조
여기까지의 일은 다음과 같다.
├── README.md
├── package.json
├── public
│ └── index.html
├── src
│ ├── App.css
│ ├── App.js
│ ├── index.css
│ └── index.js
├──yarn.lock
└── node_modules
동작 확인
중요한 파일을 삭제하고 움직이지 않으면 귀찮을 수 있으니 여기서 동작을 확인하는 것이 좋다.
yarn start
경품(CSS 재설정)
문자에 이상한 스타일이 있기 때문에 css를 리셋합니다.
index.css는 아래와 같다.
index.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
그것
Reference
이 문제에 관하여(React 내부 자습서(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/zaburo/items/99dc965d273f1922deae텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
