add codepen examples for conditional rendering page

content/docs/conditional-rendering.md

@@ -42,7 +42,7 @@ ReactDOM.render(
 );
 ```
 
-[**Auf CodePen ausprobieren**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
+**[Auf CodePen ausprobieren](codepen://conditional-rendering/conditional-rendering)**
 
 Abhängig vom Wert des `isLoggedIn` Prop stellt das Beispiel eine der Begrüßungen dar.
 
@@ -116,7 +116,7 @@ ReactDOM.render(
 );
 ```
 
-[**Auf CodePen ausprobieren**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
+**[Auf CodePen ausprobieren](codepen://conditional-rendering/element-variable)**
 
 Während Variablen und `if` Ausdrücke einen guten Weg darstellen um eine Komponente bedingt anzuzeigen, benötigt man manchmal eine etwas kürzere Schreibweise. Es gibt mehrere Wege, Bedingungen direkt in JSX mit aufzunehmen. Diese werden anschließend erklärt.
 
@@ -146,7 +146,7 @@ ReactDOM.render(
 );
 ```
 
-[**Auf CodePen ausprobieren**](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
+**[Auf CodePen ausprobieren](codepen://conditional-rendering/inline-if-else-with-logical-operator)**
 
 Das funktioniert, weil `true && ausdruck` in JavaScript immer zu `ausdruck` evaluiert und `false && ausdruck` immer zu `false` evaluiert.
 
@@ -238,6 +238,6 @@ ReactDOM.render(
 );
 ```
 
-[**Auf CodePen ausprobieren**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)
+**[Auf CodePen ausprobieren](codepen://conditional-rendering/preventing-component-rendering)**
 
 Der Rückgabewert `null` aus der `render` Methode einer Komponente hat keinen Einfluss auf die Aufrufe der Lifecycle-Methoden. `componentDidUpdate` wird beispielsweise weiterhin aufgerufen.

examples/conditional-rendering/conditional-rendering.js

@@ -0,0 +1,21 @@
+function UserGreeting(props) {
+  return <h1>Willkommen zurück!</h1>;
+}
+
+function GuestGreeting(props) {
+  return <h1>Bitte melde dich an.</h1>;
+}
+
+function Greeting(props) {
+  const isLoggedIn = props.isLoggedIn;
+  if (isLoggedIn) {
+    return <UserGreeting />;
+  }
+  return <GuestGreeting />;
+}
+
+ReactDOM.render(
+  // Probiere mal isLoggedIn={true} aus:
+  <Greeting isLoggedIn={false} />,
+  document.getElementById('root')
+);

examples/conditional-rendering/element-variable.js

@@ -0,0 +1,71 @@
+class LoginControl extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleLoginClick = this.handleLoginClick.bind(this);
+    this.handleLogoutClick = this.handleLogoutClick.bind(this);
+    this.state = {isLoggedIn: false};
+  }
+
+  handleLoginClick() {
+    this.setState({isLoggedIn: true});
+  }
+
+  handleLogoutClick() {
+    this.setState({isLoggedIn: false});
+  }
+
+  render() {
+    const isLoggedIn = this.state.isLoggedIn;
+    let button;
+
+    if (isLoggedIn) {
+      button = <LogoutButton onClick={this.handleLogoutClick} />;
+    } else {
+      button = <LoginButton onClick={this.handleLoginClick} />;
+    }
+
+    return (
+      <div>
+        <Greeting isLoggedIn={isLoggedIn} />
+        {button}
+      </div>
+    );
+  }
+}
+
+function UserGreeting(props) {
+  return <h1>Willkommen zurück!</h1>;
+}
+
+function GuestGreeting(props) {
+  return <h1>Bitte melde dich an.</h1>;
+}
+
+function Greeting(props) {
+  const isLoggedIn = props.isLoggedIn;
+  if (isLoggedIn) {
+    return <UserGreeting />;
+  }
+  return <GuestGreeting />;
+}
+
+function LoginButton(props) {
+  return (
+    <button onClick={props.onClick}>
+      Anmelden
+    </button>
+  );
+}
+
+function LogoutButton(props) {
+  return (
+    <button onClick={props.onClick}>
+      Abmelden
+    </button>
+  );
+}
+
+ReactDOM.render(
+  <LoginControl />,
+  document.getElementById('root')
+);

examples/conditional-rendering/inline-if-else-with-logical-operator.js

@@ -0,0 +1,19 @@
+function Mailbox(props) {
+  const unreadMessages = props.unreadMessages;
+  return (
+    <div>
+      <h1>Hallo!</h1>
+      {unreadMessages.length > 0 &&
+      <h2>
+        Du hast {unreadMessages.length} ungelesene Nachrichten.
+      </h2>
+      }
+    </div>
+  );
+}
+
+const messages = ['React', 'Re: React', 'Re:Re: React'];
+ReactDOM.render(
+  <Mailbox unreadMessages={messages} />,
+  document.getElementById('root')
+);

examples/conditional-rendering/preventing-component-rendering.js

@@ -0,0 +1,41 @@
+function WarningBanner(props) {
+  if (!props.warn) {
+    return null;
+  }
+
+  return (
+    <div className="warning">
+      Warnung!
+    </div>
+  );
+}
+
+class Page extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {showWarning: true};
+    this.handleToggleClick = this.handleToggleClick.bind(this);
+  }
+
+  handleToggleClick() {
+    this.setState(state => ({
+      showWarning: !state.showWarning
+    }));
+  }
+
+  render() {
+    return (
+      <div>
+        <WarningBanner warn={this.state.showWarning} />
+        <button onClick={this.handleToggleClick}>
+          {this.state.showWarning ? 'Ausblenden' : 'Anzeigen'}
+        </button>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <Page />,
+  document.getElementById('root')
+);