রিঅ্যাক্ট ব্যাসিকসঃ প্রোজেক্ট সেটআপ

রিঅ্যাক্ট কিভাবে কাজ করে সেটা আমি গত পর্বে আলোচনা করেছি। আশা করি এবার বুঝতে পেরেছেন কেনো রিঅ্যাক্ট ইউজ করা উচিত।

রিঅ্যাক্ট এর লাইব্রেরী টা এমনভাবে বানানো হয়েছে যে এখানে আপনি গোড়া থেকে কিছু না জেনেই প্রোজেক্ট করা শুরু করতে পারবেন। হ্যাঁ তবে অবশ্যই আপনার জাভাস্ক্রিপ্ট(ইএস৬ সহ) নিয়ে নলেজ থাকতে হবে। আর সেই সাথে এইচটিএমএল আর সিএসএস তো অবশ্যই। তাহলেই আপনি এখন রিঅ্যাক্ট শিখার জন্যে সম্পূর্ন তৈরী।

রিঅ্যাক্ট এ প্রোজেক্ট দুইভাবে সেটআপ করা করা যায়ঃ

১। অলরেডি আছে এমন ওয়েবসাইটে/ওয়েবপেজে রিঅ্যাক্ট অ্যাড করা;

২। একদম নতুন প্রোজেক্ট শুরু করা পুরোপুরি রিঅ্যাক্ট লাইব্রেরী দিয়ে।

এখানে প্রথমটা নিয়ে আমি আমার এই সিরিজে আলোচনা করবো না। এটা ঠিক জেকোয়েরীর মতো করেই সেটআপ করতে হয়। এখানে আপনি রিঅ্যাক্ট এর প্রোডাকশন ভার্শনের স্ক্রিপ্ট script ট্যাগের মাধ্যেমে আপনার অলরেডি থাকা প্রোজেক্টে স্ক্রিপ্টগুলো অ্যাড করে কাজ শুরু করে দিতে পারবেন। এভাবে যদিও কাজ করা যায় কিন্তু এটা রিকোমেন্ডেড না। আপনি আরো জানতে চাইলে রিঅ্যাক্ট এর অফিশিয়াল ডকুমেন্টেশনে দেখতে পারেন কিভাবে আপনি আপনার অলরেডি আছে এরকম ওয়েবসাইটে কিভাবে স্ক্রিপ্ট অ্যাড করবেন।

আর দ্বিতীয়টায় একদম নতুন করে একটা রিঅ্যাক্ট এর প্রোজেক্ট সেটআপ করে সেখানে সব কাজ সম্পূর্ন রিঅ্যাক্ট দিয়েই করা হয়। এই পদ্ধতিতেই আমরা এই সিরিজে আলোচনা করবো এবং এটাই বেস্ট ওয়ে।

রিঅ্যাক্ট এ কাজ করার আগে আপনাকে শিউর হয়ে নিতে হবে আপনার ম্যাশিনে নোড জেএস(Node JS) এবং এনপিএম (NPM) ইন্সটল করা আছে। যদি ইন্সটল করা না থাকে তাহলে এখান থেকে নোড জেএস এর এলটিএস (LTS) ভার্শন ডাউনলোড করে নিন। তারপর সেটআপ করে ফেলুন, সেটআপে অতিরিক্ত কোন ঝামেলা নেই তাই করে ফেলতে পারবেন সহজেই। আর আশা করি আপনার কমান্ড লাইন সম্পর্কে ব্যাসিক ধারনা আছে। যদি না থাকে তাহলে আমি ঠিক যেভাবে যেভাবে কমান্ডগুলো লিখবো সেগুলো ফলো করলেই হয়ে যাবে। আর কমান্ড লাইনের ব্যাসিকটা শিখে নেওয়াই ভালো। তাই শিখে না থাকলে শিখে ফেলবেন তাড়াতারি।

এখন নোড জেএস এর সেটআপ শেষ হয়ে গেলে আপনার কমান্ড লাইন ওপেন করুন। উইন্ডোজ ইউজার হয়ে থাকলে আপনি এই কমান্ড লাইনটা ইউজ করতে পারেন। আমার কাছে উইন্ডোজ এর সাথের CMD খুব বেশী ফ্লেক্সিবল মনে হয় না কাজ করার ক্ষেত্রে। তাই আমি এটা (cmder) রিকোমেন্ড করবো। আরো অনেক কমান্ড লাইন আছে অনলাইনে, আপনি আপনার পছন্দমতো একটা নামিয়ে ফেলুন। এবার আপনি আপনার পছন্দের কমান্ড লাইন ওপেন করুন আর নিচের কমান্ড দুইটা লিখে এন্টার চাপুনঃ

