My 2 cents on react & next

Tejas Bhadane — Fri, 19 Jul 2024 18:35:39 +0000

Why I’m Diving into React and Next.js: A Fresh Start

I’ve recently embarked on a new learning journey with React and Next.js, and here’s why I’m excited about these tools:

React: The Why

Component-Based Magic

React’s component-based architecture has been a game-changer for me. Instead of managing tangled code, I’m now creating reusable, self-contained components. For example, a simple Button component looks like this:

// Button.js
import React from 'react';

const Button = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

export default Button;

This modular approach not only streamlines development but also keeps my projects more organized.

Declarative and Clear

React’s declarative syntax is a breath of fresh air. It lets me describe what the UI should look like based on the application’s state, leading to cleaner and more predictable code. Here’s a simple Counter component:

// Counter.js
import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

Awesome Ecosystem

The React ecosystem is rich with tools and libraries. For routing, React Router simplifies navigation:

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => (
  <Router>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
);

export default App;

Performance Boost

React’s virtual DOM efficiently updates the UI. Here’s a simple component that showcases React’s performance optimizations:

// UserProfile.js
import React from 'react';

const UserProfile = ({ user }) => (
  <div>
    <h1>{user.name}</h1>
    <p>{user.email}</p>
  </div>
);

export default UserProfile;

Next.js: The Bonus

Built-In Features

Next.js extends React with built-in features like server-side rendering and static site generation. Here’s a basic page setup:

// pages/index.js
import React from 'react';

const HomePage = () => (
  <div>
    <h1>Welcome to Next.js!</h1>
  </div>
);

export default HomePage;

File-Based Routing

Next.js uses a file-based routing system, where the structure of the pages directory determines the routes. For example:

pages/index.js maps to /
pages/about.js maps to /about
For dynamic routes, create files with square brackets. For instance, pages/users/[id].js handles URLs like /users/123:

// pages/users/[id].js
import { useRouter } from 'next/router';

const UserProfile = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>User Profile for User ID: {id}</h1>
    </div>
  );
};

export default UserProfile;

Optimized Performance

Next.js includes performance optimizations like automatic code splitting and optimized image loading. Here’s how you can use the next/image component:

// pages/index.js
import Image from 'next/image';

const HomePage = () => (
  <div>
    <h1>Next.js Image Optimization</h1>
    <Image src="/my-image.jpg" alt="My Image" width={500} height={300} />
  </div>
);

export default HomePage;

In a Nutshell

React’s component-based approach and declarative syntax, combined with Next.js’s powerful features and intuitive file-based routing, make for an exciting development experience. I’m thrilled to explore more and see where this journey with React and Next.js takes me!

DEV Community: Tejas Bhadane