• Full Stack Apps

• File Based Routing

  • Routes are configured via the filesystem
  • new_folder/page.js

• Server Side Rendering

  • Page can be edited after its been loaded.

• npx create-next-app@latest

React Essentials

• https://react.dev/
• https://nodejs.org/en
• To create a local project, choose one of these two options:

  • https://create-react-app.dev/docs/getting-started

    npx create-react-app my-app
    cd my-app
    npm start
    

  • https://vite.dev/guide

    npm create vite@latest
    cd my-project
    npm run dev
    

Component Implement

• Component names must start with uppercase

function Post() {
  const chosenName = names[Math.floor(Math.random() * names.length)];

  return (
    <div>
      <p>Yiğit</p>
      <p>React.js is awesome!!</p>
    </div>
  );
}

export default Post;

• export default Post is the general/common export method.
• When importing components, the first letter must be uppercase:

import Post from './components/Post'; // uppercase because it's a component
import Post2 from './components/Post2';

• Should be one root element (such as : main)

function App() {
  return ( // should be one root element "main"
    <main>
      <Post2 author="Yigit" body="React.js is awesome!!" />
      <Post2 author="John" body="React.js is not awesome!!" />
      <Post2 author="Jane" body="React.js is great!!" />
      <Post2 author="Jim" body="React.js is amazing!!" />
    </main>
  );
}

• propsis an object containing all passed-in values

function Post2(props) {
  return (
    <div>
      <p>{props.author}</p>
      <p>{props.body}</p>
    </div>
  );
}

export default Post2;

Usage

  return (// should be one root element "main"
    <main>
      <Post2 author="Yigit"  body="React.js is awesome!!" />
      <Post2 author="John"  body="React.js is not awesome!!" />
      <Post2 author="Jane"  body="React.js is great!!" />
      <Post2 author="Jim"  body="React.js is amazing!!" />
    </main>
  );
}

Uppercase vs Lowercase usage in React

<Post /> (Uppercase)

React treats it as a custom component and calls the Post() function.

<post /> (Lowercase)

React treats it as a regular HTML element, not a component.

It will NOT run your Post() function.

React only recognizes components when they start with an uppercase letter.

CSS Styling & CSS Modules

• Any element in a React component can receive a className, and you can style it in a corresponding CSS file.
• index.css → The global CSS file. Styles here apply across the entire application.
• ComponentName.module.css→ A CSS Module file, scoped only to that specific component. Usually stored in the same folder as the component.

• Post2.jsx

  import styles from './Post2.module.css';
  
  // props is an object that contains the props passed to the component
  function Post2(props) {
      
      return (
          <div className={styles.post}>
              <p className={styles.author}>{props.author}</p>
              <p className={styles.text}>{props.body}</p>
          </div>
      );
  }
  
  export default Post2;
  

• Post2.module.css

  .post {
      margin: 1rem 0;
      padding: 1rem;
      background-color: #9c7eee;
      border-radius: 8px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      animation: animate-in 1s ease-out forwards;
    }
    
    .author {
      font-size: 0.8rem;
      font-weight: bold;
      color: #543280;
      margin: 0;
      text-transform: uppercase;
    }
    
    .text {
      white-space: pre-wrap;
      font-size: 1.25rem;
      margin: 0.25rem 0 0 0;
      color: #593884;
      font-style: italic;
    }
    
    @keyframes animate-in {
      from {
        opacity: 0;
        transform: translateY(1rem);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  

Why CSS Modules? (Quick Clarification)

• Avoids global class name conflicts

  (.post in one component won't affect another)

• Automatically generates unique class names behind the scenes

  (e.g., post_abc123)

• Great for component-based architecture