https://github.com/jellydn/react-18-migration-demo

How to Upgrade to React 18
https://github.com/jellydn/react-18-migration-demo

migration raectjs react-18 vitejs

Last synced: 4 months ago
JSON representation

How to Upgrade to React 18

• Host: GitHub
• URL: https://github.com/jellydn/react-18-migration-demo
• Owner: jellydn
• Created: 2022-04-08T14:39:31.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-04-09T10:50:57.000Z (6 months ago)
• Last Synced: 2025-04-09T11:44:34.921Z (6 months ago)
• Topics: migration, raectjs, react-18, vitejs
• Language: TypeScript
• Homepage: https://jellydn.github.io/react-18-migration-demo/
• Size: 186 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Welcome to react-18-migration-demo 👋

![Version](https://img.shields.io/badge/version-0.0.1-blue.svg?cacheSeconds=2592000)

[![Twitter: jellydn](https://img.shields.io/twitter/follow/jellydn.svg?style=social)](https://twitter.com/jellydn)

> React 18 migration demo

> [![Master React 18 in 10 minutes](https://img.youtube.com/vi/enYXn3AYhYQ/0.jpg)](https://www.youtube.com/watch?v=enYXn3AYhYQ)

## Install

```sh

yarn install

```

## Screenshots

| React 18                                                            | React 17                                                            |

| ------------------------------------------------------------------- | ------------------------------------------------------------------- |

| ![react 18](https://gyazo.com/851035d337ed2e9d77b7ff2276e1213d.gif) | ![react 17](https://gyazo.com/c803d205d79b53adafb906c681dc8962.gif) |

## How to Upgrade to React 18

Run below command and it will [upgrade your app to React 18](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html)

```sh

npx new-web-app@latest react upgrade-react-18

```

- [What news in React v18](https://reactjs.org/blog/2022/03/29/react-v18.html#whats-new-in-react-18)

  - New Feature: Automatic Batching

  - New Feature: Transitions

    - _Urgent updates_ reflect direct interaction, like typing, clicking, pressing, and so on.

    - _Transition updates_ transition the UI from one view to another.

  - New Suspense Features

  - New Client and Server Rendering APIs

  - New Strict Mode Behaviors

  - New Hooks

    - useId

    - useTransition

    - useDeferredValue

    - useSyncExternalStore

    - useInsertionEffect

## Usage

```sh

yarn dev

```

## Run tests

```sh

yarn test

```

## Deployment

```sh

yarn build --filter=react-18 --filter=react-experimental

```

## Author

👤 **Dung Huynh**

- Website: https://productsway.com/

- Twitter: [@jellydn](https://twitter.com/jellydn)

- Github: [@jellydn](https://github.com/jellydn)

## Show your support

Give a ⭐️ if this project helped you!

---

_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_