a first look at react 18 with vite and netlify

When it’s released, React 18 will include out-of-the-box improvements including:

Automatic batching)
New APIs (like startTransition)
A new streaming server renderer with built-in support for React.lazy

The React team has also taken a new step by …

When it’s released, React 18 will include out-of-the-box improvements including:

The React team has also taken a new step by creating the React 18 Working Group to provide feedback, ask questions, and collaborate on the release. The Working Group is hosted on GitHub Discussions and is available for the public to read.



React 18 Working Group

Members of the working group can leave feedback, ask questions, and share ideas. The core team will also use the discussions repo to share our research findings. As the stable release gets closer, any important information will also be posted on this blog.

Because an initial surge of interest in the Working Group is expected, only invited members will be allowed to create or comment on threads. However, the threads are fully visible to the public, so everyone has access to the same information. The team believes this is a good compromise between creating a productive environment for working group members, while maintaining transparency with the wider community.

No specific release date is scheduled, but the team expects it will take several months of feedback and iteration before React 18 is ready for most production applications.

  • Library Alpha: Available today
  • Public Beta: At least several months
  • Release Candidate (RC): At least several weeks after Beta
  • General Availability: At least several weeks after RC

More details about the projected release timeline are available in the Working Group.



Create React App with Vite’s React Template

yarn create @vitejs/app ajcwebdev-react18 --template react



Install dependencies

cd ajcwebdev-react18
yarn



Start development server

yarn dev

01-create-vite-app



Install react@alpha and react-dom@alpha



package.json

If we look in our package.json we’ll see the following dependencies included from the Vite template.

"dependencies": {
  "react": "^17.0.0",
  "react-dom": "^17.0.0"
},

Install alpha versions.

yarn add react@alpha react-dom@alpha

Check your dependencies for the new versions.

"dependencies": {
  "react": "^18.0.0-alpha-e6be2d531",
  "react-dom": "^18.0.0-alpha-e6be2d531"
},

Use esbuild.jsxInject to automatically inject JSX helper imports for every file transformed by ESBuild:

// vite.config.js

export default defineConfig({
  plugins: [reactRefresh()],
  esbuild: {
    jsxInject: `import React from 'react'`
  }
})



main.jsx

import ReactDOM from 'react-dom'
import './index.css'
import App from './App'

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

root.render(<App />);



App.jsx

import logo from './logo.svg'
import './App.css'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img
          src={logo}
          className="App-logo" alt="logo"
        />
        <p>
          React 18 Deployed on Netlify with Vite
        </p>
      </header>
    </div>
  )
}

export default App



Deploy to Netlify

touch netlify.toml
[build]
  publish = "dist"
  command = "yarn build"

Create a blank GitHub repository at github.new.

git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/ajcwebdev/ajcwebdev-react18.git
git push -u origin main

Connect your GitHub repository to Netlify.

02-connect-github-repository

The build commands are included from your netlify.toml.

03-build-commands-auto-imported

$ yarn build
yarn run v1.22.4
warning package.json: No license field

$ vite build
vite v2.3.7 building for production...
transforming...
✓ 26 modules transformed.
rendering chunks...

dist/assets/favicon.17e50649.svg   1.49kb
dist/assets/logo.ecc203fb.svg      2.61kb
dist/index.html                    0.51kb
dist/assets/index.7cb030a3.js      0.39kb / brotli: 0.20kb
dist/assets/index.0673ce28.css     0.76kb / brotli: 0.40kb
dist/assets/vendor.9aeda92c.js     134.00kb / brotli: 37.26kb

Done in 4.86s.
​
(build.command completed in 5.1s)

Set a custom domain.

04-custom-domain

Go to your new domain.

05-deployed-website-on-netlify

You can find all the code for this article on my GitHub.


Print Share Comment Cite Upload Translate
APA
anthony-campolo | Sciencx (2024-03-29T12:27:32+00:00) » a first look at react 18 with vite and netlify. Retrieved from https://www.scien.cx/2021/06/08/a-first-look-at-react-18-with-vite-and-netlify/.
MLA
" » a first look at react 18 with vite and netlify." anthony-campolo | Sciencx - Tuesday June 8, 2021, https://www.scien.cx/2021/06/08/a-first-look-at-react-18-with-vite-and-netlify/
HARVARD
anthony-campolo | Sciencx Tuesday June 8, 2021 » a first look at react 18 with vite and netlify., viewed 2024-03-29T12:27:32+00:00,<https://www.scien.cx/2021/06/08/a-first-look-at-react-18-with-vite-and-netlify/>
VANCOUVER
anthony-campolo | Sciencx - » a first look at react 18 with vite and netlify. [Internet]. [Accessed 2024-03-29T12:27:32+00:00]. Available from: https://www.scien.cx/2021/06/08/a-first-look-at-react-18-with-vite-and-netlify/
CHICAGO
" » a first look at react 18 with vite and netlify." anthony-campolo | Sciencx - Accessed 2024-03-29T12:27:32+00:00. https://www.scien.cx/2021/06/08/a-first-look-at-react-18-with-vite-and-netlify/
IEEE
" » a first look at react 18 with vite and netlify." anthony-campolo | Sciencx [Online]. Available: https://www.scien.cx/2021/06/08/a-first-look-at-react-18-with-vite-and-netlify/. [Accessed: 2024-03-29T12:27:32+00:00]
rf:citation
» a first look at react 18 with vite and netlify | anthony-campolo | Sciencx | https://www.scien.cx/2021/06/08/a-first-look-at-react-18-with-vite-and-netlify/ | 2024-03-29T12:27:32+00:00
https://github.com/addpipe/simple-recorderjs-demo