[under costruction] [bug - not working]
A purist style approach to make a react app from stretch (without creacte-react-app).
Known Issues:
- depencies auto injection completely absent
build command traspile the code, probably babel-plugin-file-loader use webpack. However not import enything (included react and react-dom) of node depency.
-
init project...
npm init (or npm init -y) -
install babel (for jsx and compiling)...
npm i --save-dev @babel/core⇗
npm i --save-dev @babel/preset-react⇗
npm i --save-dev @babel/preset-env⇗ ⇗
npm i --save-dev babel-plugin-file-loader⇗
npm i --save-dev babel-cli⇗
npm i --save-dev babel-minify⇗
...if you need update babel:npx babel-upgrade --write -
install react...
npm i --save react react-dom⇗other res:
react.production.min.js
react-dom.production.min.js -
now fix all fix...
npm audit fix --force -
in root make .babelrc cofing file:
{ "sourceMaps": false, "comments": false, "presets": [ ["@babel/preset-env"], ["@babel/preset-react"] ], "env": { "development": { "presets": [ ["@babel/preset-env",{ "modules": false //"umd" (retrocompatibility) }], ["@babel/preset-react", { "pragma": "e", "pragmaFrag": "f", "throwIfNamespace": false, "runtime": "classic" }] ] } }, "plugins": [ [ "file-loader", { "name": "[name].[ext]", "extensions": ["png", "jpg", "jpeg", "gif", "svg", "css"], "publicPath": "/public", "outputPath": "/public/reactor/assets", "context": "", "limit": 0 } ] ] } -
server:
-
if not have express:
npm install http-server- make a server dir:
mkdir public - make first ./public/index.html:
echo '<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>REACT</title></head><body><div>SERVER RUN - REACT ERROR</div></body></html>' > public/index.html - inside html put
<script type="module" src="./reactor/index.js"></script>for your first load - open package.json and change
"scripts": {...},with:"scripts": { "start": "start http://localhost:8080/ && npm run server", "server": "http-server -a localhost -p 8080 -c-1", "build": "babel ./src/ -d ./public/reactor/", "build-compact": "babel ./src/ -d ./public/reactor/ && rollup && npm run minify", "minify": "minify ./public/ -d ./public/ },
- test server with:
npm run start
-
if you use express:
coming soon...
-
make react dir:
mkdir src
make index.js
echo '' > src/index.js
copy index file content:
//:
//: Main of react app project
//:
// get react
import React from 'react'
import ReactDOM from 'react-dom/client'
//make app root
const root = ReactDOM.createRoot(document.getElementsByTagName('div')[0])
//render app
root.render(
<React.StrictMode>
<h1>HELLO FROM REACT!</h1>
</React.StrictMode>
)