Sign in Subscribe
By Thisara Priyamal —

ReactJS Project Day: Blog/Portfolio Sinhala Guide | State, Routing, Components

ReactJS Project Day: Blog/Portfolio Sinhala Guide | State, Routing, Components

ආයුබෝවන් යාලුවනේ! කොහොමද හැමෝටම? ❤️

අපි ReactJS ගැන ගොඩක් දේවල් ඉගෙනගෙන තියෙනවා නේද? ඈ... Components, State, Props, Hooks මේ හැමදේම තියෙනවා. ඒත් මේ හැමදේම එකට එකතු කරලා පොඩි Project එකක් කරලා බලන එක තමයි ඇත්තටම අපිට දැනුම වැඩි කරගන්න තියෙන හොඳම ක්‍රමය. අද අපි කරන්නේ ඒක තමයි!

අද මේ Article එකෙන් අපි, ReactJS පාවිච්චි කරලා ගොඩක් සරල Blog එකක් නැත්නම් Portfolio Website එකක් කොහොමද හදාගන්නේ කියලා බලනවා. මේක ඔයාලට ඉගෙනගත්තු දේවල් Practical විදියට apply කරන්න ගොඩක් උදව් වෙයි. ඔයාලට තියෙනවා නම් දැනටමත් පොඩි දැනුමක් React ගැන, මේකෙන් ඔයාගේ දැනුම තවත් දියුණු කරගන්න පුළුවන්. ඒ වගේම, මේක ඔයාගේ CV එකට අලුත් Project එකක් විදියට එකතු කරගන්නත් පුළුවන් නේද?

අපි මේ Tutorial එකේදී මේ දේවල් ගැන කතා කරමු:

  • අලුත් React Project එකක් පටන් ගන්නේ කොහොමද?
  • Components හදලා ඒවා සංවිධානය කරගන්නේ කොහොමද?
  • Dynamic Data කළමනාකරණය කරන්න State සහ Props පාවිච්චි කරන්නේ කොහොමද?
  • පේජ් අතර යන්න React Router පාවිච්චි කරන්නේ කොහොමද?
  • ඒ වගේම Project එකක් කරද්දී අනුගමනය කරන්න ඕන Best Practices සහ පොදු ගැටළු විසඳගන්නෙ කොහොමද?

එහෙනම්, අපි පටන් ගමුද? ලෑස්ති වෙන්න, කෝඩ් කරන්න!

1. Project එක පටන් ගැනීම සහ Components වල මූලිකාංග (Project Setup & Component Basics)

හරි, මුලින්ම අපි Project එකට අවශ්‍ය මූලික සැකසුම් ටික හදාගමු. අපි create-react-app පාවිච්චි කරලා අලුත් React Project එකක් පටන් ගන්නවා. මේකෙන් අපිට අවශ්‍ය සියලුම Dependencies එක්ක React Project එකක් ඉක්මනින්ම ලැබෙනවා.

Project එකක් හදමු

ඔයාගේ Terminal එක Open කරලා මේ Command එක Run කරන්න:

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

මේ my-blog-portfolio කියන තැනට ඔයාලට කැමති නමක් දෙන්න පුpවන්. npm start දුන්නාම ඔයාගේ Browser එකේ http://localhost:3000 වලට Project එක load වෙයි. ලස්සනට React Logo එකක් කැරකෙමින් ඇති.

මූලික Components හදමු

දැන් අපි අපේ Project එකට අවශ්‍ය මූලික Components ටික හදාගමු. සාමාන්‍යයෙන් වෙබ්සයිට් එකක තියෙනවා Header එකක්, Footer එකක්, ඒ වගේම Main Content එකක්. අපි මේවා වෙන වෙනම Components විදියට හදමු.

src Folder එක ඇතුලේ components කියලා Folder එකක් හදන්න. ඒක ඇතුලේ අපි Components ටික හදමු.

src/components/Header.js:

import React from 'react';

