React PlatoBlockchain Data Intelligence میں CSS لکھنے کے مختلف طریقے۔ عمودی تلاش۔ عی

React میں CSS لکھنے کے مختلف طریقے

ٹائم سٹیمپ: 22 جون 2022 صبح 10:24 بجے

کے معیاری طریقے سے ہم سب واقف ہیں۔ اسٹائل شیٹ کو جوڑنا کرنے کے لئے <head> ایک HTML دستاویز کا، ٹھیک ہے؟ یہ کئی طریقوں میں سے ایک ہے جس سے ہم CSS لکھ سکتے ہیں۔ لیکن ایک صفحے کی ایپلی کیشن (SPA) میں چیزوں کو سٹائل کرنا کیسا لگتا ہے، ایک React پروجیکٹ میں کہتے ہیں؟

پتہ چلتا ہے کہ React ایپلیکیشن کو اسٹائل کرنے کے کئی طریقے ہیں۔ کچھ روایتی اسٹائل کے ساتھ اوورلیپ ہوتے ہیں، دوسرے اتنے زیادہ نہیں۔ لیکن آئیے ان تمام طریقوں کو گنیں جو ہم یہ کر سکتے ہیں۔

بیرونی اسٹائل شیٹس درآمد کرنا

جیسا کہ نام سے پتہ چلتا ہے، React CSS فائلیں درآمد کر سکتا ہے۔ یہ عمل اسی طرح ہے جس طرح ہم HTML میں CSS فائل کو لنک کرتے ہیں۔ <head>:

  1. اپنی پروجیکٹ ڈائرکٹری میں ایک نئی CSS فائل بنائیں۔
  2. سی ایس ایس لکھیں۔
  3. اسے ری ایکٹ فائل میں درآمد کریں۔

اس طرح:

import "./style.css";

یہ عام طور پر فائل کے اوپری حصے میں جاتا ہے جہاں دوسری درآمدات ہوتی ہیں:

import { React } from "react";
import "./Components/css/App.css";
function App() {
  return (
    <div className="main">
    </div>
  );
}
export default App;

اس مثال میں، ایک CSS فائل کو ایک میں درآمد کیا جاتا ہے۔ App.js سے /Components/css فولڈر.

ان لائن اسٹائل لکھیں۔

آپ کو یہ سننے کے عادی ہوسکتے ہیں کہ ان لائن اسٹائلنگ برقرار رکھنے کے لئے اتنا اچھا نہیں ہے اور کیا نہیں ہے، لیکن حالات ضرور ہیں (یہاں ایک ہے!) جہاں یہ معنی رکھتا ہے۔ اور React میں برقرار رکھنے کا کوئی مسئلہ نہیں ہے، کیونکہ CSS اکثر ویسے بھی ایک ہی فائل کے اندر بیٹھتا ہے۔

یہ React میں ان لائن اسٹائلنگ کی ایک انتہائی سادہ مثال ہے:

<div className="main" style={{color:"red"}}>

ایک بہتر نقطہ نظر، اگرچہ، اشیاء کو استعمال کرنا ہے:

  1. سب سے پہلے، ایک ایسی چیز بنائیں جس میں مختلف عناصر کے لیے طرزیں ہوں۔
  2. پھر اسے استعمال کرتے ہوئے ایک عنصر میں شامل کریں۔ style attribute اور پھر پراپرٹی کو اسٹائل کے لیے منتخب کریں۔

آئیے اسے سیاق و سباق میں دیکھتے ہیں:

import { React } from "react";
function App() {
  const styles = {
    main: {
      backgroundColor: "#f1f1f1",
      width: "100%",
    },
    inputText: {
      padding: "10px",
      color: "red",
    },
  };
  return (
    <div className="main" style={styles.main}>
      <input type="text" style={styles.inputText}></input>
    </div>
  );
}
export default App;

