React

Compared to Webpack, Parcel's paradigm is to use your HTML file as the entry point, not merely the main script:

parcel index.html
index.html:
<!DOCTYPE html>
<div id="app"></div>
<script src="./index.js"></script>
index.js:
import React from "react";
import ReactDom from "react-dom";

const App = () => <h1>Hello!</h1>;

ReactDom.render(<App />, document.getElementById("app"));

ΒΆ HMR (Fast Refresh)

Parcel has first-class support for React Fast Refresh (which supersedes react-hot-loader, a userland plugin that botched HMR support onto React). It is (in most cases) able to retain state between reloads (even after an error).

For further information, take a look at the official documentation.

ΒΆ Selected Limitations

ΒΆ State in class components is reset between reloads

With class components slowly being deprecated, their state will not be preserved.

ΒΆ Declaring a Default Export Using a Function Expression Isn't Recognized

Editing this component would reset value because the Fast Refresh Babel plugin cannot instrument the default export declaration.

Component.js:
import React, { useState } from "react";

export default () => {
const [value] = useState(Date.now());

return <h1>Hello! {value}</h1>;
};
index.js:
import React from "react";
import ReactDom from "react-dom";
import Component from "./Component.js";

const App = () => (
<h1>
<Component />
</h1>
);

ReactDom.render(<App />, ...);

See also Dan Abramov's tweet

ΒΆ Exporting Values That Are Not Components Will Reset the State:

Editing Component would reset the value state, because of the other non-component export.

Component.js:
import React, { useState } from "react";

const Component = () => {
const [value] = useState(Date.now());

return <h1>Hello! {value}</h1>;
};
export default Component;

export function utility() {
return Date.now();
}
index.js:
import React from "react";
import ReactDom from "react-dom";
import Component, { utility } from "./Component.js";

console.log(utility());

const App = () => (
<h1>
<Component />
</h1>
);

ReactDom.render(<App />, ...);
ΒΆ Modifying the Asset That Calls Render Will Reset All State:

Understandably, modifying App will call ReactDom.render again:

index.js:
import React from "react";
import ReactDom from "react-dom";

const App = () => <h1>Hello!</h1>;

ReactDom.render(<App />, ...);

(The HMR functionality is provided by @parcel/transformer-react-refresh-babel, @parcel/transformer-react-refresh-wrap and @parcel/runtime-react-refresh.)