CODEWITHSUNDEEP
reactjswebpackbabeljs
user2643810
user2643810

Reputation:

How to install React on this project

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.

Upvotes: 1

Views: 59

Answers (2)

tareq aziz
tareq aziz

Reputation: 777

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

Upvotes: 1

Karthi Keyan
Karthi Keyan

Reputation: 137

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.

Upvotes: 1

Related Questions