How to install React on this project - reactjs

Question

I got this starting point app that was given to me, and I have to add react to it.
Its a basic node application with this sctructure:
MyProject
src
scripts
index.js
styles
index.scss
index.html
webpack
webpack.common.js
webpack.config.dev.js
webpack.config.prod.js
.babelrc
And I also got this package.json:
{
"name": "frontend-assessment-test",
"version": "1.0.0",
"description": "A frontend assessment test for our new pirates, which are willing to come on board.",
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.js --colors",
"start": "webpack-dev-server --open --config webpack/webpack.config.dev.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/holidaypirates/frontend-assessment-test"
},
"author": "HolidayPirates",
"license": "MIT",
"bugs": {
"url": "https://github.com/holidaypirates/frontend-assessment-test/issues"
},
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.6.3",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.0.4",
"cross-env": "^6.0.3",
"css-loader": "^3.2.0",
"eslint": "^6.5.1",
"eslint-loader": "^3.0.2",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^4.0.0-beta.8",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.9.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"#babel/polyfill": "^7.6.0",
"core-js": "^3.3.3"
}
}
The babel file webpack.common.js has this configuration:
module.exports = {
entry: {
app: Path.resolve(__dirname, '../src/scripts/index.js')
},
output: {
path: Path.join(__dirname, '../build'),
filename: 'js/[name].js'
},
optimization: {
splitChunks: {
chunks: 'all',
name: false
}
},
plugins: [
new CleanWebpackPlugin(),
new CopyWebpackPlugin([
{ from: Path.resolve(__dirname, '../public'), to: 'public' }
]),
new HtmlWebpackPlugin({
template: Path.resolve(__dirname, '../src/index.html')
})
],
resolve: {
alias: {
'~': Path.resolve(__dirname, '../src')
}
},
module: {
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto'
},
{
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
use: {
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
},
]
}
};
So because I saw threre is babel and style loader added to the webpack, if I would just install react and react-dom I could then start using react, if I would, in the index.js file import react and try to render a basic component.
But i get an error that Module build failed (from ./node_modules/babel-loader/lib/index.js):
Any idea what should I change in webpack config or which other package other than react
and react-dom in order to use react in index.js?
Thanks.

Answer 1

This code base will not support react js. Babel is used to converted the non understandable JS parts(mostly es6 or more) to es5. Simple babel configuration will not work in your case, every library has their own way of syntax.
For example, in order to use the react you should be installing babel-preset-react which is mandatory for react.
The above mentioned will understand the jsx and react functionalities and converts to es5.

Answer 2

Install react first, see the hello world is working then try to add your node.js project into that react, try to add small chunk continuously and see the result
My personal opinion if possible, keep UI(react) and backend(node) separate