stuff

Author: gaearon

beta/src/pages/learn/index.md

@@ -10,7 +10,12 @@ Welcome to the React documentation! This page will give you an introduction to t
 
 <YouWillLearn>
 
-TODO
+- How to define components
+- How to add markup and styles
+- How to display data
+- How to render conditions and lists
+- How to respond to events and update the screen
+- How to share data between components
 
 </YouWillLearn>
 
@@ -250,14 +255,19 @@ Notice how `<li>` has a `key` attribute. A key helps React figure out what happe
 
 ```js
 const products = [
-  { title: 'Cabbage', id: 1 },
-  { title: 'Garlic', id: 2 },
-  { title: 'Apple', id: 3 },
+  { title: 'Cabbage', isFruit: false, id: 1 },
+  { title: 'Garlic', isFruit: false, id: 2 },
+  { title: 'Apple', isFruit: true, id: 3 },
 ];
 
 export default function ShoppingList() {
   const listItems = products.map(product =>
-    <li key={product.id}>
+    <li
+      key={product.id}
+      style={{
+        color: product.isFruit ? 'magenta' : 'darkgreen'
+      }}
+    >
       {product.title}
     </li>
   );
@@ -470,4 +480,10 @@ button {
 }
 ```
 
-</Sandpack>
+</Sandpack>
+
+## Next steps {/*next-steps*/}
+
+By now, you know the basics of how to write React code.
+
+Head to [Thinking in React](/learn/thinking-in-react) to see how it feels to build a UI with React in practice.

beta/src/pages/learn/thinking-in-react.md

@@ -195,7 +195,7 @@ td {
 
 </Sandpack>
 
-**Don't fret if this code example looks intimidating!** In this guide, we're focusing on concepts rather than code. Make sure to bookmark [Describing the UI](/learn/describing-the-ui) which will help you fill in the gaps and make sense of this code.
+(If this code looks intimidating, go through the [Quick Start](/learn/) first!)
 
 After building your components, you'll have a library of reusable components that render your data model. Because this is a static app, the components will only return JSX. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. This is called _one-way data flow_ because the data flows down from the top-level component to the ones at the bottom of the tree.