React పరిచయ మార్గదర్శిని: మొదటి నుండి మీ మొదటి వినియోగదారు ఇంటర్‌ఫేస్‌ను నిర్మించడం

# React పరిచయ మార్గదర్శిని: మొదటి నుండి మీ మొదటి వినియోగదారు ఇంటర్‌ఫేస్‌ను నిర్మించడం

React అనేది వినియోగదారు ఇంటర్‌ఫేస్‌లను నిర్మించడానికి ఒక JavaScript లైబ్రరీ. ఇది Facebook ద్వారా అభివృద్ధి చేయబడింది మరియు నిర్వహించబడుతుంది, మరియు ఇది ఫ్రంట్-ఎండ్ అభివృద్ధిలో అత్యంత ప్రజాదరణ పొందిన సాధనాలలో ఒకటిగా మారింది. ఈ గైడ్ మిమ్మల్ని మొదటి నుండి ప్రారంభించి, React యొక్క ప్రాథమిక భావనలను దశలవారీగా అర్థం చేసుకోవడానికి మరియు ఒక సాధారణ వినియోగదారు ఇంటర్‌ఫేస్‌ను నిర్మించడానికి సహాయపడుతుంది.

## Reactని ఎందుకు ఎంచుకోవాలి?

React ఈ క్రింది ప్రయోజనాలను కలిగి ఉంది:

* **కాంపోనెంట్‌లుగా విభజించడం:** React వినియోగదారు ఇంటర్‌ఫేస్‌ను స్వతంత్రంగా, తిరిగి ఉపయోగించగల కాంపోనెంట్‌లుగా విభజిస్తుంది. ఇది కోడ్‌ను నిర్వహించడం మరియు అర్థం చేసుకోవడం సులభతరం చేస్తుంది.
* **ప్రకటనాత్మకం:** React ప్రకటనల ప్రోగ్రామింగ్ శైలిని ఉపయోగిస్తుంది, అంటే మీరు ప్రదర్శించాలనుకుంటున్న వాటిని మాత్రమే వివరించాలి, React స్వయంచాలకంగా నవీకరణలు మరియు రెండరింగ్‌ను నిర్వహిస్తుంది.
* **సమర్థవంతమైనది:** React వర్చువల్ DOM మరియు తెలివైన డిఫ్ అల్గారిథమ్‌ను ఉపయోగిస్తుంది, ఇది అనవసరమైన రెండరింగ్‌ను తగ్గించడం ద్వారా వినియోగదారు ఇంటర్‌ఫేస్‌ను సమర్థవంతంగా నవీకరించగలదు.
* **విస్తారమైన సంఘం మద్దతు:** React విస్తారమైన సంఘం మరియు గొప్ప పర్యావరణ వ్యవస్థను కలిగి ఉంది, మీరు అభివృద్ధి చేయడానికి సహాయపడే అనేక ట్యుటోరియల్స్, లైబ్రరీలు మరియు సాధనాలను కనుగొనవచ్చు.
* **క్రాస్-ప్లాట్‌ఫారమ్ సామర్థ్యం:** React Native మిమ్మల్ని Reactని ఉపయోగించి స్థానిక మొబైల్ అనువర్తనాలను (iOS మరియు Android) అభివృద్ధి చేయడానికి అనుమతిస్తుంది.

## సన్నాహాలు

ప్రారంభించడానికి ముందు, మీ కంప్యూటర్‌లో ఈ క్రింది సాధనాలు ఇన్‌స్టాల్ చేయబడి ఉన్నాయని నిర్ధారించుకోండి:

