CODEWITHSUNDEEP
reactjs
Amidii
Amidii

Reputation: 355

ReactJS render included file not working

Using this setup: https://github.com/gaearon/react-transform-boilerplate

Problem is that index doesn't render anything from file form.jsx. It just shows "Index File". I changed the loader to "test: /\.jsx?$/," in webpack config. Any clue what's wrong?

index.jsx

import React, { Component } from 'react';
import formA from './form.jsx';

class index extends Component {
  render() {
    return (
      <div>
        Index file
        <formA />
      </div>
    );
  }
}

export default index;

form.jsx

import React, { Component } from 'react';

class formA extends Component {
  render() {
    return (
      <div>
        test
      </div>
    );
  }
}

export default formA;

Webpack config

var path = require('path');
var webpack = require('webpack');
module.exports = {
  // or devtool: 'eval' to debug issues with compiled output:
  devtool: 'cheap-module-eval-source-map',
  entry: [
    // necessary for hot reloading with IE:
    'eventsource-polyfill',
    // listen to code updates emitted by hot middleware:
    'webpack-hot-middleware/client',
    // your code:
    './src/scripts/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

Upvotes: 0

Views: 262

Answers (1)

Aleksandr Petrov
Aleksandr Petrov

Reputation: 1288

You should starts component name with an upper-case letter – replace <formA /> with <FormA />.

It happend because <formA /> transpiles into React.createElement('formA') and <FormA /> transpiles into React.createElement(FormA).

In first case you create a tag with name formA. In second case you create a component FormA.

More in React docs

Upvotes: 2

Related Questions