swift-react

Quick and dirty way to run React.

Note: swift-react is strictly for development usage only and is helpful for quick prototyping and testing.

Prerequisite

• npx

Usage

Create an index.js file with a React component.

// index.js

function App() {
  return (
    <h1>Hello swift-react</h1>
  );
}

// Caution: You don't need to import React or ReactDOM for swift-react to work.
ReactDOM.render(<App />, document.getElementById('root'));

Finally, run this command from the exact place where you created the index.js file.

$ npx swift-react

This command will run a webpack-dev-server and serve your bundle.

Example

Navigate to the example directory to see swift-react in action.

Usage with package.json

Add swift-react as a dev dependency.

$ yarn add swift-react --dev

// package.json

{
  "name": "swift-react-example",
  "scripts": {
    "swift-react": "swift-react"
  },
  "devDependencies": {
    "swift-react": "*"
  }
}

Next, create an index.js file right next to your package.json file.

// index.js

function App() {
  return (
    <h1>Hello swift-react</h1>
  );
}

// Caution: You don't need to import React or ReactDOM for swift-react to work.
ReactDOM.render(<App />, document.getElementById('root'));

Finally, run this command from the exact place where you created the package.json and index.js file.

$ yarn swift-react

The advantage of this method as compared to the first one is that you don't have to download dependencies of swift-react time and again. It is great for offline usage.

Motivation

Sometimes testing a small React quirkiness is too cumbersome.

Caveats

• The main js file should be named index.js.
• The main component should be rendered to the #root DOM element.
• You do not need to import React or ReactDOM as it is automatically loaded by webpack under the hood.
• Works only with latest React and ReactDOM packages.

License

MIT