اس مثال میں a styles دو مزید اشیاء پر مشتمل آبجیکٹ، ایک کے لیے .main کلاس اور دوسرا ٹیکسٹ ان پٹ کے لیے، جس میں اسٹائل کے اصول اسی طرح ہوتے ہیں جو ہم بیرونی اسٹائل شیٹ میں دیکھنے کی توقع کرتے ہیں۔ ان اشیاء کو پھر لاگو کیا جاتا ہے۔ style عناصر کی خصوصیت جو لوٹے ہوئے مارک اپ میں ہیں۔

نوٹ کریں کہ گھوبگھرالی بریکٹ استعمال کیے جاتے ہیں جب ہم عام طور پر سادہ HTML میں استعمال کیے جانے والے کوٹیشن مارکس کے بجائے سٹائل کا حوالہ دیتے ہیں۔

CSS ماڈیول استعمال کریں۔

سی ایس ایس ماڈیولز… ان لوگوں کو کیا ہوا، ٹھیک ہے؟ ان کے پاس مقامی طور پر دائرہ کار والے متغیرات کا فائدہ ہے اور انہیں رد عمل کے ساتھ ساتھ استعمال کیا جا سکتا ہے۔ لیکن وہ کیا ہیں، دوبارہ، بالکل؟

کا حوالہ دیتے ہوئے ریپو کی دستاویزات:

سی ایس ایس ماڈیولز انفرادی سی ایس ایس فائلوں کو سی ایس ایس اور ڈیٹا دونوں میں مرتب کرکے کام کرتے ہیں۔ سی ایس ایس آؤٹ پٹ عام، عالمی سی ایس ایس ہے، جسے براہ راست براؤزر میں انجکشن کیا جا سکتا ہے یا ایک ساتھ جوڑ کر پروڈکشن کے استعمال کے لیے فائل میں لکھا جا سکتا ہے۔ ڈیٹا کا استعمال انسانی پڑھنے کے قابل ناموں کا نقشہ بنانے کے لیے کیا جاتا ہے جنہیں آپ نے فائلوں میں عالمی سطح پر محفوظ آؤٹ پٹ CSS پر استعمال کیا ہے۔

آسان الفاظ میں، CSS ماڈیولز ہمیں ایک ہی کلاس کا نام ایک سے زیادہ فائلوں میں بغیر تصادم کے استعمال کرنے کی اجازت دیتا ہے کیونکہ ہر کلاس کے نام کو ایک منفرد پروگرامی نام دیا جاتا ہے۔ یہ خاص طور پر بڑی ایپلی کیشنز میں مفید ہے۔ ہر کلاس کے نام کا دائرہ مقامی طور پر اس مخصوص جزو تک ہوتا ہے جس میں اسے درآمد کیا جا رہا ہے۔

سی ایس ایس ماڈیول اسٹائل شیٹ ایک باقاعدہ اسٹائل شیٹ کی طرح ہوتی ہے، صرف ایک مختلف ایکسٹینشن کے ساتھ (مثال کے طور پر styles.module.css)۔ یہاں یہ ہے کہ وہ کیسے ترتیب دیئے گئے ہیں:

  1. کے ساتھ ایک فائل بنائیں .module.css توسیع کے طور پر.
  2. اس ماڈیول کو React ایپ میں درآمد کریں (جیسا کہ ہم نے پہلے دیکھا تھا)
  3. ایک شامل کریں className کسی عنصر یا جزو کا حوالہ دیں اور درآمد شدہ طرزوں سے مخصوص انداز کا حوالہ دیں۔

انتہائی سادہ مثال:

/* styles.module.css */
.font {
  color: #f00;
  font-size: 20px;
}

import { React } from "react";
import styles from "./styles.module.css";
function App() {
  return (
    <h1 className={styles.heading}>Hello World</h1>
  );
}
export default App;

اسٹائل والے اجزاء استعمال کریں۔

