npm Scripts in React

After understanding the folder structure, let’s explore the npm scripts defined in your package.json file. These scripts typically look like this:

"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"

You can run them using npm run <script> in your terminal:

• npm run dev: Runs the app locally in development mode
• npm run lint: Checks for code style and syntax issues
• npm run build: Builds the app for production
• npm run preview: Previews the production build (requires npm run build first)

Your First React Component

The first React component is defined in src/App.jsx. It’s a JavaScript function written in PascalCase and is known as a function component.

Simplified version to get started:

function App() {
  return (
    

      
Hello React
    
  );
}
export default App;

To start fresh, you can clear the contents of App.css and index.css.

Key Concepts in Components

• Component names must start with a capital letter to be recognized by React.
• Initially, the component has no parameters, but later you’ll learn about props.
• The returned code looks like HTML but is actually JSX — a syntax that blends JavaScript and HTML.

Internal vs External Variables

Variables declared inside the function are redefined on every render. If a variable doesn’t depend on anything inside the component, it’s better to define it outside:

const title = 'React';
function App() {
  return (
    

      
Hello {title}
    
  );
}
export default App;

This avoids unnecessary redefinition and improves performance.

Conclusion

npm scripts help you run, build, and test your React project efficiently. By starting with a simple function component, you can focus on learning JSX, component structure, and variable scope. As you progress, you’ll explore props, state, and more advanced patterns in React.