React - lesson 1 | HackIndia Skills

React - lesson 1 | HackIndia Skills | HackIndia

Your to-do

Create the app

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Open your terminal in the folder where you keep college or hackathon projects.
Run the Vite React TypeScript starter command.
Enter the new app folder.
Install dependencies if the tool has not already done it.
Start the local dev server and open the shown local URL.

0 of 5 done

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

Example

First readable component

React component names must start with a capital letter. Lowercase JSX tags are treated as built-in HTML elements like div, button, and input.

Multi-line JSX should be wrapped in parentheses after return. Keep the component at the top level, not inside another component.

function App() {
  return (
    <main>
      <h1>Campus Project Tracker</h1>
      <p>Track ideas, teammates, and submission status.</p>
    </main>
  );
}

export default App;

Common mistake

Avoid nested components

Do not define a child component function inside App just because it feels tidy. React docs warn this is slow and can cause bugs.

If you need a child component later, define it at the top level in the same file while it is small. Split it into another file when the file gets crowded.

// Avoid this pattern
function App() {
  function Header() {
    return <h1>Campus Project Tracker</h1>;
  }

  return <Header />;
}

Start React the current way

One idea

Current starting point

Create the app

What Vite gives you

First readable component

Avoid nested components

Name the project clearly

Do this now

Quick check