Easy quick way to build and use custom React Components in plain websites.
nwb is a great tool to quickly start up a new React application or React Component.
to create a new starter project with nwb for a react component:
nwb new react-component <dir-name> [options]
During the creation of the new react component it will ask you for the "export?" after creation of the starter you can start the development server with Hot Module Replacement using:
after doing your magic and changing the component starter into your next masterpiece you can then use nwb to create the build with:
or (for production build that will remove prop types checking from the build)
NODE_ENV=development nwb build
this does a few things but what we are interested in at the moment is that it will build a umd component under the "umd" directory.
include files in script tags
In the "umd" directory it will build three files the uncompressed umd file, the minimized version of that file and the map for that minimized version. We will mainly be interested in just the minimized file which will be named
<your-project-name>.min.js. We can include that now along with react.js & rect-dom.js with normal 'script' tags in our html file.
Tell React where to render our component.
React should be available as the global
React and ReactDOM as
ReactDOM thus we can select a div where we want our component to render to (I have mine selected by ID of name 'myApp') and we tell React to create an element from our umd component and we have only the one export from it called default so we need to tell React exactly that as I have done in the example below.
ReactDOM.render( React.createElement(myComponentExportName.default), document.getElementById('myApp') );