node -v

এবং,

npm -v

দেখবেন দুইটা কমান্ডই ভার্শন নাম্বার দেখাচ্ছে। অন্যকিছু দেখালে বা কমান্ড নট ফাউন্ড(Command Not Found) টাইপের এরর আসলে নোড জেএস আবার পুনরায় সেটআপ করে ট্রাই করবেন। আর আপনি এরকম ভার্শন নাম্বার দেখতে পারলে বুঝবেন আপনি এবার রিঅ্যাক্ট এর প্রোজেক্ট ক্রিয়েট কওরার জন্যে রেডীঃ

রিঅ্যাক্ট এ নতুন প্রজেক্ট সেটআপ করা একটু ঝামেলাকর। কিন্তু যাই হউক রিঅ্যাক্ট সেই ঝামেলা এড়ানোর জন্যে একটা টুলস ও নির্মাণ করেছে। তাই আপাতত প্রথমেই আমাদের কোনো ঝামেলাা পোহাতে হবে না। আমরা প্রথমেই একদম গভীরে যাবো না কিভাবে একটা প্রোজক্ট সেটআপ করতে হয় সেই ব্যাপারে।

রিঅ্যাক্ট একটা কমান্ড লাইন ইন্টারফেস (CLI) তৈরী করেছে যেটা দিয়ে সহজেই আপনি একদম নতুন একটা রিঅ্যাক্ট এর প্রোজেক্ট তৈরী করতে পারবেন। আর প্রথমে শিখার সময়, এমনকি পরে কাজ করার সময়েও খুব বেশী দরকার না হলে আপনাকে ম্যানুয়ালি প্রোজেক্ট সেটআপ করতে হবে না, আপনি এটা ইউজ করেই সহজে প্রোজেক্ট তৈরী করে ফেলতে পারবেন। এমনিতে একেবারে শূন্য থেকে শুরু করতে গেলে অনেকগুলো কাজ করতে হয়। তারপরেও আপনার ইন্টারেস্ট থাকলে একদম শূন্য থেকে কিভাবে রিঅ্যাক্ট এর প্রোজেক্ট শুরু করবেন তাহলে আমি এই লেখার একদম শেষে একটা লিঙ্ক দিয়ে দিবো। তবে এখন যদি আপনি রিঅ্যাক্ট শিখার উদ্দেশ্যে আমার লেখা পরে থাকেন তাহলে আপনার শূন্য থেকে প্রোজেক্ট স্টার্ট করতে হবে না। আপনি কমান্ড লাইন ইন্টারফেস (CLI) ইউজ করেই এখন প্রোজেক্ট করা শুরু করতে পারেন। আর এটাই আমার কাছ থেকে রিকোমেন্ডেড থাকবে। কারণ প্রথমেই ঐদিকে গেলে ব্যাপারটা কমপ্লেক্স মনে হতে পারে, যেটা শিখার জন্যে মোটেও ইন্সপায়ারেশনাল না।

আর তাই আমরা সেই create-react-app নামের কমান্ড লাইন ইন্টারফেসটা প্রথমে ইন্সটল করবো। এটার কাজই হচ্ছে রিঅ্যাক্ট এর প্রোজেক্ট জেনারেট করা। মূলত এটার ভিতরেই অনেক কাজ অটোমেটেড করা হয় যেগুলো নিয়ে আপাতত আমাদের ভাবা দরকার নাই। আমরা আপাতত আসল জিনসের উপর ফোকাস করবো।

প্রথমে আপনি যে ফোল্ডারে/ডিরেক্টরিতে কাজ করবেন সেখানে যান এবং সেখানে আপনার পছন্দের কমান্ড লাইন ওপেন করেন। যেমন আমার ক্ষেত্রে আমি আমার ডেস্কটপে থাকা Workspace নামের একটা ডিরেক্টরির ভিতরের আরেকটা ডিরেক্টরিতে কাজ করবো। তাই আমি আমার কমান্ড লাইন খুলে সেখানে নিয়ে গেলামঃ

আপনি যেখানেই কাজ করুন না কেনো, এটা কোন ব্যাপার না

