React 한다는 사람이면 CRA나 Next.js같은 프레임워크 없이도 리액트 환경 구축할 수 있어야겠지?
깃허브 주소
https://github.com/stupidJoon/react-without-cra
/index.html
<!DOCTYPE html>
<html>
<head>
<title>React Without CRA</title>
<script src="./dist/main.js" defer></script>
</head>
<body>
<div id="root"></div>
</body>
</html>/src/App.js
import React from 'react';
function App() {
return (
<div>
<h1>Hello World</h1>
</div>
);
}
export default App;/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));라이브러리 설치
npm init -y
npm i react react-dom
npm i -D @babel/core @babel/preset-react
npm i -D webpack webpack-cli babel-loader
- react, react-dom - react 라이브러리
- @babel/preset-react - jsx 문법을 js로 변환해주는 babel 프리셋
- webpack-cli - webpack을 cli로 실행할 수 있게 하는 라이브러리
- babel-loader - webpack과 babel을 연동하는 라이브러리
/babel.config.js
module.exports = {
presets: ['@babel/preset-react']
};/webpack.config.js
const path = require('path');
module.exports = {
entry: {
main: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}
}/package.json
...
"scripts": {
"build": "webpack --mode development"
},
...마지막으로 npm run build로 빌드를 하고 index.html을 브라우저에서 열면 잘 실행될것이다...
👨🏻💻