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" type="module"></script>

index.js:

import React from "react";
import ReactDom from "react-dom";

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

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

¶ Converting SVG to React components

By specifying the appropriate plugin in your .parcelrc, all imports to SVG files are automatically converted into React Components:

parcel index.html

.parcelrc:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.svg": ["@parcel/transformer-svg-react"]
  }
}

index.html:

<!DOCTYPE html>
<div id="app"></div>
<script src="./index.js" type"module"></script>

index.js:

import React from "react";
import ReactDom from "react-dom";
import MyIcon from "./MyIcon.svg";

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

You could also do something like "react-svg:*.svg": ["@parcel/transformer-svg-react"] instead, then only imports with that prefix would be transformed into React Components: import MyIcon from "react-svg:./MyIcon.svg";

¶ 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 />, ...);

¶ 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.)