এখন আমরা বলেছিলাম যে আমরা create-react-app নামের একটা জিনিস ইন্সটল করবো। সেজন্যে আমরা এনপিএম (NPM) ইউজ করবো। এটার মানেই হচ্ছে নোড প্যাকেজ ম্যানেজার। আর তাই আমরা এটা দিয়ে আমাদের প্যাকেজটা ইন্সটল করবোঃ

উইন্ডোজ হলেঃ

npm i -g create-react-app

লিনাক্স হলেঃ

sudo npm i -g create-react-app

উপরের এই কমান্ডটা বুঝে না থাকলে সমস্যা নাই আমি খুলে বলছি। এখানে এটুকু বুঝার চেষ্টা করুন যে প্রথমে যে আমরা npm লিখেছি, এর মানে হচ্ছে আমরা এনপিএম প্যাকেজ ম্যানেজার ইউজ করতে চাচ্ছি। তারপর i দিয়ে আমরা বুঝাতে চাচ্ছি আমরা কিছু একটা ইন্সটল করতে চাচ্ছি। তারপরের ফ্ল্যাগ -g দিয়ে বুঝাতে চাচ্ছি আমরা এই জিনিসটা গ্লোবাললি ইন্সটল করতে চাচ্ছি, মানে যাতে সব জায়গা থেকে ইউজ করা যায় এমন করে। তারপরের create-react-app দিয়ে আমরা যে প্যাকেজটা ইন্সটল করতে চাচ্ছি সেটার ইউনিক নামটা দিলাম। আপনি https://www.npmjs.com/ ওয়েবসাইটে গেলে দেখবেন এরকম অনেক প্যাকেজ আছে, আর সব প্যাকেজেরই এরকম ইউনিক নাম আছে। এই কমান্ড দেওয়ার পর একটু হালকা একটা ডাউনলোড হবে। তারপর এরকম কিছু দেখবেনঃ

অন্যকিছু বা এরর দেখলে আবার ট্রাই করে দেখুন। আর সবকিছু ঠিকঠাক থাকলে মনে করবেন আপনার প্যাকেজ সফলভাবে ইন্সটল হয়েছে। এখন এটা ইউজ করা যাবে। একবার create-react-app আপনার ম্যাশিনে ইন্সটল হয়ে গেলে পরে ইচ্ছামতো রিঅ্যাক্ট এর প্রোজেক্ট তৈরী করতে পারবেন, create-react-app আর নতুন করে ইন্সটল দিতে হবে না।

আমরা এখন সেইম জায়গায় আমাদের প্রোজেক্ট টা শুরু করবো। এজন্যে আমাদের এখন ইন্সটল করা create-react-app দিয়ে প্রোজেক্ট জেনারেট করতে হবে এভাবেঃ

create-react-app react-project-setup

এভাবে কমান্ড দেওয়ার মানে হচ্ছে আমরা react-project-setup নামে একটা রিঅ্যাক্ট এর প্রোজেক্ট বানাতে চাচ্ছি create-react-app CLI দিয়ে। একবার এই কমান্ড দেওয়া হয়ে গেলে তারপর আপনার রিঅ্যাক্ট এর প্রোজেক্ট সেটআপ প্রসেস শুরু হয়ে যাবে। এখানে অনেকগুলো প্যাকেজ বা আমরা যেটাকে ডিপেন্ডেসি বলি সেগুলো ইন্সটল হবে। তাই আগে শিউর হয়ে নিবেন আপনার সেজন্যে যথেষ্ট ইন্টারনেট এবং ইন্টারনেট কানেকশন ঠিকঠাক আছে।

যাই হউক প্রোজেক্ট সেটআপ শেষ হতে একটু টাইম লাগবে ইন্টারনেটের স্পীডের উপর নির্ভর করে। শেষ হয়ে গেলে এরকম কিছু দেখতে পাবেনঃ

প্রোজেক্ট সফলভাবে সেটআপ হয়ে গেছে, কিছু ইন্সট্রাকশনও দেখাচ্ছে!

কোন এরর আসলে আবার ট্রাই করবেন। আর সেটআপ হয়ে গেলে এখন আপনার দেওয়া নামে react-project-setup একটা ডিরেক্টরি পাবেন। যেখানে আপনার রিঅ্যাক্ট অ্যাপ তৈরি হয়েছে। এখন কমান্ড লাইন থেকে সেই ডিরেক্টরিতে চলে যানঃ

cd react-project-setup

তারপর কোনকিছু ধরা ছাড়াই কমান্ড লাইনে লিখুনঃ

npm start

