노마드 코드 무료 강의 리액트 공부 중입니다. 개념이나 이론 보다 히스토리를 남기기위해 기본 코드마만 적은것 입니다.
기본 설치후 리액트를 실행후,
필요 없는 파일은 다 지운 상태 (필요없다기 보다 내가 사용하지 않는.)
JSX와 Props 개념만 배운 후 중간 정리 단계.

폴더를 다 닫은 상태

public 폴더와 src 폴더 연 상태
Public 폴더 > index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> //여기가 루트 </body> </html>
src 폴더 > index.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />,document.getElementById('root')); // <App /> ->componant는 HTML 을 반환하는 함수
index.html 과 app.js에서의 코드를 연결해주는 중간 역활이 index.js
src 폴더 > App.js
import React from 'react'; import PropTypes from 'prop-types'; const foodILike =[ { id:1, name : "kimchi", Image : "aa", rating:5 }, { id:2, name : "김밥", Image : "aa", rating:4.5 }, { id:3, name : "쭈꾸미", Image : "aa", rating:4.8 }, { id:4, name : "gogi", Image : "aa", rating:4.3 } ]; function Food({name,pic,rating}){ return ( <div> <h2>I Like {name}</h2> <h4>{rating} / 5.0</h4> <div>{pic}</div> </div> ); } Food.PropType ={ name : PropTypes.string.isRequired, pic:PropTypes.string.isRequired, rating:PropTypes.number.isRequired }; function App() { return ( <div> {foodILike.map(dish =>( <Food key={dish.id} name={dish.name}pic={dish.Image} rating={dish.rating} /> ))} </div> ); } export default App;
프로프 설치시
터미널에서
npm install
->
npm start
를 해서 서버를 재시작
설치하면
package.json 이곳에 프로프 타입 추가됨
{ "name": "movie_app_b", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^11.2.6", "@testing-library/user-event": "^12.8.3", "prop-types": "^15.7.2", //프로프 타입! 여기 "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", "web-vitals": "^1.1.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
결과물

728x90
반응형
'인강\개인공부 > 노마드 코더' 카테고리의 다른 글
[노마드코더] ReactJS로 영화 웹 서비스 만들기 + Router (0) | 2021.05.06 |
---|---|
[리액트] 움직이는 Component-노마드코더 (0) | 2021.05.03 |
[리액트] Component State &Life cycle -노마드코더 (0) | 2021.05.03 |
바닐라 JS로 그림판 만들기 (0) | 2021.04.14 |
바닐라 JS로 크롬 앱 만들기 (0) | 2021.04.12 |
댓글