
But it has all of the features as you'd expect building a v16 React.js app.Ĭlass HelloWorld extends React. If you need a development version of `react` just replace `production.min` with `development` in the react urls below. This gives us the ability to use arrow functions `myFunc = () => ` as well as create a minified version of our app's code (aka ``) like `create-react-app`'s build does. If you want a npm http server consider using `npm install -save-dev http-server` and replacing `python3 -m rver 8888` with `http-server -P 8888`Ĭd /path/to/your/local/dev/standalone_react > You'll see `python3 -m rver` in there because I'm testing this with a basic Python server to keep down the 'development package bloat'. "build": "npx babel app.js -out-file -presets minify -watch"
const domContainer document.querySelector('likebuttoncontainer') const root ReactDOM.createRoot( domContainer) root.render(e( LikeButton)) These three lines of code find theIn your `package.json` you'll want to add the following (at bare minimum): After the starter code, add three lines to the bottom of likebutton.js: //. As our apps get bigger, the production bundles will also get bigger and take longer to load if we don’t split them and load them only when needed. I'm calling mine `standalone_react` (riveting name I know) We need code-splitting so that product React bundles won’t be too big.

Navigate to a blank directory so we can create our app. The () is exactly what we do in this post with everything working as expected.

We'll do this by creating a standalone react app using `React` and `Babel`. 'like' button) that can be embedded nearly anywhere and over and over again? How do we make a stand alone component (e.g. How do we build a standalone React app without installing a bunch of npm packages? This post will answer the following questions:
