1290 1290 - 1 year ago 42
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:


<!doctype html>
<div id="root"></div>

And then

import "babel-polyfill";

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

<App />,

But how does the
javascript file even get run if there is no script tag in the
? 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.


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.


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

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