기본 소스 코드 작성 (Hello React & Webpack)
JS 파일을 load 할 페이지 생성 (./index.html)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>./dist/app.js이 webpack의 결과물이다. 해당 파일을 load하는 소스 코드
html에 react를 랜더링하는 소스(./client.jsx)
const React = require('react');
const ReactDom = require('react-dom');
const { hot } = require('react-hot-loader/root');
const HelloReact = require('./HelloReact');
const Hot = hot(HelloReact);
ReactDom.render(<Hot />, document.querySelector('#root'));react-hot-loader를 통해서 변경 사항을 바로바로 적용해보자
Hello React를 출력하는 소스 (./HelloReact)
const React = require('react');
const HelloReact = () => {
return (
<>
<div>Hello React!!!</div>
</>
);
};
module.exports = HelloReact;
react hooks를 이용.
다음편.
https://minemanemo.tistory.com/74
create-react-app 쓰지 않고 webpack으로 React 앱 만들기 (3)
webpack config 설정하기 const path = require('path'); module.exports = { mode: 'development', // 'production' devtool: 'eval', // hidden-source-map resolve: { extensions: ['.js', '.jsx'], }, // 타겟..
minemanemo.tistory.com
'Language & Library > React' 카테고리의 다른 글
| React의 Virtual DOM(VDOM)과 Diffing 알고리즘 (0) | 2020.09.09 |
|---|---|
| "Parsing error: Unexpected token =eslint" 에러 CRA(create-react-app)의 package.json 설정으로 해결 (2) | 2020.08.10 |
| [create-react-app] 다른 host에서 접근하기 (0.0.0.0) (0) | 2020.05.18 |
| create-react-app 쓰지 않고 webpack으로 React 앱 만들기 (3) (0) | 2020.03.10 |
| create-react-app 쓰지 않고 webpack으로 React 앱 만들기 (1) (0) | 2020.03.09 |
댓글