Skip to content
This repository was archived by the owner on Apr 21, 2023. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions content/home/examples/a-component-using-external-plugins.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,16 @@ class MarkdownEditor extends React.Component {
render() {
return (
<div className="MarkdownEditor">
<h3>Input</h3>
<h3>నివేశం</h3>
<label htmlFor="markdown-content">
Enter some markdown
కొన్ని మార్క్ డౌన్ నమోదు చేయండి
</label>
<textarea
id="markdown-content"
onChange={this.handleChange}
defaultValue={this.state.value}
/>
<h3>Output</h3>
<h3>ఉత్పత్తి</h3>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<h3>ఉత్పత్తి</h3>
<h3>ఫలితము</h3>

<div
className="content"
dangerouslySetInnerHTML={this.getRawMarkup()}
Expand Down
4 changes: 2 additions & 2 deletions content/home/examples/a-component-using-external-plugins.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: A Component Using External Plugins
title: బాహ్య ప్లగిన్లు ఉపయోగించి ఒక కంపోనెంట్
order: 3
domid: markdown-example
---

React allows you to interface with other libraries and frameworks. This example uses **remarkable**, an external Markdown library, to convert the `<textarea>`'s value in real time.
రియాక్ట్ ఇతర ఫ్రేంవర్క్ తో మరియు లైబ్రరీలతొ సమన్వయము కల్గించును. ఈ ఉదాహరణ **remarkable**, మార్క్ డౌన్లైబ్రరీని ఉపయోగిస్తుంది, నిజ సమయంలో `<textarea>` విలువను మార్చడానికి.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

డౌన్లైబ్రరీని -> డౌన్ లైబ్రరీని

4 changes: 2 additions & 2 deletions content/home/examples/a-simple-component.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
హలో {this.props.name}
</div>
);
}
}

ReactDOM.render(
<HelloMessage name="Taylor" />,
<HelloMessage name="Ashrith" />,
document.getElementById('hello-example')
);
6 changes: 3 additions & 3 deletions content/home/examples/a-simple-component.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: A Simple Component
title: ఎ సింపుల్ కాంపోనెంట్

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

కంపోనెంట్ అనవచ్చునేమో

order: 0
domid: hello-example
---

React components implement a `render()` method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by `render()` via `this.props`.
రియాక్ట్ కంపోనెంట్లు ఇన్పుట్ డేటాను తీసుకువచ్చే ఒక `render()` పద్ధతిని అమలు చేస్తాయి మరియు దాన్ని ప్రదర్శించడానికి తిరిగి పంపుతుంది. ఈ ఉదాహరణ JSX గా పిలువబడే ఒక XML-వంటి సింటాక్స్ ను ఉపయోగిస్తుంది. కంపోనెంట్నికి పంపుతున్న ఇన్పుట్ డేటాను `this.props` ద్వారా `render()` ద్వారా ప్రాప్తి చేయవచ్చు.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

రియాక్ట్ కంపోనెంటు render() అనే ఒక మెథడ్ని వాడుతుంది, ఇది ఇన్పుట్ డేటా తీసుకుని ఏమి చూపించాలో దాన్ని ఇస్తుంది. ఈ ఉదాహరణ XML-లాగ కనిపించే JSX అనే సింటాక్స్ వాడుతోంది. ఈ కంపోనెంటుకు పంపించే ఇన్పుట్ డేటాను this.props ద్వారా render() మెథడ్ చూడగల్గుతుంది.


