ساخت برنامه نمایش ساعت در React js به صورت ساده

برای ایجاد یک برنامه ساده با استفاده از React.js که بتونه ساعت رو نمایش بده نیازی به استفاده از Component ها در React.js نیست و میتونید به صورت ساده هم این کار رو انجام بدید. در ادامه مرحله به مرحله این کار رو براتون توضیح میدم

آموزش ری اکت - ایجاد ساعت

ابتدا Visual Studio Code رو باز کنید. یک پروزه جدید رو ایجاد کنید. برای این کار ابتدا در یکی از درایوهای سیستم خودتون یک پوشه ایجاد کنید و سپس در اون پوشه پروزه خودتون رو ایجاد کنید.

create-react-app clockproject

دقت کنید که در اسم پروژه از حروف بزرگ استفاده نکنید. موقع ایجاد پروژه اتصال شما به اینترنت باید وصل باشد و تا اتمام ایجاد و نصب پروژه باید صبر کنید.

بعد از ایجاد پروژه ساختار پروژه شما چیزی مشابه با تصویر زیر خواهد بود.

خب چون در این پروژه آموزش ری اکت یک ساعت ساده را قرار است طراحی کنیم نیازی به بسیاری از امکانات نداریم. بنابراین تمامی محتویات پوشه src را انتخاب کنید و Delete کنید. حالا روی src کلیک راست کنید و گزینه New File را بزنید. یک فایل جدید را ایجاد کنید و نام آن را index.js قرار بدهید.

کدهای زیر را در این فایل کپی و پیست کنید

import React from 'react';
import reactDom from 'react-dom';

let tick = () =>{
    const element = (
        <div>
            <h2>Time Is {new Date().toLocaleTimeString()}</h2>
        </div>
    )

    reactDom.render(
        element,document.getElementById('root')
    
        );
}

setInterval(tick, 1000);

حالا در Terminal عبارت زیر را تایپ کنید و Enter را بزنید تا پروژه اجرا شود.

npm start

بعد از لحظاتی مرورگر پیش فرض باز می شود و ساعت را مشاهده خواهید کرد.

دقت کنید که در این پروژه فقط بخشی از صفحه که ساعت در آن نمایش داده می شود هر 1 ثانیه یک بار رفرش می شود و کل صفحه رفرش نمی شود.

آموزش React js - آشنایی با document.getElementById

برای نمایش محتویات یک Jsx می توانید از دستور زیر استفاده کنید.

  reactDom.render(
        element,document.getElementById('root')
    
        );

در دستور بالا متد render باعث می شود دستورات Jsx به دستورات قابل فهم برای مرورگر یا همان جاوااسکریپت تبدیل شود. سپس دستورات موجود در متغیر element در بخش root قرار می گیرند. 

در مورد root هم در این آموزش ری اکت باید به شما بگم که در همه پروژه های ری اکت یک کامپوننت اصلی وجود دارد که تمامی اجزا و کامپوننت های دیگر درون آن قرار دارند که به آن root می گویند. برای اینکه این تگ رو بتونید ببینید پوشه Public رو باز کنید و روی فایل index.html کلیک کتید و به دنبال تگ زیر بگردید

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