ব্যাস! তারপর একটু সময় পরে দেখবেন আপনার ব্রাউজারে একটা পেজ ওপেন হবে এবং অনেকটা এরকম একটা পেজ দেখতে পাবেনঃ

এখন আপনার কমান্ড লাইনে দেখবেন আপনার ডেভেলপমেন্ট সার্ভার চলছে। আপনি এখন এই ডিরেক্টরিতে কাজ করতে চাইলে অবশ্যই ডেভেলপমেন্ট সার্ভার চালু রাখতে হবে। তবে এখন আমরা সার্ভার অফ করে দিবো ctrl + c প্রেস করে।

এখন আপনার এই প্রোজেক্টটা আপনার পছন্দের কোড এডিটর দিয়ে ওপেন করুন। তবে আমি পার্সোনালী অ্যাটম ইউজ করি। আর তাই আমি কমান্ড লাইন থেকে এভাবে প্রোজেক্ট ওপেন করতে পারিঃ

atom .

এবার দেখুন এখানে অনেকগুলো ফাইল আছে। আপনি src এর ভিতর থেকে App.js ফাইলটা ওপেন করুন আর এখানে Edit <code>src/App.js</code> and save to reload. নামের লেখাটা এডিট করে সেইভ করুনঃ

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            My First React Project
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}
export default App;

তারপর আবার কমান্ড লাইনে npm start কমান্ড দিয়ে ডেভেলমেন্ট সার্ভার ওপেন করুন। এখন ডেভেলপমেন্ট সার্ভার চলা অবস্থায় যদি আপনি কমান্ড লাইনে অন্য কোন কাজ করতে চান তাইলে আপনাকে সেইম ডিরেক্টরিতে আপনার কমান্ড লাইনের আরেকটা উইন্ডো ওপেন করতে হবে। এখন আবার আপনার প্রোজেক্ট ওপেন হবে ব্রাউজারে এবং আপনি আপনার পরিবর্তনগুলো দেখতে পাবেন।

এখন ডেভেলপমেন্ট সার্ভার চালু থাকা অবস্থায় যদি প্রোজেক্ট এর ভিতরের কোন ফাইল মডিফাই করেন তাহলে দেখবেন আপনার সেই ব্রাউজার উইন্ডোটা রিলোড হবে অটোম্যাটিক্যালি আর আপনিও আপনার পরিবর্তন দেখতে পাবেন। এটাই মূলত create-react-app এর খেলা, আর তাই এটা ইউজ করে ডেভেলপমেন্ট প্রসেস সহজ করা যায়।

এবার আসুন আমরা আমাদের প্রোজেক্টে থাকা ফাইল এবং ফোল্ডার/ডিরেক্টরি গুলো কিসের সেগুলো নিয়ে আলোচনা করি।

প্রথমেই দেখবেন একটা ফোল্ডার node_modules নামে। এখানে মূলত আপনার প্রোজেক্ট তৈরি করার জন্যে যে যে প্যাকেজগুলো লাগবে সেগুলো সব স্টোর করা থাকে। আপনাকে এটা টাচও করতে হবে না।

তারপরে দেখতে পাবেন public নামের একটা ডিরেক্টরি। প্রথমে দেখবেন favicon.ico নামের একটা ফাইল। বুঝতেই পারছেন এটা ফ্যাভিকনের জন্যে ইউজ হচ্ছে। আর তাই আপনি আপনার কাস্টম ফ্যাভিকন চাইলে এই ফাইলটা রিপ্লেস করতে হবে। তারপর দেখবেন index.html ফাইলটা। এখানে আমাদের একদম প্রাথমিক এইচটিএমএলের মার্কাপটা থাকে। এখানে চাইলে আপনি কাস্টম সিএসএস বা ক্লাইন্ট সাইডেড জাভাস্ক্রিপ্ট এর স্ক্রিপ্টও অ্যাড করতে পারবেন। তবে খুব বেশী দরকার না হলে এখানে এগুলো অ্যাড না করাই ভালো। এখানে যেটা গুরুত্বপূর্ন সেটা হচ্ছে আপনার পেজের টাইটেল। তাই এখান থেকে টাইটেলটা চেঞ্জ করে নিবেন। আমরা একটা টাইটেল দিলাম My First React Project। আরেকটা গুরুত্বপূর্ন জিনিস দেখবেন যেটা সেটা হচ্ছে থিম কালার মেটা ট্যাগ। এটা কি একটু দেখাই। আপনি যদি আমার ওয়েবসাইট মোবাইলের গুগুল ক্রোম থেকে ভিসিট করেন, তাহলে দেখবেন অ্যাড্রেসবারটা আমার ওয়েবসাইটের কালারের মতো হলুদ হয়ে গেছেঃ

