CODEWITHSUNDEEP
javascriptreactjsbabeljs
Amiga500
Amiga500

Reputation: 6131

React - Babel not transpiling files

I am going over a routing lessons for React

After lots of attempts, I got a working application, I can use:

var react = require("react");
var Render = require('react-dom');
Render((
<Router history={hashHistory}>
<Route path="/about" component={About}/>
</Router>
), document.getElementById('app'))

However majority of the examples on the web are using import statements, so for example:

import { Router, Route, hashHistory } from 'react-router'

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
  </Router>
 ), document.getElementById('app'))

Produces following error in my broswer: enter image description here (render is not defined).

This is my web.pack.config:

    var path = require('path');
    var webpack = require('webpack');
     module.exports = {
      entry: [
       './src/app.js'
      ],
      output: {
      path: path.join(__dirname, 'public/js'),
      filename: 'app.built.js'
      },
      module: {
       loaders: [
        { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?  
       presets[]=es2015&presets[]=react'
        }
       ]
     }
   }

What do I have to do so I can start using import statements?

Upvotes: 1

Views: 285

Answers (1)

Cesar William Alvarenga
Cesar William Alvarenga

Reputation: 493

The error is because you are not importing the ReactDOM. The best way to do it is

import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, IndexRoute, hashHistory } from "react-router";

import App from "./App";

const app = document.getElementById('app');

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}></Route>
  </Router>, app);

Considering that you have a component called App in the same directory like this:

App.js

import React from "react";

export default class App extends React.Component {
  render() {
    return (
      <div>My App!</div>
    );
  }
}

Upvotes: 1

Related Questions