function Header() {
  return (
    <header className="app-header">
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/blog">Blog</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>
    </header>
  );
}

export default Header;

src/components/Footer.js:

import React from 'react';

function Footer() {
  return (
    <footer className="app-footer">
      <p>&copy; {new Date().getFullYear()} My Blog/Portfolio. All rights reserved.</p>
    </footer>
  );
}

export default Footer;

දැන් මේ Components දෙක src/App.js එකට import කරලා පාවිච්චි කරමු. src/App.js file එක මේ වගේ වෙනස් කරන්න:

import React from 'react';
import './App.css'; // අපි පස්සේ CSS එකක් එකතු කරමු
import Header from './components/Header';
import Footer from './components/Footer';

function App() {
  return (
    <div className="App">
      <Header />
      <main className="app-content">
        <h1>Welcome to My Blog/Portfolio!</h1>
        <p>This is the main content area.</p>
      </main>
      <Footer />
    </div>
  );
}

export default App;

දැන් ඔයාගේ Browser එක බලන්න. Header එකයි, Footer එකයි, මැදට "Welcome to My Blog/Portfolio!" කියන Text එකයි පේන්න ඕන. ලස්සනයි නේද? අපි Project එකේ Foundation එක දාලා ඉවරයි.

2. Dynamic Data කළමනාකරණය කරන්න State සහ Props (Managing Dynamic Data with State and Props)

Blog එකක් කිව්වාම, Blog Posts ගොඩක් තියෙන්න ඕන නේද? Portfolio එකක් නම් Projects ගොඩක් තියෙන්න ඕන. මේ Data එක Dynamic විදියට කළමනාකරණය කරගන්න අපිට React වල State සහ Props ගොඩක් වැදගත් වෙනවා.

State වලින් Data හසුරුවමු

State කියන්නේ Component එකක ඇතුලේ තියෙන, කාලයත් එක්ක වෙනස් වෙන්න පුළුවන් Data එකක්. මේ Data එක වෙනස් වුනාම, Component එක Re-render වෙනවා. අපි useState Hook එක පාවිච්චි කරන්නේ මේකට තමයි.

අපි Blog Post ටිකක් තියාගන්න State එකක් හදමු. src/components folder එක ඇතුලේ PostList.js සහ PostCard.js කියලා Files දෙකක් හදමු.

src/components/PostCard.js (තනි Post එකක් පෙන්වන්න):

import React from 'react';

function PostCard({ title, excerpt, date }) {
  return (
    <div className="post-card">
      <h3>{title}</h3>
      <p>{excerpt}</p>
      <small>Published on: {date}</small>
      <button>Read More</button>
    </div>
  );
}

export default PostCard;

src/components/PostList.js (Posts ගොඩක් පෙන්වන්න):

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

function PostList() {
  const [posts, setPosts] = useState([
    {
      id: 1,
      title: 'React Components ගැන මූලික දැනුම',
      excerpt: 'React Components යනු React යෙදුම්වල ගොඩනැගිලි කොටස් වන අතර, ඒවා කුඩා, ස්වාධීන සහ නැවත භාවිතා කළ හැකි UI කොටස් වේ.',
      date: '2023-10-26',
    },
    {
      id: 2,
      title: 'JavaScript Asynchronous Programming',
      excerpt: 'JavaScript වල Asynchronous Programming ගැන අමාරුද? Promises, Async/Await පාවිච්චි කරන්නේ කොහොමද කියලා බලමු.',
      date: '2023-10-20',
    },
    {
      id: 3,
      title: 'CSS Grid Layouts: Responsive Design සඳහා',
      excerpt: 'Responsive වෙබ් අඩවි නිර්මාණය සඳහා CSS Grid Layouts භාවිතා කරන ආකාරය පිළිබඳ මූලික කරුණු මෙම ලිපියෙන් සාකච්ඡා කෙරේ.',
      date: '2023-10-15',
    },
  ]);

  return (
    <div className="post-list">
      <h2>My Latest Blog Posts</h2>
      {posts.map((post) => (
        <PostCard
          key={post.id} // Lists වලට Key එකක් දාන්න අමතක කරන්න එපා!
          title={post.title}
          excerpt={post.excerpt}
          date={post.date}
        />
      ))}
    </div>
  );
}