এটা ঠিক এখানেই ডিফাইন করতে হয়। আমরাও একটু চেঞ্জ করে দিবো এখানে #61dafb. সবগুলো লেখা এডিট করার পর index.html ফাইলটা এমন হবেঃ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#61dafb" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>My First React Project</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

তারপরে এখানেই আরেকটা লাইন দেখবেনঃ

<div id="root"></div>

মূলত এখানেই এই root আইডিতে আমাদের রিঅ্যাক্ট অ্যাপটা রেন্ডার হবে। এটা নিতে পরে আলোচনা করা হবে।

তারপরে এই ডিরেক্টরিতেই আরেকটা ফাইল দেখবেন manifest.json নামে। create-reacta-app দিয়ে প্রোজেক্ট সেটআপ করলে বাই ডিফল্ট প্রগ্রেসিভ ওয়েব অ্যাপ ফ্রেন্ডলি প্রোজেক্ট সেটআপ হয়। আপনি যদি না জেনে থাকেন প্রগ্রেসিভ ওয়েব অ্যাপ সম্পর্কে, তাহলে এটার অনেকগুলো কাজের মধ্যে একটা কাজ হচ্ছে আপনি আপনার ওয়েবসাইটটাকে মোবাইলের ব্রাউজারের(Google Chrome, Firefox for Mobile) Add to Home এ ক্লিক করে মোবাইল অ্যাপের মতো একটা ভার্শন করতে পারবে ইউজার। এর সম্পর্কে আরো জানতে এখানে দেখুন। আর manifest.json ফাইলটাও সেইম এটার সেটআপের জন্যেই। এখানেও আপনি চাইলে আপনার অ্যাপসের নাম অনুযায়ী ভিতরে short_name, name, theme_color এবং background_color গুলো চেঞ্জ করে দিতে পারেন। চেঞ্জ করা এমন হবে ফাইলটাঃ

{
  "short_name": "First Project",
  "name": "My First React Project",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#61dafb",
  "background_color": "#ffffff"
}

তারপরে আছে src ডিরক্টরি, এটা নিয়ে শেষে আলোচনা করবো। কিন্তু এবার রুট ডিরেক্টরিতে দেখেন কিছু ফাইল আছে। তারমধ্যে .gitignore হচ্ছে গিট এ অপ্রয়োজনীয় ফাইল কমিট করা থেকে বিরত রাখার জন্যে। এখানে আপনি কিছু চেঞ্জ না করলেও হবে। তারপর আছে package-lock.json ফাইল, যেটা আসলে package.json ফাইল থেকেই তৈরি হয়। আর তাই আপনার এটা নিয়েও চিন্তা করতে হবে না। এবার দেখুন package.json ফাইলটা। এটা অনেক ইম্পরট্যান্ট আমাদের প্রোজেক্ট এর জন্যে। এটা অনেকটা রেসিপির মতো। একটা রেসিপিতে যেমন কিভাবে কিভাবে রান্না করতে হয় সেগুলো বলা থাকে, ঠিক তেমনভাবেই আমাদের অ্যাপ্লিকেশন বানাতে কি কি প্যাকেজ, টুলস লাগবে এগুলো এখানে বলা থাকে। তাই এটা অনেক ইম্পরট্যান্ট। এখানেও আপনাকে কিছু করতে হবে না। তবে ভিতরে dependencies তে দেখুন কিছু প্যাকেজের নাম আছে।

আপনি নতুন কোন প্যাকেজও আপনার এই প্রোজেক্টে এনপিএম দিয়ে ইন্সটল করলে এখানে চলে আসবে। এখানে আমাদের কোনোকিছুতে ধরতে হবে না। সবশেষে README.md ফাইলটা গিটহাবে আপলোড করলে ডকুমেন্টেশন হিসাবে সামনে যে বর্ণনাগুলো আসে সেগুলো এই ফাইলে লেখা হয়ে থাকে। এখানে যে সিনট্যাক্স টা ইউজ করা হয় সেটাকে মার্কডাউন মার্কাপ ল্যাঙ্গুয়েজ বলে। আপনার এখনি এটা জানতে হবে না, তবে জানতে চাইলে আমার একটা আর্টিকেল আছে, ঐটা দেখতে পারেন।