* **Node.js:** Node.js అనేది React అభివృద్ధి సాధనాలను అమలు చేయడానికి ఉపయోగించే JavaScript రన్టైమ్ పర్యావరణం. మీరు దీన్ని [https://nodejs.org/](https://nodejs.org/) నుండి డౌన్‌లోడ్ చేసి, ఇన్‌స్టాల్ చేసుకోవచ్చు.
* **npm లేదా yarn:** npm (Node Package Manager) మరియు yarn అనేవి JavaScript ప్యాకేజీ నిర్వాహకులు, వీటిని React యొక్క డిపెండెన్సీలను ఇన్‌స్టాల్ చేయడానికి మరియు నిర్వహించడానికి ఉపయోగిస్తారు. సాధారణంగా Node.jsని ఇన్‌స్టాల్ చేసినప్పుడు npm కూడా ఇన్‌స్టాల్ చేయబడుతుంది. yarnని [https://yarnpkg.com/](https://yarnpkg.com/) నుండి ఇన్‌స్టాల్ చేసుకోవచ్చు.

## మీ మొదటి React అనువర్తనాన్ని సృష్టించండి

మేము React ప్రాజెక్ట్‌ను త్వరగా సృష్టించడానికి `create-react-app`ని ఉపయోగిస్తాము.

1. **npmని ఉపయోగించి సృష్టించండి:**

   ```bash
   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start

2. yarnని ఉపయోగించి సృష్టించండి:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

పై ఆదేశాలను అమలు చేసిన తర్వాత, create-react-app స్వయంచాలకంగా my-first-react-app అనే డైరెక్టరీని సృష్టిస్తుంది మరియు ఆ డైరెక్టరీలో React ప్రాజెక్ట్‌ను ప్రారంభిస్తుంది. npm start లేదా yarn start ఆదేశం అభివృద్ధి సర్వర్‌ను ప్రారంభిస్తుంది, మీరు మీ React అనువర్తనాన్ని చూడటానికి బ్రౌజర్‌లో http://localhost:3000ని సందర్శించవచ్చు.

డైరెక్టరీ నిర్మాణం

create-react-app సృష్టించిన ప్రాజెక్ట్ డైరెక్టరీ నిర్మాణం ఈ క్రింది విధంగా ఉంటుంది:

my-first-react-app/
├── node_modules/         # ప్రాజెక్ట్ ఆధారిత లైబ్రరీలు
├── public/               # స్టాటిక్ రిసోర్సెస్ (HTML ఫైల్స్ వంటివి)
│   ├── index.html        # అప్లికేషన్ యొక్క ఎంట్రీ పాయింట్ HTML ఫైల్
│   └── ...
├── src/                  # రియాక్ట్ సోర్స్ కోడ్
│   ├── App.css           # App కాంపోనెంట్ యొక్క CSS స్టైల్స్
│   ├── App.js            # App కాంపోనెంట్
│   ├── App.test.js       # App కాంపోనెంట్ యొక్క టెస్ట్ ఫైల్
│   ├── index.css         # గ్లోబల్ CSS స్టైల్స్
│   ├── index.js          # అప్లికేషన్ యొక్క ఎంట్రీ పాయింట్ జావాస్క్రిప్ట్ ఫైల్
│   ├── logo.svg          # రియాక్ట్ లోగో
│   └── ...
├── .gitignore            # Git ఇగ్నోర్ ఫైల్
├── package.json          # ప్రాజెక్ట్ యొక్క మెటాడేటా మరియు డిపెండెన్సీలు
├── README.md             # ప్రాజెక్ట్ యొక్క వివరణాత్మక డాక్యుమెంట్
└── yarn.lock             # డిపెండెన్సీ వెర్షన్ లాక్ ఫైల్ (yarn ఉపయోగిస్తే)
```

## రియాక్ట్ కాంపోనెంట్లను అర్థం చేసుకోవడం

రియాక్ట్ అప్లికేషన్లు కాంపోనెంట్లతో రూపొందించబడతాయి. కాంపోనెంట్లు స్వతంత్రమైనవి మరియు తిరిగి ఉపయోగించగల కోడ్ బ్లాక్‌లు, ఇవి యూజర్ ఇంటర్‌ఫేస్ యొక్క నిర్దిష్ట భాగాలను రెండర్ చేయడానికి ఉపయోగించబడతాయి.

`src/App.js` ఫైల్‌లో, మీరు డిఫాల్ట్ `App` కాంపోనెంట్‌ను చూడవచ్చు:

```javascript
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';` రియాక్ట్ లైబ్రరీని ఇంపోర్ట్ చేస్తుంది.
* `function App() { ... }` `App` అనే ఫంక్షన్ కాంపోనెంట్‌ను నిర్వచిస్తుంది.
* `return ( ... )` JSX ఎక్స్‌ప్రెషన్‌ను రిటర్న్ చేస్తుంది, ఇది కాంపోనెంట్ రెండర్ చేయవలసిన కంటెంట్‌ను వివరిస్తుంది.
* `export default App;` `App` కాంపోనెంట్‌ను ఎగుమతి చేస్తుంది, తద్వారా ఇతర ఫైళ్ళలో ఉపయోగించవచ్చు.

**JSX (JavaScript XML)**

JSX అనేది జావాస్క్రిప్ట్ సింటాక్స్ ఎక్స్‌టెన్షన్, ఇది జావాస్క్రిప్ట్ కోడ్‌లో HTML లాంటి కోడ్‌ను వ్రాయడానికి మిమ్మల్ని అనుమతిస్తుంది. పైన ఉన్న ఉదాహరణలో, `...` అనేది JSX ఎక్స్‌ప్రెషన్. JSX కోడ్ బేబెల్ ద్వారా ప్రామాణిక జావాస్క్రిప్ట్ కోడ్‌గా మార్చబడుతుంది, తద్వారా బ్రౌజర్ అర్థం చేసుకోగలదు.

## App కాంపోనెంట్‌ను సవరించడం

`App` కాంపోనెంట్‌ను సవరించి, సాధారణ కౌంటర్‌ను సృష్టిద్దాం.

```javascript
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); };` `count` స్థితిని 1 పెంచడానికి `increment` అనే ఫంక్షన్‌ను నిర్వచించండి.
* `const decrement = () => { setCount(count - 1); };` `count` స్థితిని 1 తగ్గించడానికి `decrement` అనే ఫంక్షన్‌ను నిర్వచించండి.
* `ప్రస్తుత లెక్కింపు: {count}
` పేజీలో `count` స్థితి విలువను ప్రదర్శించండి. `{count}` అనేది JSX కోడ్‌లో JavaScript వేరియబుల్‌ను చొప్పించడానికి ఉపయోగించే JSX ఎక్స్‌ప్రెషన్.
* `+` మరియు `-` బటన్‌లను సృష్టించండి మరియు వాటిని వరుసగా `increment` మరియు `decrement` ఫంక్షన్‌లకు బైండ్ చేయండి. `onClick` అనేది ఒక ఈవెంట్ హ్యాండ్లర్, ఇది బటన్‌ను క్లిక్ చేసినప్పుడు పేర్కొన్న ఫంక్షన్‌ను అమలు చేయడానికి ఉపయోగించబడుతుంది.

`src/App.js` ఫైల్‌ను సేవ్ చేసిన తర్వాత, బ్రౌజర్ స్వయంచాలకంగా రిఫ్రెష్ అవుతుంది మరియు మీరు సాధారణ కౌంటర్‌ను చూస్తారు. లెక్కింపును పెంచడానికి "+" బటన్‌ను క్లిక్ చేయండి మరియు లెక్కింపును తగ్గించడానికి "-" బటన్‌ను క్లిక్ చేయండి.

## CSS శైలిని ఉపయోగించండి

మీరు మీ React అప్లికేషన్‌ను అందంగా తీర్చిదిద్దడానికి CSSని ఉపయోగించవచ్చు. `create-react-app` CSS మాడ్యూల్స్ మరియు సాధారణ CSS ఫైల్‌లకు మద్దతు ఇస్తుంది.

**CSS మాడ్యూల్స్‌ను ఉపయోగించడం:**

CSS మాడ్యూల్స్ ప్రతి కాంపోనెంట్ కోసం ప్రత్యేక CSS శైలిని సృష్టించడానికి మిమ్మల్ని అనుమతిస్తాయి, తద్వారా శైలి వైరుధ్యాలను నివారిస్తుంది. కాంపోనెంట్‌లో CSS మాడ్యూల్స్‌ను ఉపయోగించడానికి, మీరు `.module.css`తో ముగిసే ఫైల్‌ను సృష్టించాలి.

ఉదాహరణకు, `App.module.css` అనే ఫైల్‌ను సృష్టించండి మరియు కింది 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 మాడ్యూల్స్‌ను దిగుమతి చేయండి:

```javascript
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 స్టైల్‌ను జోడించండి:

```css
body {
  font-family: sans-serif;
}
```

ఈ స్టైల్ అప్లికేషన్ యొక్క మొత్తం `body` ఎలిమెంట్‌కు వర్తిస్తుంది.

## తదుపరి దశ

అభినందనలు, మీరు మీ మొదటి React అప్లికేషన్‌ను పూర్తి చేసారు! తరువాత, మీరు React గురించి మరింత తెలుసుకోవచ్చు, ఉదాహరణకు:

* **కాంపోనెంట్ కమ్యూనికేషన్:** విభిన్న కాంపోనెంట్‌లు ఒకదానితో ఒకటి ఎలా కమ్యూనికేట్ చేస్తాయో తెలుసుకోండి.
* **ఫారమ్ ప్రాసెసింగ్:** ఫారమ్‌లను ఎలా సృష్టించాలో మరియు ప్రాసెస్ చేయాలో తెలుసుకోండి.
* **రూటింగ్:** React Routerని ఉపయోగించి బహుళ పేజీ అప్లికేషన్‌ను ఎలా సృష్టించాలో తెలుసుకోండి.
* **Redux లేదా Context API:** అప్లికేషన్ యొక్క స్థితిని ఎలా నిర్వహించాలో తెలుసుకోండి.
* **Hooks:** `useEffect`, `useContext` మొదలైన React Hooks గురించి మరింత లోతుగా తెలుసుకోండి.

గుర్తుంచుకోండి, React అనేది నిరంతరం సాధన మరియు నేర్చుకోవలసిన సాంకేతికత. మీ అభ్యాసం ఆనందంగా సాగాలని కోరుకుంటున్నాను!
```