export default PostList;

අපේ PostList Component එකේ posts කියලා State එකක් තියෙනවා. ඒකේ අපේ Blog Posts ටික Array එකක් විදියට තියාගෙන ඉන්නවා. map() Function එක පාවිච්චි කරලා, ඒ හැම Post එකක්ම PostCard Component එකකට Props විදියට යවනවා.

දැන් App.js එකේ main content area එකේ <PostList /> එකතු කරන්න:

// ... අනෙකුත් Imports
import PostList from './components/PostList';

function App() {
  return (
    <div className="App">
      <Header />
      <main className="app-content">
        <h1>Welcome to My Blog/Portfolio!</h1>
        <PostList /> {/* මෙන්න PostList එක! */}
      </main>
      <Footer />
    </div>
  );
}

export default App;

දැන් ඔයාට Browser එකේදී ලස්සනට Blog Posts ටික පේන්න ඕන. මේවා ඔක්කොම State එකෙන් සහ Props වලින් කළමනාකරණය වෙන්නේ.

3. React Router වලින් Page අතර යෑම (Navigation with React Router)

වෙබ්සයිට් එකක් කිව්වාම, Pages ගොඩක් තියෙනවා නේද? Home Page, Blog Page, About Page, Contact Page වගේ. මේ Pages අතර කිසිම Refresh එකක් නැතුව යන්න අපිට React Router පාවිච්චි කරන්න පුළුවන්.

React Router Install කරමු

Terminal එකේ මේ Command එක Run කරන්න:

npm install react-router-dom

Routes හදමු

දැන් src/App.js එකට ගිහින් Router එක Setup කරමු. මුලින්ම Pages ටිකට අදාළ Components හදමු. src/pages කියලා අලුත් Folder එකක් හදලා ඒක ඇතුලේ මේ Files ටික හදන්න:

src/pages/HomePage.js:

import React from 'react';
import PostList from '../components/PostList';

function HomePage() {
  return (
    <div className="home-page">
      <h1>Welcome to My Portfolio!</h1>
      <p>This is my digital space where I share my thoughts and projects.</p>
      <PostList />
    </div>
  );
}

export default HomePage;

src/pages/BlogPage.js:

import React from 'react';
import PostList from '../components/PostList';

function BlogPage() {
  return (
    <div className="blog-page">
      <h1>My Blog</h1>
      <p>Check out my latest articles and insights.</p>
      <PostList />
    </div>
  );
}

export default BlogPage;

src/pages/AboutPage.js:

import React from 'react';

function AboutPage() {
  return (
    <div className="about-page">
      <h1>About Me</h1>
      <p>Hi there! I'm a passionate developer creating awesome web experiences.</p>
      <p>Connect with me on social media!</p>
    </div>
  );
}

export default AboutPage;

src/pages/ContactPage.js:

import React from 'react';

function ContactPage() {
  return (
    <div className="contact-page">
      <h1>Contact Me</h1>
      <p>Feel free to reach out for collaborations or just to say hello!</p>
      <form>
        <input type="text" placeholder="Your Name" /><br />
        <input type="email" placeholder="Your Email" /><br />
        <textarea placeholder="Your Message"></textarea><br />
        <button type="submit">Send Message</button>
      </form>
    </div>
  );
}

export default ContactPage;

දැන් අපි src/App.js එකට ගිහින් Router එක Setup කරමු. Header එකේ තිබ්බ <a href="/"> tags ටික <Link to="/"> විදියට වෙනස් කරන්නත් අමතක කරන්න එපා. (මම ඒක පහල Header.js code snippet එකේදී පෙන්නනවා.)

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

