728x90
1. 리액트 개발 환경 셋팅
- node_modules 폴더 : 라이브러리 코드 보관함
- public 폴더 : static 파일 모아놓는 곳 , 퍼블리싱 파일, 이미지 파일 잠깐 보관하고 싶을 때
- src 폴더 : 가장 중요, 코드는 여기서 짬
- js 파일에 어케 html 짜누?
- 정보를 가진 App.js 를 index.html에 집어 넣어주는 index.js 파일!!!!
- pakage.json : 프로젝트 정보
- app.js 에서 터미널 실행 -> npm start 입력해 로컬 서버 보면서 작업
- app.js 안의 코드는 JSX
- JSX : .js 파일에서 쓰는 html 대용품
2. JSX 문법 1
- JSX 안에서는 class가 아닌 className을 사용해야 함
3. JSX 문법 2
- 변수 넣을 때는 {중괄호}
- 데이터바인딩(데이터를 꽂아 넣음)은 {중괄호} 사용!!!
/// App.js 파일
import logo from './logo.svg';
import './App.css';
function App() {
let post = '강남 우동 맛집';
return (
<div className="App">
<div className="black-nav">
<h4>아무튼 블로그임</h4>
</div>
<h4>{post}</h4>
</div>
);
}
export default App;
4. JSX 문법 3
- style 넣을 땐 style={{스타일명: '값'}}
- 오브젝트 형식으로 넣어주어야 함
- font-size -> fontSize로 입력해야 함 (카멜 케이스)
참고 : 코딩애플 리액트 강의
728x90
'TIL > React' 카테고리의 다른 글
리액트에서 Element를 생성하는 법 (feat. Babel 사용 이유) (0) | 2022.05.02 |
---|---|
state는 또 뭐야 (0) | 2022.04.22 |