CODEWITHSUNDEEP
reactjs
Uday Khatry
Uday Khatry

Reputation: 469

Removing react JSX dependency from browser.js

I am building a progressive web app with react. I have chosen to write using JSX.

Given that I am using JSX, then I have to import browser.js. Now this browser.js is a 2 MB file which transforms this JSX code to plain JavaScript code. The size of the file means that my app takes a lot of time to load initially.

I want to know what are my alternatives:

  1. Should I use react without JSX so that I do not have any dependency on browser.js.
  2. Is there any alternative to browser.js which is less than 200kb in size?

I am still not clear whether if I use react without JSX then my dependency on browser.js can be removed.

Upvotes: 2

Views: 387

Answers (2)

sultan
sultan

Reputation: 4739

👯‍♀️ Alternatives to JSX

There are some alternatives to JSX that do not require any transpilers:

  1. React on Lambda (1.2KB gzip)
  2. React hyperscript (1.1KB gzip)
  3. FP Dom

Upvotes: 0

govgo
govgo

Reputation: 645

Webpack is an alternative. You can use Babel to transpile your code with it. Here's an example webpack.config.js file. 

module.exports = {

 // This code will be compiled 
 entry: "./app/App.js",

 // Then output into this file
 output: {
    filename: "public/bundle.js"
 },


 // This will be what we do
  module: {
    loaders: [
        {
            test: /\.jsx?$/,
            excluse: /(node_modules|bower_components)/,
            loader: 'babel',
            query: {
                // These are the specific transformations we'll be using. 
                presets: ['react', 'es2015']
            }
         }
     ]
  }
}

http://babeljs.io/docs/setup/#installation

There are several npm packages to install. Here's an example package.json file.

 {
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "public/index.html",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
 },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.12.0",
    "history": "^1.13.1",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-router": "^1.0.1" //for routing 
 },
 "devDependencies": {
   "babel-core": "^6.3.13",
   "babel-loader": "^6.2.0",
   "babel-preset-es2015": "^6.3.13",
   "babel-preset-react": "^6.3.13",
   "webpack": "^1.13.1"
  }
 }

Upvotes: 1

Related Questions