[React] 내가 보려고 쓴 개발환경 셋팅하기

👁‍🗨 create app 리액트 라이브러리 설치하기 

 npx create-react-app blog

 

node_modules : 라이브러리 코드 보관

public폴더 : static  파일 모아놓는곳

src : 소스코드 보관함

package.json : 라이브러리 정보

npm start

 

👁‍🗨 리액트 부트스트랩 라이브러리

npm install react-bootstrap bootstrap

<script
  src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js"
  crossorigin></script>
  
  <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
  integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
  crossorigin="anonymous"
/>

https://react-bootstrap.netlify.app/

React Bootstrap | React Bootstrap

👁‍🗨 class명은 className으로 씀

데이터 바인딩

: 변수에 있던 자료를 html에 넣는 것 {중괄호} 

let name = '하니';
<div className={name}>
<h4 id={name}>{name}</h4>
</div>

//<div className='하니'>
//<h4 id='하니'>하니</h4>
//</div>

 

👁‍🗨 style넣을땐

style={{ 속성 : '값' }}

카멜케이스로 작성

<h4 style={{color : 'skyblue', fontSize :'16px'}}>하니</h4>

 

과제) 좋아요버튼 & 갯수 UI 만들기

 

함수만드는법

방법1)

function 함수() {
}

onClick={함수}

방법2)

onClick={function(){ console.log(1) }

방법3) 

onClick={ () => { console.log(1) } }

 

과제2) 버튼 누르면 첫번째 게시글이 바뀌는 기능만들기

스프레드 문법

let copy = [...title];
copy[0] = 'love';
setTitle(copy)

 

과제3) 버튼 누르면 글제목 정렬 기능만들기

 

img url넣기

.main-bg{
  height:300px;
  /* background-image : url('./img/bg.png'); */
  background-size: cover;
  background-position: center;
}

import bg from './img/bg.png'
<div className='main-bg' style={{backgroundImage : 'url('+bg+')'}}></div>

axios로 baseURL설정하기

npm i axios

 

import axios from 'axios';

const instance = axios.create({
    baseURL: "http://localhost:3001"
});

export default instance;

 

<img src={"https://codingapple1.github.io/shop/shoes"+ (i+1) +".jpg"} width="80%" />