Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Home page #5

Merged
merged 13 commits into from
Feb 24, 2019
8 changes: 4 additions & 4 deletions content/home/examples/a-component-using-external-plugins.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ class MarkdownEditor extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = { value: 'Hello, **world**!' };
this.state = { value: 'Hallo **Welt**!' };
}

handleChange(e) {
Expand All @@ -17,16 +17,16 @@ class MarkdownEditor extends React.Component {
render() {
return (
<div className="MarkdownEditor">
<h3>Input</h3>
<h3>Eingabe</h3>
<label htmlFor="markdown-content">
Enter some markdown
Gib Markdown Code ein
ChrisB9 marked this conversation as resolved.
Show resolved Hide resolved
</label>
<textarea
id="markdown-content"
onChange={this.handleChange}
defaultValue={this.state.value}
/>
<h3>Output</h3>
<h3>Ausgabe</h3>
<div
className="content"
dangerouslySetInnerHTML={this.getRawMarkup()}
Expand Down
6 changes: 4 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,9 @@
---
title: A Component Using External Plugins
title: Eine Komponente mit externen Plugins
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.
React ermöglicht es, sich mit anderen Bibliotheken und Frameworks zu verbinden.

In diesem Beispiel wird **remarkable**, eine externe Markdown-Bibliothek, verwendet, um den Wert des `<textarea>`-Feldes in Echtzeit zu konvertieren.
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}
Hallo {this.props.name}
</div>
);
}
}

ReactDOM.render(
<HelloMessage name="Taylor" />,
<HelloMessage name="Thomas" />,
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: Eine einfache Komponente
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`.
React Komponenten implementieren eine `render()` Methode, die Eingabedaten entgegennimmt und zurückgibt, was angezeigt werden soll. Dieses Beispiel verwendet eine XML-ähnliche Syntax namens JSX. Auf Eingabedaten, die der Komponente übergeben werden, kann mittels `render()` durch `this.props` zugegriffen werden.

**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 ist optional und nicht erforderlich, um React zu verwenden.** Teste [Babel REPL](babel://es5-syntax-example), um den reinen JavaScript-Code zu sehen, der durch den JSX-Kompilationsschritt erzeugt wird.
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}
Sekunden: {this.state.seconds}
</div>
);
}
Expand Down
6 changes: 4 additions & 2 deletions content/home/examples/a-stateful-component.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
---
title: A Stateful Component
title: Eine zustandsabhängige Komponente
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()`.
Zusätzlich zur Übernahme von Eingabedaten (Zugriff durch `this.props`) kann eine Komponente interne Zustandsdaten pflegen (Zugriff durch `this.state`).

Wenn sich die Zustandsdaten einer Komponente ändern, wird das gerenderte Markup durch erneutes Aufrufen von `render()` aktualisiert.
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?
Was soll erledigt werden?
</label>
<input
id="new-todo"
onChange={this.handleChange}
value={this.state.text}
/>
<button>
Add #{this.state.items.length + 1}
Füge #{this.state.items.length + 1} hinzu
</button>
</form>
</div>
Expand Down
8 changes: 6 additions & 2 deletions content/home/examples/an-application.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
---
title: An Application
title: Eine Anwendung
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.
Mit Hilfe von `props` und `state` können wir eine kleine Todo-Anwendung erstellen.

Dieses Beispiel verwendet `state`, um die aktuelle Liste der Elemente sowie den vom Benutzer eingegebenen Text zu sehen.

Obwohl es so scheint, als würden Event-Handler inline gerendert werden, werden sie gesammelt und mit Hilfe der Event-Delegation implementiert.
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: Komponentenbasiert
order: 1
---

Build encapsulated components that manage their own state, then compose them to make complex UIs.
Erstelle verkapselte Komponenten, die ihren eigenen Zustand verwalten und setze sie dann zu komplexen Benutzeroberflächen zusammen.

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.
Da die Komponentenlogik in JavaScript anstelle von Vorlagen geschrieben ist, kannst du problemlos umfangreiche Daten durch deine Anwendung leiten und den Komponentenzustand aus dem DOM heraushalten.
7 changes: 4 additions & 3 deletions content/home/marketing/declarative.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
---
title: Declarative
title: Deklarativ
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.
React macht es dir leicht, interaktive Benutzeroberflächen zu erstellen. Erstelle einfache Ansichten für jeden Zustand deiner Anwendung und React wird sobald du Daten änderst, effizient die richtigen Komponenten aktualisieren und rendern.
Copy link
Member Author

Choose a reason for hiding this comment

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

I've been thinking long and hard about what the meaning of the second sentence is, especially the "simple".

"Design simple views for each state in your application, [...]."

I don't think, that we are talking about "einfache Ansichten" (what is a "einfache Ansicht" vs. "komplexe Ansicht"?), instead we're talking about "Erstelle die Ansichten auf einfache Art und Weise",
so the process of designing is simple/easy, not the view.
That would also mean that the original english sentence isn't that good,
should be something like "Easily/Simply design views.", if my thoughts are correct.

What do you think about that?

Copy link
Member

Choose a reason for hiding this comment

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

I can understand your confusion. I also needed a few times to understand the last sentence ^^ but I think your thoughts are not that correct. The sentence says "Erstelle einfache Ansichten" and not "Erstelle einfach/locker/easy Ansichten". I have talked to a few people who have spent years in England and it has always come out that it means "Erstelle einfache Ansichten". What are you thinking @ChrisB9 ?

Copy link
Collaborator

Choose a reason for hiding this comment

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

It's a difficult one...
This is the marketing section, so simple as in "einfach,locker" does not sound wrong either

For fun, i put it into a stupid translator: https://www.deepl.com/translator#en/de/React%20makes%20it%20painless%20to%20create%20interactive%20UIs.%20Design%20simple%20views%20for%20each%20state%20in%20your%20application%2C%20and%20React%20will%20efficiently%20update%20and%20render%20just%20the%20right%20components%20when%20your%20data%20changes.%0A%0A

there is one option that doesnt sound wrong either: benutzerfreundlich(e). I really am stumbling upon the "marketing"-section, because what is the intention of this message? It seems to me that this is for everyone wondering "what the heck is react"...

Copy link
Member

Choose a reason for hiding this comment

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

@tesseralis can you help us to understand the meaning of this sentence?

Copy link
Member

Choose a reason for hiding this comment

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

@gaearon might be a better source, but in this case I think "view" is the "View" of "Model-View-Controller", i.e."design simple UIs for each state of your application"

Copy link
Member Author

Choose a reason for hiding this comment

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

The sentence says "Erstelle einfache Ansichten" and not "Erstelle einfach/locker/easy Ansichten". I have talked to a few people who have spent years in England and it has always come out that it means "Erstelle einfache Ansichten".

Yes, the original sentence means "einfache Ansichten", I think that's clear.

My question is whether the original sentence is correct and what it should express:

  • It's easy to create a view
    or
  • You can create a simple view (=> what is a simple view?)


Deklarative Ansichten machen deinen Code vorhersehbarer und leichter zu debuggen.

Declarative views make your code more predictable and easier to debug.
8 changes: 5 additions & 3 deletions content/home/marketing/learn-once-write-anywhere.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
---
title: Learn Once, Write Anywhere
title: Einmal lernen, für jede Plattform schreiben
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.
Wir treffen keine Annahmen über den Rest deines Technologie-Stacks, sodass du neue Funktionen in React entwickeln kannst, ohne bestehenden Code neu zu schreiben.

React kann auch auf dem Server mit Node und als mobile Anwendungen mit [React Native](https://facebook.github.io/react-native/) gerendert werden.


React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).