react native cli로 세팅을 하게되면 ios, aos만 되지 web은 세팅이안된다
그래서 세팅을 해보자!
npm i react-native-web
npm i --save react-dom
npm i --save-dev babel-plugin-react-native-web
sudo npm i --save-dev @babel/core babel-loader url-loader webpack webpack-cli webpack-dev-server
npm i @babel/preset-react html-webpack-plugin
설치를 하다보면 안되는게 생긴다..
에러 안에 해결방법을 알려주기때문에 따라서 하기만 하면된다..
ㅎㅎㅎ
본격적인 기본세팅!
// public/index.html
<!DOCTYPE html>
<html>
<head>
<title>React Native Web</title>
</head>
<body>
<div id="app">index,html</div>
</body>
</html>// App.web.js
import React from 'react';
import {View, Text} from 'react-native';
function App() {
return (
<View>
<Text>:)</Text>
</View>
);
}
export default App;// index.web.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.web';
const root = createRoot(document.getElementById('app'));
root.render(<App />);// web/webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const appDirectory = path.resolve(__dirname, '../');
const babelLoaderConfiguration = {
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['@babel/preset-react'],
plugins: ['react-native-web'],
},
},
};
module.exports = {
entry: [path.resolve(appDirectory, 'index.web.js')],
output: {
filename: 'bundle.web.js',
path: path.resolve(appDirectory, 'dist'),
},
module: {
rules: [babelLoaderConfiguration],
},
plugins: [new HtmlWebpackPlugin({template: './public/index.html'})],
resolve: {
alias: {
'react-native$': 'react-native-web',
},
extensions: ['.web.js', '.js'],
},
};// package.json
{
"name": "react_native",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest",
"build-react": "webpack --mode production",
"start-react": "webpack serve --config ./web/webpack.config.js --mode development"
},
"dependencies": {
"@babel/preset-react": "^7.22.15",
"html-webpack-plugin": "^5.5.3",
"react": "18.2.0",
"react-dom": "^18.2.0",
"react-native": "0.72.6",
"react-native-web": "^0.19.9"
},
"devDependencies": {
"@babel/core": "^7.23.2",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native/eslint-config": "^0.72.2",
"@react-native/metro-config": "^0.72.11",
"@tsconfig/react-native": "^3.0.0",
"@types/react": "^18.0.24",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.2.1",
"babel-loader": "^9.1.3",
"babel-plugin-react-native-web": "^0.19.9",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.76.8",
"prettier": "^2.4.1",
"react-test-renderer": "18.2.0",
"typescript": "4.8.4",
"url-loader": "^4.1.1",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
},
"engines": {
"node": ">=16"
}
}// babel.config.js
module.exports = {
presets: [
[
'module:metro-react-native-babel-preset',
{useTransformReactJSXExperimental: true},
],
],
plugins: [['@babel/plugin-transform-react-jsx', {runtime: 'automatic'}]],
};
위에 설정을 다하면 실행!
yarn start-react
yarn test
뾰로롱!!!
'www > rn' 카테고리의 다른 글
| [RN] react-native + react-native-web + typescript = 멀티디바이스 (0) | 2023.11.06 |
|---|---|
| [RN] react-native-web + typescript = .tsx (2) | 2023.11.06 |
| react, react-native, react-native-web (0) | 2023.10.25 |
| [RN] /usr/local/lib/node_modules/react-native-cli/index.js:302 cli.init(root, projectName) error (0) | 2023.10.15 |
| [RN] react native 세팅 (0) | 2023.09.16 |
