Vite

what is it? link

  • a bundler
  • a dev server

scaffold your vite project by executing:

npm create vite@latest

my_react_app/
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   └── main.jsx
└── vite.config.js

run in the project directory:

npm i

to see the template run:

npm run dev

and open the browser on localhost:5173

to build the project run:

npm run build

Basic

/src/App.jsx

function App() {
	return <h1>Nisim</h1>;
}

An Alternative

function Title() {
	return <h1>Nisim</h1>;
}

function App() {
	return <Title></Title>;
}

if no children

function Title() {
	return <h1>Nisim</h1>;
}

function App() {
	return <Title />;
}

Style

function Title() {
	return <h1 style={{ color: 'blue' }}>
		Nisim
	</h1>;
}

or

function Title() {
	const titleStyle = { color: 'blue' };

	return <h1 style={titleStyle}>
		Nisim
	</h1>;
}

Props

function Title(props) {
	const titleStyle = { color: props.color };

	return <h1 style={titleStyle}>
		Nisim
	</h1>;
}

function App() {
	return <Title color='red' />;
}