**JSX is optional and not required to use React.** Try the [Babel REPL](babel://es5-syntax-example) to see the raw JavaScript code produced by the JSX compilation step.
**JSX ఐచ్ఛికం మరియు రియాక్ట్ ఉపయోగించడానికి అవసరం లేదు.** JSX కంపైలేషన్ దశ ద్వారా ఉత్పత్తి చేయబడిన ముడి జావాస్క్రిప్ట్ కోడ్ను చూడడానికి [బాబెల్ REPL](babel://es5-syntax-example) ను ప్రయత్నించండి
2 changes: 1 addition & 1 deletion content/home/examples/a-stateful-component.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ class Timer extends React.Component {
render() {
return (
<div>
Seconds: {this.state.seconds}
సెకండ్స్: {this.state.seconds}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
సెకండ్స్: {this.state.seconds}
క్షణాలు: {this.state.seconds}

</div>
);
}
Expand Down
4 changes: 2 additions & 2 deletions content/home/examples/a-stateful-component.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: A Stateful Component
title: స్టేట్ఫుల్ కాంపోనెంట్
order: 1
domid: timer-example
---

In addition to taking input data (accessed via `this.props`), a component can maintain internal state data (accessed via `this.state`). When a component's state data changes, the rendered markup will be updated by re-invoking `render()`.
ఇన్పుట్ డేటాను తీసుకోవడంతో పాటు (`this.props` ద్వారా ప్రాప్తి చేయబడుతుంది), ఒక కంపోనెంట్ అంతర్గత స్థితి డేటాను నిర్వహించగలదు (`this.state` ద్వారా ప్రాప్తి చేయబడింది). ఒక కంపోనెంట్ యొక్క స్థితి డేటా మార్పులు మారినప్పుడు, అన్వయించిన మార్కప్ను `render()` మళ్లీ మళ్లీ ప్రేరేపించడం ద్వారా నవీకరించబడుతుంది.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ఇన్పుట్ డాటాతో పాటు (this.props ద్వారా వస్తుంది కదా), ఒక కంపోనెంటు తనలో తానూ కొంత సొంత డాటాను (దీనిని this.state ద్వారా వాడవచ్చు) ఉంచుకుంటుంది. ఈ state డేటా మారిన ప్రతిసారి render() ద్వారా మార్కప్ మరలా రెండర్ అవుతుంది.

4 changes: 2 additions & 2 deletions content/home/examples/an-application.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ class TodoApp extends React.Component {
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<label htmlFor="new-todo">
What needs to be done?
ఏమి చేయాలి?
</label>
<input
id="new-todo"
onChange={this.handleChange}
value={this.state.text}
/>
<button>
Add #{this.state.items.length + 1}
చేర్చు #{this.state.items.length + 1}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

కూడించు

</button>
</form>
</div>
Expand Down
4 changes: 2 additions & 2 deletions content/home/examples/an-application.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: An Application
title: ఒక అనువర్తనం

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
title: ఒక అనువర్తనం
title: ఒక అప్లికేషన్

order: 2
domid: todos-example
---

Using `props` and `state`, we can put together a small Todo application. This example uses `state` to track the current list of items as well as the text that the user has entered. Although event handlers appear to be rendered inline, they will be collected and implemented using event delegation.
`props` మరియు`state`ను ఉపయోగించడం ద్వారా, మేము చిన్న టోడో అప్లికేషన్ను కలిసి ఉంచవచ్చు. ఈ ఉదాహరణ ప్రస్తుత అంశాల జాబితాను అలాగే వినియోగదారు ఎంటర్ చేసిన టెక్స్ట్ను ట్రాక్ చేయడానికి `state`ను ఉపయోగిస్తుంది. ఈవెంట్ హాండ్లర్లు ఇన్లైన్ చేయబడినట్లు కనిపిస్తున్నప్పటికీ, వారు కార్యనిర్వాహక బృందాన్ని ఉపయోగించి సేకరించారు మరియు అమలు చేయబడతారు.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

props ఇంకా stateలను వాడి మనము చిన్న Todo అప్లికేషన్ను చేద్దామా. ఈ ఉదాహరణలో మనం రాసుకున్న todoలను పొందుపరుచుకోవడానికి, ఇంకా మనం నమోదు చేస్తున్న కొత్త todo ఇన్పుట్ ను గమనించడానికి stateను వాడదాము. ఒక విషయం, మనం రాసిన ఈవెంట్ హ్యాండ్లర్స్ అక్కడికి అక్కడే పెట్టేసినట్టు కనిపించినా, అవి ఈవెంట్ డెలిగేషన్ ద్వారా వినియోగించ బడతాయి.

6 changes: 3 additions & 3 deletions content/home/marketing/component-based.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: Component-Based
title: కంపోనెంట్-బేస్డ్
order: 1
---

Build encapsulated components that manage their own state, then compose them to make complex UIs.
వారి స్వంత స్థితిన్ని నిర్వహించే కప్పబడ్డ కంపోనెంట్లను రూపొందించండి, తరువాత సంక్లిష్ట UI లను రూపొందించడానికి వాటిని రూపొందించండి.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would suggest ఇంకాప్సూల్టెడ్ or some other word instead of కప్పబడ్డ.

స్థితిన్ని -> స్టేట్ని
రూపొందించండి -> నిర్మించు

స్వంత స్టేట్ని  వాడుకునే  ఇంకాప్సూల్టెడ్ కంపోనెంట్లను నిర్మించండి, తరువాత కఠినమైన UI లను నిర్మించడానికి వాడండి


Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
అంశాల తర్కం జావాస్క్రిప్ట్ లో బదులుగా జావాస్క్రిప్ట్ లో రాసినందున, మీరు మీ అనువర్తనం ద్వారా రిచ్ డాటాను సులువుగా పంపవచ్చు మరియు DOM నుండి బయటకు రాకుండా చేయవచ్చు.
6 changes: 3 additions & 3 deletions content/home/marketing/declarative.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: Declarative
title: డిక్లరేటివ్
order: 0
---

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
ఇంటరాక్టివ్ UI లను సృష్టించడానికి రియక్తత అది నొప్పిలేకుండా చేస్తుంది. మీ అప్లికేషన్ లో ప్రతి స్థితి కోసం సాధారణ వీక్షణలు రూపకల్పన మరియు మీ డేటా మారినప్పుడు చర్యలు సమర్ధవంతంగా సరిగ్గా అప్డేట్ మరియు సరైన అంశాలను అందించేవి.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ఇంటరాక్టీవ్ UIలను తయారు చేయడంలో రియాక్టుకు ఎదురే లేదు. ముచ్చటైన చిన్ని చిన్ని వ్యూస్ మీ ప్రతి stateకు తయారు చేసుకోండి, వాటిని సమర్థవంతంగా నవీకరించడాన్ని, రెండర్ చేయడాన్ని రియాక్టుకు వదిలేయండి, అది చూసుకుంటుంది.


Declarative views make your code more predictable and easier to debug.
డిక్లరేషన్ వీక్షణలు మీ కోడ్ మరింత ఊహాజనిత మరియు డీబగ్ చేయడానికి సులభంగా చేస్తాయి.
6 changes: 3 additions & 3 deletions content/home/marketing/learn-once-write-anywhere.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: Learn Once, Write Anywhere
title: ఒకసారి తెలుసుకోండి, ఎక్కడైనా వ్రాయండి
order: 2
---

We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
మిగిలిన మీ టెక్నాలజీ స్టాక్ గురించి మేము ఊహించలేము, కాబట్టి ఇప్పటికే ఉన్న కోడ్ను తిరిగి వ్రాయకుండా మీరు కొత్త ఫీచర్లను అభివృద్ధి చేయవచ్చు.

React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
ఉపయోగించి నోడ్ మరియు పవర్ మొబైల్ అనువర్తనాలను ఉపయోగించి సర్వర్లో కూడా రియాక్ట్ చేయవచ్చు [రియాక్ట్ నేటివ్](https://facebook.github.io/react-native/).