If React offers DOM reconciliation, is it possible to dynamically reload component's code and re-render it after I edit it?
I'm looking for a solution that allows me to edit JSX file, save it, and have the component update itself in the browser, without reloading the page, unmounting it or losing its state.
Ideally this should work without browser plugins.
You can use react-hot-loader, a drop-in Webpack loader that enables live editing for React components in your projects. No browser plugins or IDE hooks required.
It marries Webpack Hot Module Replacement (HMR) with React.
You can use this if:
Your React components donʼt have nasty side-effects;
Youʼre willing to switch to Webpack for modules (it's not hard to switch, see the walkthrough);
You have a spare couple of hours (minutes if you already use Webpack).
How it works:
It uses Webpack HMR API to learn about the “module update available” event.
It changes React.createClass calls to special createClass and updateClass functions that store the component's prototype and later update it with fresh version;
When all prototypes are updated, it calls forceUpdate to re-render the components.
There is a demo video, an explanatory blog post and a React tutorial app fork with live-edit configured.
And it's all vanilla JS.
You can, and I created an example project demonstrating how to create these facilities for yourself using ES5 and RequireJS - it works with React and also with Backbone - it could probably work with Angular and Ember etc, as long as you use AMD modules and RequireJS.
Here's all the information:
https://medium.com/#the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1
the basic steps are:
gulp.js watchers listen for filesystem changes
socket.io server in gulpfile sends a message to all browser clients with the path of the file that changed
client deletes cache representing that file/module, and re-requires it (using AJAX to pull it from the server filesystem)
front-end app is configured / designed to
re-evaluate all references to the modules that it wishes to
hot-reload, in this case, only JS views, templates and CSS are
available to hot reload - the router, controllers, datastores
are not configured yet. I do suspect all files could be hot reloaded with the only exception being data stores.
You can see an example project here:
https://github.com/ORESoftware/hr4R
but I recommend reading the article above first.
This is a simpler more DIY implementation of hot-reloading than using Babel/ES6 and React-Hot-Loader.
Webpack was not primarily designed for hot-reloading- if it were, hot-reloading would no longer be an experimental feature, nor would it using polling to see filesystem diffs, which it currently does (see my article).
The RequireJS / AMD spec was basically made for hot-reloading, if you think about it.
Related
My company has a few different websites, mostly with a react front end but a couple without.
We want to build a cookie bar that can just be imported and used anywhere...basically it should be framework independent and ideally an npm package.
I'm not entirely sure if this is possible but I had the idea to construct the cookie bar package with react...it would be super simple, just a few components with jsx and styling and once that is all done, use webpack to compile it all into vanilla javascript that is independent of react and can just be inserted on any site with any or no framework.
All of the html of the cookie bar (that would have originally been written as react components / jsx but then compiled into vanilla JS with webpack) which will then be injected into the html of the website where the script is included.
Is this possible?
All I can find online is people making react components as npm packages but this is not exactly what I am looking to achieve.
Thanks in advance!
This is absolutely possible.
If the target page doesn't have React in it at all, you may want to bundle it as a tiny app and mount it as in the answers here. If it does have React, you can probably find away to use the existing React by putting it on window in the other code (import React from 'react'; window.React = React.
For bundling a single component or a few components, you may have better luck with Rollup than Webpack (they have different use-cases; both are bundlers, but Rollup has some niceties for bundling libraries specifically). This example may be useful (it also includes Sass, Storybook, and some other extras that you might or might not need). This would give you more flexibility and possibly smaller bundles, but would mean you'd still need a React app to actually import and use the components, as above.
Since your project scope is quite small it should not import or embed the whole react library.
I strongly encourage you to check Preactjs (https://preactjs.com/) which lets you write your code in JSX but has a much lighter footprint (3kB atm). Your component will load way faster, especially for mobile users
Then bundling with tools recommended in the other answers (rollup is great) is the way to go
I am trying to implement micro-frontends but my company is using React as the only front-end technology. I was hoping if I can do it by serving React components on a URL just as suggested in https://micro-frontends.org/ but it uses web components. Since all the ecosystem is on React can I serve a React component (and only that bundle code on a URL) like, https://my-website/components/table?theme="black".
Purpose of trying this:
Main repo will have most of the major dependencies already loaded. (no need of repeated code like react/react-dom etc)
Shadow DOM is creating event bubbling issues.
There are multiple repos for each team and all of them use same component library.
I have a task to build a boilerplate for our future web applications using ReactJS/Redux/MongoDB/Node (MERN) as a basic technology stack.
Basically all of our web applications are dashboards, with a login landing page (with register/login/forgot pwd/reset pwd). The boilerplate should be driven by microservices and needs to support both web and mobile integration (using ReactJS Native). Both client and server will call my APIs, that needs to be available also as REST services for integration. The app should be isomorphic as a best practice today.
I decided to start from react-redux-universal-hot-example, but as we can see the its landing page, it may be outdated (was written in June 2015).
The basic structure of my project is being tought as the following modules:
api: The API services (REST)
auth: To handle authentication
server: Server
client: client
models: Mongo models and database access
static: Static files (images, etc.)
These are the modules I'm planning to use (mainly from react-redux-universal-hot-example):
React (basic)
React Router (to route)
Express (basic)
Babel (basic)
Webpack (basic)
Webpack Dev Middleware (for development)
Webpack Hot Middleware (for development)
Redux (for data update)
Redux Dev Tools (for development)
React Router Redux Redux/React Router bindings.
ESLint (for code styling)
redux-form (to help with forms)
lru-memoize (to form validation)
multireducer (to build a key based reducer)
style-loader (to work with css and sass)
bootstrap-sass-loader (to easily customize bootstrap colors)
font-awesome-webpack (to easily customize fa colors)
react-helmet (to manage meta tags)
webpack-isomorphic-tools (for isomorphic app)
mocha (for unit testing)
Not present in the react-redux-universal-hot-example, I would addÇ
mongoose (for Mongo access)
Auth0, JWT and passport (for authentication)
From the above path, I have the following doubts:
a) Are the modules listed above updated as for today ? Should I use something newer to the given list ?
b) Is react-redux-universal-hot-example a good starting point or shall I look for something newer, better organized or just more up to date ?
c) Is my modules/directories structure correct ? Any comments on that ?
d) Generally speaking, is this a solid base to start from ?
b) Is there something missing that would help
check out:
https://github.com/bertho-zero/react-redux-universal-hot-example#server-side-data-fetching
This is an updated fork. It has a lot of things that you want, and more. I am using it myself and I am mighty impressed.
i've updated it further. soon to put in webpack 4 and babel 7, working on it...also going to swap out react loadable for universal component, for SSR+component splitting two in one far more elegantly than loader. i cleaned up the nav so it's symmetrical on open and close, instead of opening full and closing halfway up the p0age all sketchy. updated the semantic ui pack inside, added some config for circleci and travis ci...
https://github.com/kaigouthro/react-redux-semantic-ui
https://react-redux-semantic-hotplate.herokuapp.com/templatek
as of this date, it's the furthest along fork i believe.
it's really a badass kit.
i'm going to touch it up some more, but i'm starting something fresh, making a new frankenstein that will be a spiritual successor, pieced together out of the best parts of the top boilers, and will include more auth, and libraries for animation, transitions, and layout choices. that'll take a couple months. but, in the meantime.. enjoy the update.
Is there a standard way to get React components dynamically from the server in order to render them at the client from already rendered components on demand? In other words, an already rendered component would return the ajax-received component when it will be re-rendered from the render() method.
With RequireJS and I think Browserify (using an extra package), scripts could be requested asynchronously. Currently I use webpack to transpile ES6 with Babelify.
My use case is that I want to create some sort of wysiwyg editor, and in theory there will be a repository of react-widgets that I would like to run on demand in an iFrame.
Thanks
If you are using webpack already you could look into the require.ensure functionality.
See: https://webpack.github.io/docs/code-splitting.html
This creates split points in your code without you having to do all the heavy lifting footwork.
I have a similar use case to yours and was able to use require.ensure successfully.
There are a few other tutorials/resources available:
http://jonathancreamer.com/advanced-webpack-part-2-code-splitting/
http://henleyedition.com/implicit-code-splitting-with-react-router-and-webpack/
https://www.youtube.com/watch?v=gvG8dSPCNno
Also, if you are building a wyisiwig editor you should check out draft-js.
https://facebook.github.io/draft-js/
Super cool and extensible, built right on top of React by the Facebook team.
Would it be technically possible to implement a loader for Webpack that takes advantage of HMR to use with Polymer that preserves application state, like the one implemented for React, VueJS (github.com/vuejs/vue-loader) or Angular (github.com/yargalot/Angular-HMR)?
It would help a lot during development not to reload the whole application when you make changes a file in a polymer component.
AFAIK there is no easy way to do Webpack based hot reloading of Polymer elements.
This is due to the fact that web-components/Polymer import dependencies differently (using HTML imports) compared to the Webpack based stacks (using ES2015 modules and loaders). See also this issue.
There are efforts tough to implement the HTML imports using ES2015 modules once the spec is finalized (this might take some time tough).
If you use redux for application state management, and keep your Polymer elements as stateless as possible, you could at least suse HMR for your reducers which help during development.
For combining webpack + polymer you could check out this or this repo.