import Header from './components/Header';
import Footer from './components/Footer';
import HomePage from './pages/HomePage';
import BlogPage from './pages/BlogPage';
import AboutPage from './pages/AboutPage';
import ContactPage from './pages/ContactPage';

function App() {
  return (
    <Router> {/* Router එකෙන් අපේ App එක Wrap කරනවා */}
      <div className="App">
        <Header />
        <main className="app-content">
          <Routes> {/* Routes ටික define කරන්නේ මෙතන */}
            <Route path="/" element={<HomePage />} />
            <Route path="/blog" element={<BlogPage />} />
            <Route path="/about" element={<AboutPage />} />
            <Route path="/contact" element={<ContactPage />} />
            {/* ඔයාට තනි Blog Post එකක් පෙන්නන්න ඕන නම් මේ වගේ dynamic route එකක් දාන්න පුළුවන් */}
            {/* <Route path="/blog/:id" element={<SinglePostPage />} /> */}
          </Routes>
        </main>
        <Footer />
      </div>
    </Router>
  );
}

export default App;

දැන් src/components/Header.js file එකත් Link Component එක පාවිච්චි කරන්න වෙනස් කරමු:

import React from 'react';
import { Link } from 'react-router-dom'; // Link Component එක import කරගන්න

function Header() {
  return (
    <header className="app-header">
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/blog">Blog</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>
    </header>
  );
}

export default Header;

දැන් ඔයාට Browser එකේ Header එකේ Links Click කරලා Pages අතර Refresh එකක් නැතුව යන්න පුළුවන්. සුපිරි නේද? මේක තමයි Single Page Applications (SPAs) වල තියෙන ලොකුම වාසියක්.

4. Best Practices සහ ගැටළු විසඳීම (Best Practices & Troubleshooting Tips)

Project එකක් කරද්දී, හොඳ привычки (habits) හදාගන්න එක ගොඩක් වැදගත්. ඒ වගේම ගැටළු ඇතිවෙද්දී ඒවා විසඳගන්න ක්‍රම දැනගෙන ඉන්න එකත් ගොඩක් උදව් වෙනවා.

