Reactjs - Nextjs - Typescript

Summary - React

source: https://nextjs.org/learn/react-foundations

  • In React, components are functions. Inside the script tag, create a function and call from the render, shown below. React components should be capitalized to distinguish them from plain HTML and JavaScript.

  • JSX is a syntax extension for JavaScript that allows you to describe your UI in a familiar HTML-like syntax. Three JSX rules: Return a single root element, Close all the tags, and camelCase all most of the things! source: three JSX rules

  • Babel - browsers don't understand JSX out of the box, so you'll need a JavaScript compiler, such as a Babel, to transform your JSX code into regular JavaScript.

  • Using props to pass-in variable to component; <Header title="React" />

  • List - Using array. map() method, and arrow function => to map an array item to the UI list item. Note: make sure <li key> is unique.

  • Event handler - using function

  • Hooks - a set of functions that allow you to add additional logic such as state to your components. You can think of state as any information in your UI that changes over time, usually triggered by user interaction.

  • Hook to manage state is useState(); it creates a new state and returns an array with the first item is the value, and the second is the function to update the value; can initialize the state value using setState(0);

  • TBD Server, Client components

  • Example

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
  const app = document.getElementById("app")
 
  function Header({title}) {
     return <h1>{title ? title : 'Default Title'}</h1>;
  }
  
  function HomePage() {
     const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
     const [likes, setLikes] = React.useState(0);
     
     function handleClick() {
        console.log("another like");
        setLikes(likes+1)
     }
     
     return (
        <div>
           {/* Nesting the Header component */}
           <Header title="React" />
           {/* List item */}
           <ul>
              {names.map((name) => (
                 <li key={name}>{name}</li>
              ))}
           </ul>
           <button onClick={handleClick}>Like {likes}</button>
        </div>
     );
  }
 
  const root = ReactDOM.createRoot(app);
  root.render(<HomePage />);
</script>

Summary - Next.js

source: https://nextjs.org/learn/react-foundations

  • Next.js provides nodejs development environment. On the Windows laptop, best to setup WSL and VS Code remote. The nodejs, modules, and codes reside in the WSL, VS Code runs on the Windows host and connect remotely to WSL folder.

  • In WSL, install nodejs version 18.17.0 or above

  • In WSL install the modules

npm install react@latest react-dom@latest next@latest

  • Note: after installation, the package.json file is created. Start the server by entering npm run dev.

{
  "scripts": {
    "dev": "next dev"
  },
  "dependencies": {
    "next": "^14.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

  • Next.js uses file-system routing. This means that instead of using code to define the routes of your application, you can use folders and files. So, create a new folder, app, and move index.js to, app/page.js, as this is the main page of the application. Note: a file app/layout.js is created automatically, if none exists, and it looks as follow:

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
};
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

  • Simplify the above html example. The only code left in the HTML file is JSX, so you can change the file type from .html to .js or .jsx. Refactor function HomePage() to export default function HomePage() indicating to Next.js which component to render as the main component of the page.

  • Next.js uses Server Components by default - this is to improve your application's performance and means you don't have to take additional steps to adopt them. The Server Component does not recognize useState() so the interactive "Like" button needs to be moved to a Client Component. Create a new file called like-button.js inside the app folder that exports a LikeButton component. In addition, to make the LikeButton a Client Component, add the React 'use client' directive at the top of the file. This tells React to render the component on the client.

'use client';
import { useState } from 'react';
 
export default function LikeButton() {
  const [likes, setLikes] = useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return <button onClick={handleClick}>Like ({likes})</button>;
}

  • The refactored page.js: 

import LikeButton from './like-button';

function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}
 
export default function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <LikeButton />
    </div>
  );
}
PreviousNodejsNextWebsite

Last updated