+ {% if page.prev %}
+ ← Prev
+ {% endif %}
+ {% if page.next %}
+ Next →
+ {% endif %}
+
+
+
diff --git a/docs/_plugins/sidebar_item.rb b/docs/_plugins/sidebar_item.rb
index d899af7ab18..061414fea64 100644
--- a/docs/_plugins/sidebar_item.rb
+++ b/docs/_plugins/sidebar_item.rb
@@ -12,7 +12,13 @@ def community_sidebar_link(item)
return sidebar_helper(item, 'community')
end
+ def tutorial_sidebar_link(item)
+ return sidebar_helper(item, 'tutorial')
+ end
+
def sidebar_helper(item, group)
+ forceInternal = item["forceInternal"]
+
pageID = @context.registers[:page]["id"]
itemID = item["id"]
href = item["href"] || "/react/#{group}/#{itemID}.html"
@@ -20,7 +26,7 @@ def sidebar_helper(item, group)
if pageID == itemID
classes.push("active")
end
- if item["href"]
+ if item["href"] && (forceInternal == nil)
classes.push("external")
end
className = classes.size > 0 ? " class=\"#{classes.join(' ')}\"" : ""
diff --git a/docs/img/tutorial/devtools.png b/docs/img/tutorial/devtools.png
new file mode 100644
index 00000000000..7dcf3c6a9db
Binary files /dev/null and b/docs/img/tutorial/devtools.png differ
diff --git a/docs/img/tutorial/tictac-empty.png b/docs/img/tutorial/tictac-empty.png
new file mode 100644
index 00000000000..fabe3f03464
Binary files /dev/null and b/docs/img/tutorial/tictac-empty.png differ
diff --git a/docs/img/tutorial/tictac-numbers.png b/docs/img/tutorial/tictac-numbers.png
new file mode 100644
index 00000000000..69d163f4532
Binary files /dev/null and b/docs/img/tutorial/tictac-numbers.png differ
diff --git a/docs/tutorial/tutorial.md b/docs/tutorial/tutorial.md
new file mode 100644
index 00000000000..3fffd2439a9
--- /dev/null
+++ b/docs/tutorial/tutorial.md
@@ -0,0 +1,509 @@
+---
+id: tutorial
+title: "Tutorial: Thinking In React"
+layout: tutorial
+sectionid: tutorial
+permalink: /tutorial/tutorial.html
+---
+
+## What We're Building
+
+Today, we're going to build an interactive tic-tac-toe game. We'll assume some familiarity with HTML and JavaScript but you should be able to follow along even if you haven't used them before.
+
+If you like, you can check out the final result here: Final Result. Try playing the game. You can also click on a link in the move list to go "back in time" and see what the board looked like just after that move was made.
+
+## What is React?
+
+React is a declarative, efficient, and flexible JavaScript library for building user interfaces.
+
+React has a few different kinds of components, but we'll start with React.Component subclasses:
+
+```javascript
+class ShoppingList extends React.Component {
+ render() {
+ return (
+
+
Shopping List for {this.props.name}
+
+
Instagram
+
WhatsApp
+
Oculus
+
+
+ );
+ }
+}
+
+// Example usage:
+```
+
+We'll get to the funny XML-like tags in a second. Your components tell React what you want to render – then React will efficiently update and render just the right components when your data changes.
+
+Here, ShoppingList is a **React component class**, or **React component type**. A component takes in parameters, called `props`, and returns a hierarchy of views to display via the `render` method.
+
+The `render` method return a *description* of what you want to render, and then React takes that description and renders it to the screen. In particular, `render` returns a **React element**, which is a lightweight description of what to render. Most React developers use a special syntax called JSX which makes it easier to write these structures. The `` syntax is transformed at build time to `React.createElement('div')`. The example above is equivalent to:
+
+```javascript
+return React.createElement('div', {className: 'shopping-list'},
+ React.createElement('h1', ...),
+ React.createElement('ul', ...)
+);
+```
+
+You can put any JavaScript expression within braces inside JSX. Each React element is a real JavaScript object that you can store in a variable or pass around your program.
+
+The `ShoppingList` component only renders built-in DOM components, but you can compose custom React components just as easily, by writing ``. Each component is encapsulated so it can operate independently, which allows you to build complex UIs out of simple components.
+
+## Getting Started
+
+Start with this example: Starter Code.
+
+It contains the shell of what we're building today. We've provided the styles so you only need to worry about the JavaScript.
+
+In particular, we have three components:
+
+* Square
+* Board
+* Game
+
+The Square component renders a single `
`, the Board renders 9 squares, and the Game component renders a board with some placeholders that we'll fill in later. None of the components are interactive at this point.
+
+(The end of the JS file also defines a helper function `calculateWinner` that we'll use later.)
+
+## Passing Data Through Props
+
+Just to get our feet wet, let's try passing some data from the Board component to the Square component. In Board's `renderSquare` method, change the code to return `` then change Square's render method to show that value by replacing `{/* TODO */}` with `{this.props.value}`.
+
+Before:
+
+
+
+After: You should see a number in each square in the rendered output.
+
+
+
+##An Interactive Component
+
+Let's make the Square component fill in an "X" when you click it. Try changing the tag returned in the `render()` function of the `Square` class to:
+
+```html
+