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.

• npx

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.

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

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.

Sometimes testing a small React quirkiness is too cumbersome.

• 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.

MIT