Component Modularity සහ Reusability

  • කුඩා Components හදන්න: එක Component එකකට එකම කාර්යයක් කරන්න දෙන්න. උදාහරණයක් විදියට, PostCard එකට තනි Post එකක් පෙන්නන එක විතරයි කරන්න තියෙන්නේ. මේකෙන් Code එක කියවන්න, තේරුම් ගන්න සහ Maintain කරන්න පහසු වෙනවා.
  • Code එක නැවත භාවිතා කරන්න (Don't Repeat Yourself - DRY): එකම Code block එක කිහිප තැනක තියෙනවා නම්, ඒක වෙනම Component එකකට හෝ Utility Function එකකට වෙන් කරන්න.

Git Version Control

Git කියන්නේ ඔයාගේ Code එකේ History එක තියාගන්න සහ Team එකක් එක්ක වැඩ කරද්දී ගොඩක් වැදගත් වෙන Tool එකක්. Project එකක් කරද්දී මේ දේවල් අනිවාර්යයෙන්ම කරන්න:

  • නිතර Commit කරන්න: පොඩි වෙනසක් කරාම වුණත් Commit කරන්න. (e.g., git commit -m "feat: added header component"). මේකෙන් ඔයාට ඕන වෙලාවක කලින් Version එකකට යන්න පුළුවන්.
  • Meaningful Commit Messages: ඔයා Commit එකෙන් කරපු වෙනස පැහැදිලිව තේරෙන Message එකක් දෙන්න.
  • Branches පාවිච්චි කරන්න: අලුත් Feature එකක් කරද්දී git checkout -b feature/my-new-feature වගේ Branch එකක් හදාගෙන ඒකේ වැඩ කරන්න. Main Branch එක Clean එකේ තියාගන්න.
git add .
git commit -m "feat: implemented basic routing"
git push origin main

පොදු ගැටළු සහ විසඳීම් (Common Issues & Debugging)

  • `key` Prop එක නැතිවීම: Lists Render කරද්දී (map() පාවිච්චි කරද්දී) හැම Element එකටම Unique key Prop එකක් දෙන්න ඕන. නැත්නම් Console එකේ Warning එයි. (අපේ PostList එකේ key={post.id} කියන එක දැක්කා නේද?)
  • Component එක Re-render නොවීම: State එකක් Direct විදියට Modify කරන්න එපා (e.g., posts.push()). හැමවිටම setPosts([...posts, newPost]) වගේ අලුත් Array එකක් හදලා State එක Update කරන්න.
  • Router Issues:
    • BrowserRouter එකෙන් මුළු App එකම Wrap කරලා තියෙනවද කියලා බලන්න.
    • <Link to="/path"> වෙනුවට <a href="/path"> පාවිච්චි කරලා තියෙනවද කියලා බලන්න. <a href> එකෙන් Full Page Refresh එකක් වෙනවා.
  • Browser Developer Tools: මේක ඔයාගේ හොඳම යාළුවා. Console එකේ Error ටික බලන්න, Components Tab එකෙන් React Components වල State, Props ටික බලන්න පුළුවන්.
  • console.log(): Debug කරන්න මේක ගොඩක්ම උදව් වෙනවා. Data එකක් Component එකකට එනවද නැද්ද කියලා බලන්න console.log(props) වගේ දේවල් දාලා බලන්න.

අවසන් වචනය (Conclusion)

ඉතින්, යාලුවනේ, අපි මේ Tutorial එකෙන් ReactJS පාවිච්චි කරලා ගොඩක් සරල Blog එකක් හෝ Portfolio Website එකක් සාර්ථකව හදාගත්තා. අපි මුලින්ම Project එකක් පටන් ගත්තේ කොහොමද, Components හදලා ඒවා සංවිධානය කරගත්තේ කොහොමද, State සහ Props වලින් Dynamic Data කළමනාකරණය කරගත්තේ කොහොමද, ඒ වගේම React Router පාවිච්චි කරලා Pages අතර යන්නේ කොහොමද කියන දේවල් ඉගෙනගත්තා.

මේ Project එක ඔයාලට React Concepts Practical විදියට apply කරන්න ගොඩක් උදව් වෙන්න ඇති කියලා හිතනවා. මතක තියාගන්න, Software Development කියන්නේ නිරන්තරයෙන් ඉගෙනගන්න ඕන දෙයක්. මේ වගේ පොඩි Project තනියම කරන එකෙන් ඔයාගේ Skills ගොඩක් දියුණු වෙනවා.

මේ Project එක තව දියුණු කරන්න ඔයාලට පුළුවන් මේ වගේ දේවල් කරන්න:

  • Posts ටික වෙනම API එකකින් Fetch කරන්න (e.g., JSON Placeholder, Firebase).
  • Styling එකට CSS Modules, Styled Components, හෝ Tailwind CSS වගේ දෙයක් පාවිච්චි කරන්න.
  • තනි Post එකක් බලන්න Dynamic Route එකක් හදන්න (/blog/:id).
  • Contact Form එකට Actual Backend එකක් එකතු කරන්න.
  • Dark Mode වගේ Feature එකක් එකතු කරන්න.

මතක තියාගන්න, හැමදාම අලුත් දෙයක් ඉගෙනගන්න! මේක ඔයාගේ ඊළඟ Project එකට පාවිච්චි කරන්න බලන්න. ඔයාලගේ අත්දැකීම් සහ මේ Project එක කරද්දී ඔයාලට ඇති වුණු ගැටළු පහළින් Comment කරන්න!

ගිහින් එන්නම්! සුභ දවසක්! 🚀

Previous

Spring Boot Database Connection Leaks Sinhala Guide | ගැටළු හඳුනාගැනීම සහ විසඳීම

 Next

Spring Boot Deadlocks විසඳමු: Database & Application Deadlocks Sinhala Guide