Back

/ 2 min read

React ☢️ Part One

Last Updated:

Vite

Vite is a build tool that aims to provide a faster and more streamlined development experience for modern web projects. You can imagine Vite as a next-generation frontend tooling that is created to replace Webpack and Parcel. Vite is built on top of esbuild, a fast JavaScript bundler that is written in Go. Vite uses esbuild to compile and bundle your code, and it also provides a development server that supports hot module replacement (HMR) out of the box.

To create a new React project with Vite, you can use the following command:

Terminal window
npm create vite@latest my-react-app --template react

They will create a new directory called my-react-app. You can jump in and start the dev server by:

Terminal window
cd my-react-app
npm install
npm run dev

By default, Vite will start a development server on http://localhost:3000. You can open this URL in your browser to see your React app.

If you want to change the default port, you can edit the vite.config.js file in the root of your project:

vite.config.js
...
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    host: true,
  },
});

Refs & Portals

Refs are a way to access the DOM nodes or React elements created in the render method. They are useful when you need to manipulate the DOM directly or access a child component. Refs are created using the useRef hook.

import React, { useRef } from 'react';


function MyComponent() {
  const inputRef = useRef(null);


  function handleClick() {
    inputRef.current.focus();
  }


  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus the input</button>
    </div>
  );
}