목차
React 적용법1 - HTML 웹페이지에 직접 적용 React 적용법2 - React 개발환경 구축 React 실습 준비 - 웹페이지 생성
React 적용법1 - HTML 웹페이지에 직접 적용
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com//babel.min.js"></script>
</head>
<body>
<div id="demo
<script type="text/babel">
class Hz
render() {
return <h1>Homzzang.com</h1>
}
}
ReactDOM.render(<Hz demo
</script>
</body>
</html>
결과보기
※ 1,2번째 script 태그 : JS에서 React 코드 작성 가능케 함.
※ 3번째 script 태그 : 이전 브라우저에서 JSX 구문과 ES6 작성 가능캐 함.
React 적용법2 - React 개발환경 구축
[설치]
앞 강의 참고해 create-react-app 설치 후, hz 앱 설치 및 시작.
[수정]
1.
http://localhost:3000/ 페이지 수정 방법.
C:\Users\aspire\hz\src\App.js 파일 수정.
2.
수정 시 바로 반영되므로, 새로고침 불필요.
전체 소스를 아래처럼 수정하면 메인 바뀜.
[수정 전]
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
[수정 후]
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="App">
<h1>Homzzang.com</h1>
</div>
);
}
}
export default App;
[수정 후 화면 확인]
아래 주소에서 바뀐 화면 확인.
http://localhost:3000/
※ 원본에서 빨간색 소스는 불필요해서 삭제.
React 실습 준비 - 웹페이지 생성
1. C:\Users\사용자명\hz\src 폴더 안 파일 모두 삭제.
2. C:\Users\사용자명\hz\src\index.js 파일 생성. ★
import React from 'react';
import ReactDOM from 'react-dom';
const h1 = <h1>홈짱닷컴 (Homzzang.com)</h1>
ReactDOM.render(h1, document.getElementById('root '));
3. C:\Users\사용자명\hz\public\index.html 약 27라인 수정.
수정 전 : <title>React App</title>
수정 후 : <title>Hz</title>
PS. 일부 빌드 경우, publick 폴더 대신 src 폴더 안 index.html 이용.
이 경우, 아래 소스로 C:\Users\사용자명\hz\src\index.html 생성.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>홈짱닷컴</title>
</head>
<body>
<div id="root "></div>
</body>
</html>
※ http://localhost:3000/ 접속해 잘 바뀌었는지 확인.
PS.
앞으로 예제는 모두 위 2번 과정의 index.js 소스 변경임 .
반드시, 예제 코드로 동작 되는 것을 확인하며 공부 바람.
최신댓글