React - lesson 1 | HackIndia Skills

Key point

One idea

Start with a small Vite React app, then keep your UI as clear function components. A component is a JavaScript function that returns markup.

Current starting point

For this track, you will build a client-side React app with Vite. React docs show React 19.3 as current, but you do not need new advanced APIs for this project.

Older tutorials may tell you to run Create React App. Do not use that for a new learning project. It is deprecated, and new React learning projects commonly use Vite, Parcel, or Rsbuild.

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

What Vite gives you

Vite gives you a fast local React setup. It starts as a client-only single page app. It does not decide routing, data fetching, or styling for you.

That is fine for this track. You are proving React fundamentals first: components, props, state, forms, lists, lifted state, and useful effects.

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 />;
}

Tip

Name the project clearly

Use a project name a recruiter can understand in ten seconds. For example: campus-project-tracker, upi-expense-splitter, mess-menu-feedback, or internship-application-board.

You can ask an AI tool for 10 app ideas, but check that the idea is small enough for a week and can show forms, lists, and state without needing paid APIs.