Create project

npm create vite@latest {folder_name} -- --template react
cd {folder_name}
npm install
npm run dev

Basic template (Skeleton)

src/<filename>.jsx

function ComponentName() {
	return (<>
		Hello World
	</>)
}

export default ComponentName;

Variable and loop

function ComponentName() {
	let name = "xxx"
	let skills = [
		"skill 1",
		"skill 2",
		"skill 3"
	]
	
	return (<>
		Hello {name}<br/>
		<ul>
		{ skills.map((skill, index) => (
			<li key={index}>{skill}</li>
		)) }
		</ul>
	</>)
}

export default ComponentName;

Conditional rendering

function AdminPanel() {
	const isLoggedIn = true
	const user = { name: "Alice", role: "Admin" }
	
	return (<>
		<div>
			{ isLoggedIn ? (
				<h1>Welcome back, { user.name }!</h1>
				) : (
				<h1>Please login</h1>
			) }
			
			{ (isLoggedIn && user.role == "Admin") && (
				<button>Admin Panel</button>
			) }
		</div>
	</>)
}

export default AdminPanel

Props

function UserCard(props) {
	return (<>
		<div>
			<h2>{ props.name }</h2>
			<p>{ props.email }</p>
			<span>{ props.role }</span>
		</div>
	</>);
}

export default UserCard;