React-Babel-Webpack

Question

Hi Everybody!
I am new in Webpack and Babel. Until now I used create-react-app but now I want to learn Babel and Webpack. So I am a bit confused.
When I ran npm run build then webpack built the bundle.js file correctly. But I should use const planets array, so I created the state={} and I put inside the state the const array. It's an object, like this:

const planets = [
   {
        id: '1',
        name: ... ,
        diameter: ... ,
        moons: ... ,
        desc: ... ,
        url: ... 
      },
      ... total 8
];

So I created a state and put inside the array.

state = {
    planets: [
      {
        id: '1',
        name: ... ,
        diameter: ... ,
        moons: ... ,
        desc: ... ,
        url: ... 
      }
    ]
      ... total 8

But now I get a bug from the console when I built with webpack. I use again npm run build command, but webpack doesn't built my project. This is my bug in the console: Error message (http://www.kepfeltoltes.eu/view.php?filename=120webpack.png). Any idea how can I solve this problem?
.babelrc

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

package.json

{
  "name": "react",
  "version": "1.0.0",
  "description": "helper",
  "main": "server.js",
  "dependencies": {
    "css-loader": "^1.0.1",
    "express": "^4.16.4",
    "nodemon": "^1.18.5",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "style-loader": "^0.23.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start-dev": "nodemon server.js",
    "start": "node server.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2"
  }
}

webpack.config.js

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/public/js',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}

Thanks, if you give me an idea about the right way.
Have a nice day/Good evening!

Brendan Whiting · Accepted Answer

There was one video (https://teamtreehouse.com/library/create-a-stateful-component) a while back in the React track where Guil said, towards the end of the video, that this way of setting properties of a class is not supported in all browsers. So what I'm guessing is that something's up with babel, the version of babel or the target JavaScript version or something, that is not happy with this syntax. You could also get around it by just assigning initial state the old fashioned way:
```JavaScript
class App extends Component {
  constructor() {
    super()
    this.state = { } // planets, etc. 
  }
}
```

Welcome to the Treehouse Community

Looking to learn something new?

Adam Beer

Adam Beer

React-Babel-Webpack

1 Answer

Brendan Whiting

Brendan Whiting

Adam Beer

Adam Beer

Brendan Whiting

Brendan Whiting