리액트설치

터미널에 

$ npm create react-app react-event

npm으로도 설치가능하다

$ npx create-react-app 폴더명

입력해주면 react가 설치가되어진다

 

npx - 라이브러리 설치도와주는 명령어(node.js설치 되어야 이용가능)

 

create-react-app 라이브러리이름

리액트 셋팅이 다된 boilerplate 만들기 쉽게 도와주는 라이브러리

 

 

설치다 되었으면 

$ cd 폴더명

$ npm start

 

설치한 폴더명들어가기

 

코드작성되어있는 것을 화면에 띄우기

 

 

이렇게 첫화면이 나온다

 

 

src > app.js 가 메인페이지가 된다

react는 jsx문법을 사용해줘서 

html의 class 가 jsx는 className으로 작성해줘야한다

 

 

 

app.js 에 작성해줬다

function app () {} 함수안에 함수와 태그를 작성해줄수있다

html의 class 가 react에선 className이라고 작성해줘야한다

 

 

let text = '변수입니다'
  
  function se() {
    return '함수입니다'
  }

h4태그에다가 위에 라고 작성 해준것을 {} 데이터바인딩으로 넣어줄수있다 함수도 마찬가지다

{} 안에는 변수명과 함수등 작성해줄수있다 

 

 

import './App.css';

위의 경로 css를 꾸며줄수있다

App.css 에다가 className작성해주었던 class-name을 적어주어 꾸며주겟다

 

 

기존 css와 동일하다

 

 

css를 태그안에 직접style을 넣어서 지정해줄수있다

<h4 style={{color:'purple',fontSize:'30px'}}> 태그에 바로 스타일</h4>

이때 중괄호를 넣어서 객체 형식으로 사용해줘야한다 이중 중괄호를 사용해줘야한다

fontSize로 camelCase로 작성해줘야한다 

style = { {이름: 값} }

 

style을 사용해줄떄 이중 중괄호를 작성해주어야한다

style안에도 변수명도 와줄수있다 style ={변수명} 으로 작성해주면된다

 

이미지도 데이터바인딩으로 넣어줄수있다

import logo from './logo.svg';

import해준것을 들고와줄수있다

 

 

<img src={logo} alt="logo"/>

{}를 사용해줘서 import의 logo를 들고와줄수있다