React परिचय मार्गदर्शिका: शून्यापासून तुमचा पहिला यूजर इंटरफेस तयार करा
React परिचय मार्गदर्शिका: शून्यापासून तुमचा पहिला यूजर इंटरफेस तयार करा
React हे यूजर इंटरफेस (User Interface) तयार करण्यासाठी वापरले जाणारे JavaScript लायब्ररी (library) आहे. हे Facebook द्वारे विकसित आणि व्यवस्थापित केले जाते आणि फ्रंट-एंड डेव्हलपमेंटमधील (front-end development) सर्वात लोकप्रिय साधनांपैकी एक बनले आहे. ही मार्गदर्शिका तुम्हाला शून्यापासून सुरुवात करून, React च्या मूलभूत संकल्पना टप्प्याटप्प्याने समजून घेण्यास आणि एक साधा यूजर इंटरफेस तयार करण्यास मदत करेल.
React का निवडावे?
React मध्ये खालील फायदे आहेत:
- घटक (Component) आधारित: React यूजर इंटरफेसला स्वतंत्र, पुन्हा वापरण्यायोग्य घटकांमध्ये (components) विभाजित करते. यामुळे कोड (code) व्यवस्थापित करणे आणि समजून घेणे सोपे होते.
- घोषणात्मक (Declarative): React घोषणात्मक प्रोग्रामिंग (declarative programming) शैली वापरते, याचा अर्थ तुम्हाला फक्त तुम्ही काय सादर करू इच्छिता हे सांगायचे आहे, React अपडेट (update) आणि रेंडरिंगची (rendering) काळजी घेईल.
- कार्यक्षम: React व्हर्च्युअल DOM (Virtual DOM) आणि स्मार्ट डिफ (diff) अल्गोरिदम (algorithm) वापरते, जे अनावश्यक रेंडरिंग कमी करून यूजर इंटरफेसला कार्यक्षमतेने अपडेट करते.
- मोठा समुदाय (Community) सपोर्ट: React ला मोठा समुदाय आणि समृद्ध इकोसिस्टमचा (ecosystem) सपोर्ट आहे. तुम्हाला शिकण्यासाठी भरपूर ट्यूटोरियल (tutorials), लायब्ररी आणि साधने मिळतील, जी तुम्हाला डेव्हलपमेंटमध्ये मदत करतील.
- क्रॉस-प्लॅटफॉर्म क्षमता: React Native तुम्हाला React वापरून मूळ मोबाईल ॲप्स (native mobile apps) (iOS आणि Android) विकसित करण्यास अनुमती देते.
तयारी
सुरुवात करण्यापूर्वी, तुमच्या कॉम्प्युटरवर खालील साधने स्थापित असल्याची खात्री करा:
- Node.js: Node.js हे JavaScript रनटाइम वातावरण (runtime environment) आहे, जे React डेव्हलपमेंट टूल्स (development tools) चालवण्यासाठी वापरले जाते. तुम्ही ते https://nodejs.org/ वरून डाउनलोड आणि इंस्टॉल (install) करू शकता.
- npm किंवा yarn: npm (Node Package Manager) आणि yarn हे JavaScript पॅकेज मॅनेजर (package manager) आहेत, जे React च्या अवलंबित्व (dependencies) इंस्टॉल आणि व्यवस्थापित करण्यासाठी वापरले जातात. सहसा Node.js इंस्टॉल करताना npm देखील इंस्टॉल होते. yarn https://yarnpkg.com/ वरून इंस्टॉल केले जाऊ शकते.
तुमचा पहिला React ॲप तयार करा
आम्ही create-react-app वापरून React प्रोजेक्ट (project) लवकर तयार करू.
-
npm वापरून तयार करा:
npx create-react-app my-first-react-app cd my-first-react-app npm start -
yarn वापरून तयार करा:
yarn create react-app my-first-react-app cd my-first-react-app yarn start
वर दिलेली कमांड (command) एक्झिक्युट (execute) केल्यानंतर, create-react-app आपोआप my-first-react-app नावाचे डायरेक्टरी (directory) तयार करेल आणि त्या डायरेक्टरीमध्ये React प्रोजेक्ट सुरू करेल. npm start किंवा yarn start कमांड डेव्हलपमेंट सर्व्हर (development server) सुरू करेल आणि तुम्ही ब्राउझरमध्ये http://localhost:3000 वर तुमचा React ॲप पाहू शकता.
डायरेक्टरी स्ट्रक्चर (Directory Structure)
create-react-app द्वारे तयार केलेल्या प्रोजेक्टची डायरेक्टरी स्ट्रक्चर खालीलप्रमाणे असेल:
my-first-react-app/
├── node_modules/ # प्रोजेक्ट अवलंबित्व लायब्ररी (Project dependency libraries)
├── public/ # स्टॅटिक संसाधने (Static resources) (उदा. HTML फाईल्स)
│ ├── index.html # ॲप्लिकेशनची एंट्री HTML फाईल
│ └── ...
├── src/ # React सोर्स कोड
│ ├── App.css # App घटकासाठी CSS स्टाईल
│ ├── App.js # App घटक
│ ├── App.test.js # App घटकासाठी टेस्ट फाईल
│ ├── index.css # ग्लोबल CSS स्टाईल
│ ├── index.js # ॲप्लिकेशनची एंट्री JavaScript फाईल
│ ├── logo.svg # React लोगो
│ └── ...
├── .gitignore # Git इग्नोर फाईल
├── package.json # प्रोजेक्ट मेटाडेटा आणि अवलंबित्व (Project metadata and dependencies)
├── README.md # प्रोजेक्ट डॉक्युमेंटेशन (Project documentation)
└── yarn.lock # अवलंबित्व आवृत्ती लॉक फाईल (Dependency version lock file) (जर yarn वापरले असेल तर)
React घटक समजून घेणे
React ॲप्लिकेशन घटकांनी बनलेले असतात. घटक हे स्वतंत्र, पुन्हा वापरण्यायोग्य कोड ब्लॉक आहेत, जे यूजर इंटरफेसचा (User Interface) विशिष्ट भाग रेंडर (Render) करण्यासाठी वापरले जातात.
src/App.js फाईलमध्ये, तुम्हाला डिफॉल्ट App घटक दिसेल:
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
Edit `src/App.js` and save to reload.
[
Learn React
](https://reactjs.org)
);
}
export default App;
कोड स्पष्टीकरण:
import React from 'react';React लायब्ररी इम्पोर्ट (Import) करा.function App() { ... }Appनावाचा फंक्शन घटक परिभाषित करा.return ( ... )JSX एक्सप्रेशन (Expression) परत करा, जे घटक काय रेंडर (Render) करेल याचे वर्णन करते.export default App;Appघटक एक्सपोर्ट (Export) करा, जेणेकरून तो इतर फाईल्समध्ये वापरला जाऊ शकेल.
JSX (JavaScript XML)
JSX हे JavaScript सिंटॅक्स एक्सटेंशन (Syntax extension) आहे, जे तुम्हाला JavaScript कोडमध्ये HTML सारखा कोड लिहिण्याची परवानगी देते. वरील उदाहरणामध्ये, ... हे JSX एक्सप्रेशन आहे. JSX कोड Babel द्वारे स्टँडर्ड (Standard) JavaScript कोडमध्ये रूपांतरित केला जातो, जेणेकरून ब्राउझरला तो समजू शकेल.
App घटक सुधारणे
चला App घटक सुधारू आणि एक साधा काउंटर (Counter) तयार करू.
import React, { useState } from 'react';
import './App.css';
function App() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return (
# काउंटर
सध्याची संख्या: {count}
+
-
);
}
export default App;
बदलण्याची सूचना:
import React, { useState } from 'react';useStateहुक आयात करा.useStateहे एक React हुक आहे, जे फंक्शन कंपोनंटमध्ये स्टेट जोडण्यासाठी वापरले जाते.const [count, setCount] = useState(0);useStateहुक वापरूनcountनावाचे स्टेट व्हेरिएबल तयार करा आणि ते0ने इनिशियलाइझ करा.setCountहेcountस्टेट अपडेट करण्यासाठी फंक्शन आहे.const increment = () => { setCount(count + 1); };incrementनावाचे फंक्शन डिफाइन करा, जेcountस्टेटमध्ये 1 जोडण्यासाठी वापरले जाते.const decrement = () => { setCount(count - 1); };decrementनावाचे फंक्शन डिफाइन करा, जेcountस्टेटमधून 1 वजा करण्यासाठी वापरले जाते.- `सध्याची संख्या: {count}
पेजमध्येcountस्टेटची व्हॅल्यू दाखवा.{count}` हे JSX एक्सप्रेशन आहे, जे JSX कोडमध्ये JavaScript व्हेरिएबल इन्सर्ट करण्यासाठी वापरले जाते.
+आणि-दोन बटणे तयार करा, जे अनुक्रमेincrementआणिdecrementफंक्शनला बांधलेले आहेत.onClickहे इव्हेंट हँडलर आहे, जे बटन क्लिक केल्यावर निर्दिष्ट फंक्शन एक्झिक्युट करण्यासाठी वापरले जाते.
src/App.js फाइल सेव्ह केल्यानंतर, ब्राउझर आपोआप रिफ्रेश होईल आणि तुम्हाला एक साधा काउंटर दिसेल. "+" बटण क्लिक केल्याने संख्या वाढेल आणि "-" बटण क्लिक केल्याने संख्या कमी होईल.
CSS स्टाईलचा वापर
तुम्ही CSS वापरून तुमच्या React ॲपला सुंदर बनवू शकता. create-react-app CSS मॉड्यूल्स आणि सामान्य CSS फाइल्सना सपोर्ट करते.
CSS मॉड्यूल्सचा वापर:
CSS मॉड्यूल्स तुम्हाला प्रत्येक कंपोनंटसाठी स्वतंत्र CSS स्टाईल तयार करण्यास परवानगी देतात, ज्यामुळे स्टाईल संघर्ष टाळता येतो. कंपोनंटमध्ये CSS मॉड्यूल्स वापरण्यासाठी, तुम्हाला .module.css ने समाप्त होणारी फाइल तयार करणे आवश्यक आहे.
उदाहरणार्थ, App.module.css नावाची फाइल तयार करा आणि त्यात खालील CSS स्टाईल जोडा:
.App {
text-align: center;
}
.App h1 {
color: blue;
}
.App button {
padding: 10px 20px;
font-size: 16px;
background-color: lightgreen;
border: none;
cursor: pointer;
}
आणि नंतर src/App.js फाइलमध्ये CSS मॉड्यूल्स इम्पोर्ट करा:
import React, { useState } from 'react';
import styles from './App.module.css'; // CSS मॉड्यूल्स इम्पोर्ट करा
function App() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return (
{/* CSS वर्ग संदर्भित करण्यासाठी styles ऑब्जेक्टचा वापर करा */}
# काउंटर
सध्याची संख्या: {count}
+
-
);
}
export default App;
साध्या CSS फाइलचा वापर करणे:
तुम्ही ग्लोबल स्टाईल्स परिभाषित करण्यासाठी साध्या CSS फाइलचा देखील वापर करू शकता. src/index.css फाइलमध्ये, तुम्ही ग्लोबल स्टाईल्स परिभाषित करू शकता.
उदाहरणार्थ, खालील CSS स्टाईल जोडा:
body {
font-family: sans-serif;
}
ही स्टाईल ॲप्लिकेशनच्या संपूर्ण body घटकाला लागू होईल.
पुढील पायरी
अभिनंदन, तुम्ही तुमचे पहिले React ॲप्लिकेशन पूर्ण केले आहे! पुढे, तुम्ही React बद्दल अधिक ज्ञान मिळवू शकता, जसे की:
- घटक संवाद: वेगवेगळ्या घटकांना एकमेकांशी संवाद कसा साधता येईल हे शिका.
- फॉर्म हाताळणी: फॉर्म कसे तयार करायचे आणि हाताळायचे ते शिका.
- राउटिंग: React Router वापरून मल्टी-पेज ॲप्लिकेशन कसे तयार करायचे ते शिका.
- Redux किंवा Context API: ॲप्लिकेशनची स्थिती कशी व्यवस्थापित करायची ते शिका.
- Hooks:
useEffect,useContextइत्यादी React Hooks बद्दल अधिक माहिती मिळवा.
लक्षात ठेवा, React हे एक तंत्रज्ञान आहे ज्याला सतत सराव आणि अभ्यासाची आवश्यकता आहे. तुम्हाला शुभेच्छा!
