npm create-react-app with babel and webpack does not work

1
votes

I am new to UI technologies. I am trying my hands at reactjs along with webpack and babel I created an app using create-react-app plugin after installing it using npm. I cd into the src folder and do npm start, it launches the browser and shows the demo page. I am trying to add babel and webpack into this demo, but unfortunately it does not work. I open the index.html page in the brower and it does not show the jsx file content I am following https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr

I am not sure why this does not work, can some please help with this ?

index.jsx

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
  render () {
    return <p> Hello React!</p>;
  }
}

render(<App/>, document.getElementById('app'));

index.html

<html>
  <head>
    <meta charset="utf-8">
    <title>React.js using NPM, Babel6 and Webpack</title>
  </head>
  <body>
    <div id="app" />
    <script src="public/bundle.js" type="text/javascript"></script>
  </body>
</html>

.babelrc file

{
  "presets" : ["es2015", "react"]
}

webpack.config.js file

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        exclude : /(node_modules)/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  }
};

module.exports = config;

enter image description here

3
node.jsreactjsnpmwebpackbabeljs
create-react-app already includes webpack and Babel, it's one of its big selling points. It's mentioned in Get Started Immediately: You don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code. Have you read the User Guide or at least the README? - Michael Jungo

3 Answers

0
votes

create-react-app command builds some interesting things behind the scene. Some commands I will highlight, start and build.
start, runs the development environment for you. It will re compile every time you make changes to file. similar to nodemon in nodejs.

build this will compile your react files into a minified version, basically works the same as webpacks.

Thus there is no need to install webpack or babel.

0
votes

you need to install babel to compile your es6 and react code

do it using

     C:\Users\username\Desktop\reactApp>npm install babel-core
    C:\Users\username\Desktop\reactApp>npm install babel-loader
    C:\Users\username\Desktop\reactApp>npm install babel-preset-react
    C:\Users\username\Desktop\reactApp>npm install babel-preset-es2015
C:\Users\username>npm install -g babel
C:\Users\username>npm install -g babel-cli

Try to keep our webpack as

var config = {
   entry: './todoApp.js',

   output: {
      path:'./',
      filename: 'index.js',
   },

   devServer: {
      inline: true,
      port: 9191
   },

   module: {
         rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
      ],
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',

            query: {
               presets: ['es2015', 'react']
            }
         }

      ]
   }
}

module.exports = config;

and you need to change your render import as

var ReactDOM=require('react-dom');

and then use it as

ReactDOM.render

to add webpack to it just install webpack globally using npm

    npm install webpack --save
npm install webpack -dev-server --save

for more help follow this reactjs setup

0
votes

Create-react-app uses webpack and babel. It is already integrated into the project. If you would like to manually modify the default config for create react app, i.e. add things to your webpack config that don't come natively with create-react-app then you'll need to run npm run eject in order to separate the internal configs from the react-scripts package that controls them. Make sense?