এবার আসুন আমরা src ডিরেক্টরি নিয়ে কথা বলি। এখানেই মূলত আমাদের সব প্রোজেক্টের ফাইলগুলো যাবে। এখানে যত ফাইল আছে সবগুলোর মধ্যে সবচেয়ে বেশি ইম্পরট্যান্ট হচ্ছে index.js ফাইলটা। কারণ create-react-app এমনভাবে প্রোজেক্ট সেটআপ করে যে এটা এই src ডিরেক্টরির ভিতরে প্রথম index.js ফাইলটাকেই খোঁজ করবে। আর বাকি যত ফাইল আছে সবগুলো এটার ভিতরে বলা আছে কে কোথায়, কিভাবে কাজে লাগাতে হবে। আর তাই আমরা এই index.js এবং registerServiceWorker.js বাদেsrc ডিরেক্টরির ভিতরের বাকি সবগুলো ফাইল ডিলেট করে ফেলবো এখনঃ

এই দুটোই থাকবে

তারপর index.js এর ভিতরেও যত ফাইল ইম্পোর্ট করা হয়েছে তারমধ্যে কিছু রেফারেন্স ডিলেট করে দিবো। সেই সাথে <App /> এর বদলে কিছু এইচটিএমএলের মতো দেখতে সিনট্যাক্স লিখবো। সবশেষে index.js ফাইলটা এরকম দেখা যাবেঃ

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<h1>My First React Project</h1>, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

ব্যাস এবার সেইভ করে আপনার ব্রাউজারে দেখুন এরকম কিছু দেখাবেঃ

ব্যাস! আপনার প্রথম রিঅ্যাক্ট অ্যাপ তৈরি ডেভেলপমেন্ট এর জন্যে। প্রথমে প্রোজেক্ট সেটআপ করাটা ঝামেলার মনে হলেও পরে ঠিক হয়ে যাবে। তাই একটু ধৈর্য্য ধরে কিভাবে প্রোজেক্ট জেনারেট করতে হয় সেটা শিখে ফেলুন। আশা করি প্রোজেক্ট তৈরি করতে আর কোন সমস্যা হবে না। তারপরেও কেউ কোন প্রব্লেম ফেস করলে আমাকে অবশ্যই জানাবেন।

আর সময় সময় রিঅ্যাক্ট এর এই স্টার্টার প্যাকের স্ট্রাকচার বা কনফিগারেশন কিছুটা পরিবর্তনও হতে পারে। আপনি হয়তো ঠিক এরকম স্ট্রাকচার নাও দেখতে পাবেন। তবে আইডিয়াগুলো সেইমই থাকবে আশা করি। আপনি যদি ভিন্নরকম দেখতে পান, তাহলে ঘাবড়ানোর কোনো কারণ নাই। নিজে নিজে একটু ঘাটলেই বুঝে ফেলবেন।

আজকে এই পর্যন্তই। আজকে প্রোজেক্ট ফাইল ফিনিস হওয়ার পরে যেরকম অবস্থায় আছে সেটা এখান থেকে ডাউনলোড করতে পারবেন। আর মনে রাখবেন এরকম প্রোজেক্ট ডাউনলোড করলে কমান্ড লাইন ওপেন করে আপনাকে কমান্ড দিয়ে সব প্যাকেজ ইন্সটল করে নিতে হবে। কারণ সবগুলো প্যাকেজের সাইজ হেভি হওয়ায় প্যাকেজগুলো প্রোজেক্টের সাথে দেওয়া থাকে না। জাস্ট রেসিপি দেওয়া থাকে। আপনি প্রোজেক্ট ডাউনলোড করার পর প্রোজেক্ট এর ভিতরে কমান্ড লাইন খুলে এই সিম্পল কমান্ডটা দিলেই সব প্যাকেজ ডাউনলোড হয়ে যাবেঃ

npm i

ব্যাস! এবার আপনি এটা নিয়ে নাড়াচাড়া করতে পারবেন, প্র্যাক্টিস করতে পারবেন যত ইচ্ছা।

আমার এই লেখা পূর্বে আমার ব্লগে প্রকাশিত হয়েছে। চাইলে আমার ব্লগ থেকে ঘুরে আসতে পারেন। ব্লগ থেকে সাবস্ক্রাইব করলে আমি নিজে থেকেই আমার নতুন লেখাগুলো আপনার ইমেইলে প্রতি শুক্রবার সকালে পাঠিয়ে দিবো। ভালো থাকবেন। হ্যাপী প্রোগ্রামিং!