리액트 기초문법

 

JSX 문법 . 

 

index.html root에 있는 자리를 index. js가 랜더링을 통해 app.js로 그린다 .

 

필요한 라이브러리는 index.html head부분에 넣는다 .

 

import logo from './logo.svg';
import './App.css';

function App() {
  return <div>안녕1123123</div>;
}

export default App;

 

자바스크립트 파일에 html이 들어감 . 

function안에 html을 넣을 수 있는 것 jsx문법.

 

 

리액트에서 페이지를 이동한다 ( body의 내용이 바뀌는것 SPA single page application , 절대 화면이 반짝이지 않는다)

<a> 태그 불가능. ( 화면 반짝이는 이동- > 단일 화면이기떄문에. )

 

1)))  react는 하나의 태그만 리턴해준다. 무조건 ! 

return <div>안녕 <div> <h1>헤딩태그 </h1> -- > 불가 

 

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div>
      <div>안녕!!</div>
      <h1>헤딩태그</h1>
      <hr />
    </div>
  );
}

export default App;

 가능. 

 

 

 

2) 변수 선언은 let 또는 const로만 해야함. (var은 x)--> 일반적인 다른 프로그래밍 언어와 변수범위가 불일치하기떄문에. (scope가이상함, 헷갈림. )

let 변수 , const 상수. 

3) if사용 불가능 -> 삼항연산자 사용가능 (조건 ? 값(true : 값(false) ) 

 

import logo from './logo.svg';
import './App.css';

let a = 10;
const b = 20;

function App() {
  return (
    <div>
      <div>안녕!! {a}</div>
      <h1>헤딩태그{a === 10 ? '10입니다.' : '10이아닙니다.'}</h1>
      <hr />
    </div>
  );
}

export default App;

 

 

undefined -> 선언은 되었는데 값은 지정이 안된 변수.

 

4) css 디자인  -> 내부에 적는 방법(비추) ,외부 파일에 적는 방법, 라이브러리 사용(부트스트랩,컴포넌트 스타일) 

import logo from './logo.svg';
import './App.css';

const mystyle = {
  color: 'red',
};

let a = 10;
const b = 20;

function App() {
  return (
    <div>
      <div style={mystyle}>안녕!! {a}</div>
      <h1>헤딩태그{a === 10 ? '10입니다.' : '10이아닙니다.'}</h1>
      <hr />
    </div>
  );
}

export default App;

 

외부 파일에 적기 

app.js

import logo from './logo.svg';
import './App.css';

const mystyle = {
  color: 'red',
};

let a = 10;
const b = 20;

function App() {
  return (
    <div>
      <div style={mystyle}>안녕!! {a}</div>
      <h1 className="box-style">
        헤딩태그{a === 10 ? '10입니다.' : '10이아닙니다.'}
      </h1>
      <hr />
    </div>
  );
}

export default App;

app.css

.box-style {
color :blue;
}