کیا آپ نے استعمال کیا ہے اسٹائل شدہ اجزاء? یہ کافی مقبول ہے اور آپ کو اپنے JavaScript میں اصل CSS کا استعمال کرتے ہوئے حسب ضرورت اجزاء بنانے کی اجازت دیتا ہے۔ ایک اسٹائل شدہ جزو بنیادی طور پر ایک رد عمل کا جزو ہوتا ہے — اس کے لیے تیار ہو جاؤ — اسٹائل۔ کچھ خصوصیات میں منفرد کلاس کے نام، متحرک اسٹائلنگ اور CSS کا بہتر انتظام شامل ہے کیونکہ ہر جزو کی اپنی الگ الگ طرزیں ہیں۔

کمانڈ لائن میں اسٹائلڈ اجزاء npm پیکیج انسٹال کریں:

npm install styled-components

اگلا، اسے React ایپ میں درآمد کریں:

import styled from 'styled-components'

ایک جزو بنائیں اور اسے اسٹائل شدہ پراپرٹی تفویض کریں۔ میں بیک ٹِکس کے ذریعے ظاہر کردہ ٹیمپلیٹ لٹریلز کا استعمال نوٹ کریں۔ Wrapper اعتراض:

import { React } from "react";
import styled from "styled-components";
function App() {
  const Wrapper = styled.div`
    width: 100%;
    height: 100px;
    background-color: red;
    display: block;
  `;
  return <Wrapper />;
}
export default App;

مندرجہ بالا Wrapper جزو کو ایک div کے طور پر پیش کیا جائے گا جس میں ان طرزوں پر مشتمل ہے۔

مشروط اسٹائل

اسٹائلڈ اجزاء کے فوائد میں سے ایک یہ ہے کہ اجزاء خود کارآمد ہیں، جیسا کہ آپ CSS کے اندر پرپس استعمال کرسکتے ہیں۔ اس سے ریاست یا سہارے کی بنیاد پر مشروط بیانات اور بدلتے ہوئے انداز کا دروازہ کھل جاتا ہے۔

یہاں ایک ڈیمو ہے جو اسے دکھا رہا ہے:

یہاں، ہم div کی ہیرا پھیری کر رہے ہیں۔ display ڈسپلے اسٹیٹ پر پراپرٹی۔ اس حالت کو ایک بٹن کے ذریعے کنٹرول کیا جاتا ہے جو کلک کرنے پر div کی حالت کو ٹوگل کرتا ہے۔ یہ، بدلے میں، دو مختلف ریاستوں کے اندازوں کے درمیان ٹوگل کرتا ہے۔

ان لائن میں if بیانات، ہم استعمال کرتے ہیں a ? معمول کے بجائے if/else نحو دی else حصہ سیمی کالون کے بعد ہے۔ اور یاد رکھیں کہ اسٹیٹ کو شروع کرنے کے بعد ہمیشہ کال کریں یا استعمال کریں۔ اس آخری ڈیمو میں، مثال کے طور پر، ریاست کو اوپر ہونا چاہیے۔ Wrapper اجزاء کی طرزیں

ہیپی ری ایکٹ اسٹائل!

یہ ایک لپیٹ ہے، لوگو! ہم نے React ایپلی کیشن میں طرزیں لکھنے کے مٹھی بھر مختلف طریقوں کو دیکھا۔ اور ایسا نہیں ہے کہ ایک باقی سے بہتر ہے۔ آپ جو طریقہ استعمال کرتے ہیں اس کا انحصار صورتحال پر ہوتا ہے۔ امید ہے کہ اب آپ ان کے بارے میں اچھی طرح سمجھ چکے ہوں گے اور جان چکے ہوں گے کہ آپ کے React اسٹائلنگ ہتھیاروں میں بہت سارے ٹولز موجود ہیں۔

ٹائم اسٹیمپ:

سے زیادہ سی ایس ایس ٹیکنیکس