1290 1290 - 9 months ago 34
React JSX Question

Do you have to include .jsx in script tags in your html?

I see code online for a very simple react app like this:

index.html
:

<!doctype html>
<html>
<head>
...
</head>
<body>
<div id="root"></div>
</body>
</html>


And then
index.jsx
:

import "babel-polyfill";

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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


But how does the
index.jsx
javascript file even get run if there is no script tag in the
index.html
? Something similar to this:
<script type="text/babel" src="./index.jsx">
?

Answer Source

Expanding on my comment, this is an example of a webpack configuration you might use. This will auto generate an index.html file inside dist folder with the index_bundle.js embedded. HtmlWebpackPlugin has options you can pass, but as I said, this is a basic example.

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const webpackConfig = {
  entry: 'index.jsx',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  module: {
    loaders: {
      test: /.jsx?$/,
      loader: ['babel-loader'],
      exclude: path.join(__dirname, 'node_modules'),
    }
  }, 
  plugins: [new HtmlWebpackPlugin()]
};

Packages you'll need: npm install --save-dev webpack babel-loader html-webpack-plugin

To use run webpack.

EDIT

You will also need a .babelrc file. Basic example:

{
    "presets": {
        "es5"
    }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download