From 17ea30c8c5451926797e880bc5033eeedf6b3a13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Tue, 16 Jul 2013 14:52:57 -0700 Subject: [PATCH] Fix title casing and heading levels --- _includes/nav_docs.html | 14 ++++---- docs/01-why-react.md | 8 ++--- docs/02-displaying-data.md | 10 +++--- docs/02.1-jsx-in-depth.md | 22 ++++++------ docs/02.2-jsx-gotchas.md | 8 ++--- docs/03-interactivity-and-dynamic-uis.md | 18 +++++----- docs/04-multiple-components.md | 22 ++++++------ docs/05-reusable-components.md | 12 +++---- docs/06-forms.md | 14 ++++---- docs/07-working-with-the-browser.md | 24 ++++++------- docs/07.1-more-about-refs.md | 10 +++--- docs/08-tooling-integration.md | 12 +++---- docs/09-reference.md | 44 ++++++++++++------------ 13 files changed, 109 insertions(+), 109 deletions(-) diff --git a/_includes/nav_docs.html b/_includes/nav_docs.html index eec25456..98bcd4fd 100644 --- a/_includes/nav_docs.html +++ b/_includes/nav_docs.html @@ -2,7 +2,7 @@

Quick start

@@ -10,13 +10,13 @@

Guides

diff --git a/docs/01-why-react.md b/docs/01-why-react.md index 52fca188..202f08f9 100644 --- a/docs/01-why-react.md +++ b/docs/01-why-react.md @@ -8,20 +8,20 @@ React is a JavaScript library for creating user interfaces by Facebook and Insta We built React to solve one problem: **building large applications with data that changes over time**. To do this, React has two main ideas. -### Stay simple and declarative +### Stay Simple and Declarative React apps are easy to write. Simply express how the UI should look at any given point in time, and React will manage all UI updates for you when your underlying data changes. It's just like writing a server-rendered web app: when the data changes, React conceptually hits the refresh button, except React is very fast and maintains the state of your UI. Because of this, React's API is very small and easy to understand. -### Build composable components +## Build Composable Components React is all about building reusable components. In fact, with React the *only* thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy. -### Give it five minutes +## Give it Five Minutes React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy. We ask that you [give it five minutes](http://37signals.com/svn/posts/3124-give-it-five-minutes) while reading about React; engineers and designers have built thousands of components both inside and outside of Facebook and Instagram, and we hope you'll find it useful! -### Learn more +## Learn More You can learn more about our motivations behind building React in [this blog post](http://facebook.github.io/react/blog/2013/06/05/why-react.html). diff --git a/docs/02-displaying-data.md b/docs/02-displaying-data.md index 05822609..20635d8d 100644 --- a/docs/02-displaying-data.md +++ b/docs/02-displaying-data.md @@ -1,13 +1,13 @@ --- id: 02-displaying-data -title: Displaying data +title: Displaying Data layout: docs prev: 01-why-react.html next: 02.1-jsx-in-depth.html --- The most basic thing you can do with a UI is display some data. React makes it easy to display data, and automatically keeps it up-to-date when the data changes. -### Getting started +## Getting Started Let's look at a really simple example. Create a `hello-react.html` file with the following code: @@ -54,7 +54,7 @@ setInterval(function() { }, 500); ``` -### Reactive updates +## Reactive Updates View the finished code in a web browser and type your name into the text field. Notice that React is only changing the time string in the UI -- any input you put in the text field remains, even though you haven't written any code to manage this behavior. React figures it out for you and does the right thing. @@ -62,13 +62,13 @@ The way it is able to figure this out is that React does not directly manipulate The inputs to this component are called `props` -- short for "properties". They're passed as attributes in JSX syntax. You should think of these as immutable within the component, that is, **never write to this.props**. -### Components are just like functions +## Components are Just Like Functions React components are very simple. You can think of them as simple function that take in `props` and `state` (discussed later) and render HTML. Because they're so simple, it makes them very easy to reason about. **One limitation**: React components can only render a single root node. If you want to return multiple nodes they *must* be wrapped in a single root. This is a limitation we can fix, but we have not identified a pressing reason to do so yet; reach out to our [Google Group](http://groups.google.com/group/reactjs) if you have a compelling case for it. -### JSX syntax +## JSX Syntax We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome. diff --git a/docs/02.1-jsx-in-depth.md b/docs/02.1-jsx-in-depth.md index ed0cfa9e..0d7c6627 100644 --- a/docs/02.1-jsx-in-depth.md +++ b/docs/02.1-jsx-in-depth.md @@ -8,7 +8,7 @@ next: 02.2-jsx-gotchas.html JSX is a JavaScript XML syntax transform recommended (but not required) for use with React. -### Why JSX? +## Why JSX? First of all, **don't use JSX if you don't like it!** @@ -25,7 +25,7 @@ We recommend using JSX for many reasons: - Designers are more comfortable making changes. - It's familiar for those who have used MXML or XAML. -### The Transform +## The Transform JSX transforms XML-like syntax into native JavaScript. It turns XML elements and attributes into function calls and objects, respectively. @@ -61,7 +61,7 @@ how to setup compilation. > Details about the code transform are given here to increase understanding, but > your code should not rely on these implementation details. -### React and JSX +## React and JSX React and JSX are independent technologies, but JSX was primarily built with React in mind. The two valid uses of JSX are: @@ -97,7 +97,7 @@ See [Component Basics](component-basics.html) to learn more about components. > as XML attribute names. Instead, React DOM components expect attributes like > `className` and `htmlFor`, respectively. -### DOM Convenience +## DOM Convenience Having to define variables for every type of DOM element can get tedious (e.g. `var div, span, h1, h2, ...`). JSX provides a convenience to address this @@ -121,9 +121,9 @@ var tree = Nav(null, React.DOM.span(null, null)); > DOM. The docblock parameter is only a convenience to resolve the most commonly > used elements. In general, JSX has no notion of the DOM. -### JavaScript Expressions +## JavaScript Expressions -##### Attribute Expressions +### Attribute Expressions To use a JavaScript expression as an attribute value, wrap the expression in a pair of curly braces (`{}`) instead of quotes (`""`). @@ -135,7 +135,7 @@ var person = ; var person = Person({name: window.isLoggedIn ? window.name : ''}); ``` -##### Child Expressions +### Child Expressions Likewise, JavaScript expressions may be used to express children: @@ -146,14 +146,14 @@ var content = {window.isLoggedIn ?