Skip to content

Krunal-Karena/swift-react

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

80 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

swift-react

NPM Version

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

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

About

Quick and dirty way to run React.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 46.6%
  • HTML 42.0%
  • CSS 11.4%