[리액트 기초] Vs code 설정 , 자동 저장, Fragment, App.js, 조건문, 인라인 스타일링, 특징, 주석

 Vs code 설정 

1. ESlint : 문법확인

2. Prettier : 가독성

3. 자동저장 (설정 -> autosave)

4. ReactJS CodeSnippet : 코드 스니펫

rsc + enter (또는 tab) 

5. VS-Code-Styled-Componenets : 색상

6. indent-rainbow : 블록 색상으로 표시

 

자동 저장

File -> Auto Save

Fragment = <>

return (
	<>
    	hello
    </>
)

 

 

 

 App.js

import React from 'react';

const App = () => {
  const name = "Judith-hopps"
  return (
    <div>
      {name}
    </div>
  );
};

export default App;

 

 

 

조건문

 

1. 삼항 연산식

{ 조건식 ? () : () }

 

 

 

2. And 연산자

{ 조건식&&() }

 

 

 

 

인라인 스타일링

- 카멜 표기 

 font-size ==> fontSize

- 변수

const style = {fontSize:'10px', padding:15 }
return <div style={style}> </div>

 

 

 

특징

class => className

태그는 항상 닫을 것

{/* 주석 */}

// or /*   */ 는 화면에 항상 표기됨.