Passing Props to a Component translated to Telugu #141
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Is everything going well? @srikanth-kandi |
Currently I'm bit occupied. |
srikanth-kandi
requested changes
Feb 1, 2025
There was a problem hiding this comment.
Thank you @TenEplaysOfficial for your first contribution!
My sincere apologies for delaying the review of your contribution.
Since this is your first contribution, I noticed some unmeaningful translations.
The translations need to be
- Easy to read
- Easy to understand
- Should maintain consistency with the other translated content
- Should convey the actual meaning effortlessly to the learner
So for your future contributions. I hope you'll follow them.
Please, commit the requested changes for approving your pr.
Thank you :)
| --- | ||
|
|
||
| <Intro> | ||
|
|
||
| React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, and functions. | ||
| React కంపోనెంట్‌లు *props* ను ఒకదానితో ఒకటి కమ్యూనికేట్ చేసుకునేందుకు ఉపయోగిస్తాయి. ప్రతి పేరెంట్ కంపోనెంట్ దాని చైల్డ్ కంపోనెంట్‌లకు props ద్వారా కొంత సమాచారం పాస్ చేయవచ్చు. Props మీకు HTML ఆట్రిబ్యుట్‌లను గుర్తు చేయవచ్చు, కానీ మీరు వాటి ద్వారా ఆబ్జెక్ట్‌లు, అర్రేలు, ఫంక్షన్‌లు వంటి ఏదైనా జావాస్క్రిప్ట్ విలువలను పాస్ చేయవచ్చు. |
There was a problem hiding this comment.
Suggested change
| React కంపోనెంట్‌లు *props* ను ఒకదానితో ఒకటి కమ్యూనికేట్ చేసుకునేందుకు ఉపయోగిస్తాయి. ప్రతి పేరెంట్ కంపోనెంట్ దాని చైల్డ్ కంపోనెంట్‌లకు props ద్వారా కొంత సమాచారం పాస్ చేయవచ్చు. Props మీకు HTML ఆట్రిబ్యుట్‌లను గుర్తు చేయవచ్చు, కానీ మీరు వాటి ద్వారా ఆబ్జెక్ట్‌లు, అర్రేలు, ఫంక్షన్‌లు వంటి ఏదైనా జావాస్క్రిప్ట్ విలువలను పాస్ చేయవచ్చు. | |
| React కంపోనెంట్‌లు *props* ను ఒకదానితో ఒకటి కమ్యూనికేట్ చేసుకునేందుకు ఉపయోగిస్తాయి. ప్రతి పేరెంట్ కంపోనెంట్ దాని చైల్డ్ కంపోనెంట్‌లకు props ద్వారా కొంత సమాచారం పాస్ చేయవచ్చు. Props మీకు HTML ఆట్రిబ్యుట్‌లను గుర్తు చేయవచ్చు, కానీ మీరు వాటి ద్వారా ఆబ్జెక్ట్‌లు, అర్రేలు, ఫంక్షన్‌లు వంటి ఏదైనా JavaScript వేల్యూ ను పాస్ చేయవచ్చు. |
Comment on lines
13
to
17
| * ఎలా props ను ఒక కంపోనెంట్‌కు పాస్ చేయాలి | ||
| * ఎలా props ను ఒక కంపోనెంట్‌లో చదవాలి | ||
| * props కోసం డిఫాల్ట్ విలువలు ఎలా స్పెసిఫై చేయాలి props | ||
| * కొంత JSX ను కంపోనెంట్‌కు ఎలా పాస్ చేయాలి | ||
| * ఎలా props కాలక్రమంలో మారతాయి |
There was a problem hiding this comment.
Suggested change
| * ఎలా props ను ఒక కంపోనెంట్‌కు పాస్ చేయాలి | |
| * ఎలా props ను ఒక కంపోనెంట్‌లో చదవాలి | |
| * props కోసం డిఫాల్ట్ విలువలు ఎలా స్పెసిఫై చేయాలి props | |
| * కొంత JSX ను కంపోనెంట్‌కు ఎలా పాస్ చేయాలి | |
| * ఎలా props కాలక్రమంలో మారతాయి | |
| * props ను ఎలా ఒక కంపోనెంట్‌కు పాస్ చేయాలి | |
| * props ను ఎలా ఒక కంపోనెంట్‌లో రీడ్ చేయాలి | |
| * props కోసం డిఫాల్ట్ వాల్యూస్ ఎలా స్పెసిఫై చేయాలి | |
| * కొంత JSX ను కంపోనెంట్‌కు ఎలా పాస్ చేయాలి | |
| * props ఎలా కాలక్రమంలో మారతాయి |
| @@ -51,11 +51,11 @@ body { min-height: 120px; } | |||
|
|
|||
| </Sandpack> | |||
|
|
|||
| The props you can pass to an `<img>` tag are predefined (ReactDOM conforms to [the HTML standard](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). But you can pass any props to *your own* components, such as `<Avatar>`, to customize them. Here's how! | |||
| మీరు `<img>` ట్యాగ్‌కు పాస్ చేయగల props ముందే నిర్ణయించినవి (ReactDOM దీనికి అనుగుణంగా ఉంటుంది [HTML ప్రమాణం](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). మీరు ఏవైనా ప్రాప్‌లను *మీ స్వంత* భాగాలకు పాస్ చేయవచ్చు, ఉదాహరణకు `<Avatar>`, వాటిని అనుకూలీకరించడానికి (to customize them). ఇలా చేయండి! | |||
There was a problem hiding this comment.
Suggested change
| మీరు `<img>` ట్యాగ్‌కు పాస్ చేయగల props ముందే నిర్ణయించినవి (ReactDOM దీనికి అనుగుణంగా ఉంటుంది [HTML ప్రమాణం](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). మీరు ఏవైనా ప్రాప్‌లను *మీ స్వంత* భాగాలకు పాస్ చేయవచ్చు, ఉదాహరణకు `<Avatar>`, వాటిని అనుకూలీకరించడానికి (to customize them). ఇలా చేయండి! | |
| మీరు `<img>` ట్యాగ్‌కు పాస్ చేయగల props ముందే నిర్ణయించినవి (ReactDOM అనేది [HTML స్టాండర్డ్](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element) కి అనుగుణంగా ఉంటుంది). మీరు ఏవైనా props ను *మీ స్వంత* కాంపోనెంట్లకు పాస్ చేయవచ్చు, ఉదాహరణకు `<Avatar>`, వాటిని కస్టమైజ్ చేయడానికి, ఇలా చేయండి! |
| @@ -65,11 +65,11 @@ export default function Profile() { | |||
| } | |||
| ``` | |||
|
|
|||
| You can give `Avatar` some props in two steps. | |||
| మీరు `Avatar` కు రెండు రకాలుక props ఇవ్వవచ్చు. | |||
There was a problem hiding this comment.
Suggested change
| మీరు `Avatar` కు రెండు రకాలుక props ఇవ్వవచ్చు. | |
| మీరు `Avatar` కు రెండు స్టెప్స్ లో props ఇవ్వవచ్చు. |
|
|
||
| ### Step 1: Pass props to the child component {/*step-1-pass-props-to-the-child-component*/} | ||
| ### స్టెప్ 1: చైల్డ్ కంపోనెంట్‌కు props పాస్ చేయండి. {/*step-1-pass-props-to-the-child-component*/} |
There was a problem hiding this comment.
Suggested change
| ### స్టెప్ 1: చైల్డ్ కంపోనెంట్‌కు props పాస్ చేయండి. {/*step-1-pass-props-to-the-child-component*/} | |
| ### స్టెప్ 1: చైల్డ్ కంపోనెంట్‌కు props పాస్ చేయండి {/*step-1-pass-props-to-the-child-component*/} |
|
|
||
| Change the `Avatar` component to request the closest image size based on the `size` prop. Specifically, if the `size` is less than `90`, pass `'s'` ("small") rather than `'b'` ("big") to the `getImageUrl` function. Verify that your changes work by rendering avatars with different values of the `size` prop and opening images in a new tab. | ||
| `Avatar` కంపోనెంట్‌ను `size` prop ఆధారంగా సన్నిహితమైన ఇమేజ్ పరిమాణాన్ని కోరేందుకు మార్చండి. ప్రత్యేకంగా, `size` విలువ `90` కంటే తక్కువ అయితే, `'s'` (''స్మాల్'') ను `'b'` (''బిగ్'') కంటే `getImageUrl` ఫంక్షన్‌కు పంపండి. మీరు చేసిన మార్పులు పని చేస్తున్నాయో లేదో ధృవీకరించడానికి వివిధ `size` prop విలువలతో అవతార్‌లను రెండర్ చేసి, చిత్రాలను కొత్త టాబ్‌లో ఓపెన్ చేయండి. |
There was a problem hiding this comment.
Suggested change
| `Avatar` కంపోనెంట్‌ను `size` prop ఆధారంగా సన్నిహితమైన ఇమేజ్ పరిమాణాన్ని కోరేందుకు మార్చండి. ప్రత్యేకంగా, `size` విలువ `90` కంటే తక్కువ అయితే, `'s'` (''స్మాల్'') ను `'b'` (''బిగ్'') కంటే `getImageUrl` ఫంక్షన్‌కు పంపండి. మీరు చేసిన మార్పులు పని చేస్తున్నాయో లేదో ధృవీకరించడానికి వివిధ `size` prop విలువలతో అవతార్‌లను రెండర్ చేసి, చిత్రాలను కొత్త టాబ్‌లో ఓపెన్ చేయండి. | |
| `Avatar` కంపోనెంట్‌ను `size` prop ఆధారంగా సన్నిహితమైన ఇమేజ్ పరిమాణాన్ని కోరేందుకు మార్చండి. ప్రత్యేకంగా, `size` విలువ `90` కంటే తక్కువ అయితే, `'s'` ("స్మాల్") ను లేదా `'b'` ("బిగ్") ను `getImageUrl` ఫంక్షన్‌కు పంపండి. మీరు చేసిన మార్పులు పని చేస్తున్నాయో లేదో ధృవీకరించడానికి వివిధ `size` prop విలువలతో అవతార్‌లను రెండర్ చేసి, చిత్రాలను కొత్త టాబ్‌లో ఓపెన్ చేయండి. |
| @@ -919,13 +919,13 @@ export function getImageUrl(person, size) { | |||
|
|
|||
| </Sandpack> | |||
|
|
|||
| Props let you encapsulate logic like this inside the `Avatar` component (and change it later if needed) so that everyone can use the `<Avatar>` component without thinking about how the images are requested and resized. | |||
| Props మీరు ఈ తరహా లాజిక్‌ను `Avatar` కంపోనెంట్ లోపల ఎంకాప్‌ ఎన్‌క్యాప్సులేట్ అనుమతిస్తాయి (కానీ అవసరమైతే తర్వాత మార్పులు చేయవచ్చు), తద్వారా ప్రతి ఒక్కరూ `<Avatar>` కంపోనెంట్‌ని ఉపయోగించడానికి, చిత్రాలను ఎలా అభ్యర్థించాలి మరియు సైజు మార్చాలి అనే దానిపై ఆలోచించకుండానే ఉపయోగించవచ్చు. | |||
There was a problem hiding this comment.
Suggested change
| Props మీరు ఈ తరహా లాజిక్‌ను `Avatar` కంపోనెంట్ లోపల ఎంకాప్‌ ఎన్‌క్యాప్సులేట్ అనుమతిస్తాయి (కానీ అవసరమైతే తర్వాత మార్పులు చేయవచ్చు), తద్వారా ప్రతి ఒక్కరూ `<Avatar>` కంపోనెంట్‌ని ఉపయోగించడానికి, చిత్రాలను ఎలా అభ్యర్థించాలి మరియు సైజు మార్చాలి అనే దానిపై ఆలోచించకుండానే ఉపయోగించవచ్చు. | |
| Props అనేవి మీరు ఈ తరహా లాజిక్‌ను `Avatar` కంపోనెంట్ లోపల ఎన్‌క్యాప్సులేట్ చేయడానికి అనుమతిస్తాయి (కానీ అవసరమైతే తర్వాత మార్పులు చేయవచ్చు), తద్వారా ప్రతి ఒక్కరూ `<Avatar>` కంపోనెంట్‌ని ఉపయోగించడానికి, చిత్రాలను ఎలా రిక్వెస్ట్ చేయాలి మరియు సైజు మార్చాలి అనే దానిపై ఆలోచించకుండానే ఉపయోగించవచ్చు. |
|
|
||
| </Solution> | ||
|
|
||
| #### Passing JSX in a `children` prop {/*passing-jsx-in-a-children-prop*/} | ||
| #### పాసింగ్ JSX ఇన్ ఏ `children` prop {/*passing-jsx-in-a-children-prop*/} |
There was a problem hiding this comment.
Suggested change
| #### పాసింగ్ JSX ఇన్ ఏ `children` prop {/*passing-jsx-in-a-children-prop*/} | |
| #### `children` prop లో JSX పంపించడం {/*passing-jsx-in-a-children-prop*/} |
| @@ -983,13 +983,13 @@ h1 { | |||
|
|
|||
| <Hint> | |||
|
|
|||
| Any JSX you put inside of a component's tag will be passed as the `children` prop to that component. | |||
| మీరు ఒక కంపోనెంట్ ట్యాగ్‌లో పెట్టిన ఏ JSX. ఆ కంపోనెంట్‌కు `children` prop పంపబడుతుంది. | |||
There was a problem hiding this comment.
Suggested change
| మీరు ఒక కంపోనెంట్ ట్యాగ్‌లో పెట్టిన ఏ JSX. ఆ కంపోనెంట్‌కు `children` prop పంపబడుతుంది. | |
| మీరు ఒక కంపోనెంట్ ట్యాగ్‌లో పెట్టిన ఏ JSX అయినా. ఆ కంపోనెంట్‌కు `children` prop పంపబడుతుంది. |
| @@ -1051,7 +1051,7 @@ h1 { | |||
|
|
|||
| </Sandpack> | |||
|
|
|||
| You can also make `title` a separate prop if you want every `Card` to always have a title: | |||
| మీరు ప్రతి `Card` కి ఎల్లప్పుడూ టైటిల్ ఉండాలని కోరుకుంటే మీరు `title`ని ప్రత్యేక prop కూడా చేయవచ్చు: | |||
There was a problem hiding this comment.
Suggested change
| మీరు ప్రతి `Card` కి ఎల్లప్పుడూ టైటిల్ ఉండాలని కోరుకుంటే మీరు `title`ని ప్రత్యేక prop కూడా చేయవచ్చు: | |
| మీరు ప్రతి `Card` కి ఎల్లప్పుడూ టైటిల్ ఉండాలని కోరుకుంటే మీరు `title` ని ప్రత్యేక prop గా కూడా చేయవచ్చు: |
srikanth-kandi
approved these changes
Feb 2, 2025
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
srikanth-kandi
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hi @srikanth-kandi, I have completed the translation for the page titled 'Passing Props to a Component.' Could you please review it and let me know if any changes are required?