Merge pull request #3673 from reactjs/syntax-jsx

Improve syntax highlighting in docs

Author: taion

README.md

@@ -37,7 +37,7 @@ Using [npm](https://www.npmjs.com/):
 
 Then with a module bundler like [webpack](https://webpack.github.io/) that supports either CommonJS or ES2015 modules, use as you would anything else:
 
-```js
+```jsx
 // using an ES6 transpiler, like babel
 import { Router, Route, Link } from 'react-router'
 
@@ -57,7 +57,7 @@ You can find the library on `window.ReactRouter`.
 
 ### What's it look like?
 
-```js
+```jsx
 import React from 'react'
 import { render } from 'react-dom'
 import { Router, Route, Link, browserHistory } from 'react-router'

docs/API.md

@@ -53,15 +53,15 @@ Alias for `children`.
 ##### `history`
 The history the router should listen to. Typically `browserHistory` or `hashHistory`.
 
-```js
+```jsx
 import { browserHistory } from 'react-router'
 ReactDOM.render(<Router history={browserHistory} />, el)
 ```
 
 ##### `createElement(Component, props)`
 When the router is ready to render a branch of route components, it will use this function to create the elements. You may want to take control of creating the elements when you're using some sort of data abstraction, like setting up subscriptions to stores, or passing in some sort of application module to each component via props.
 
-```js
+```jsx
 <Router createElement={createElement} />
 
 // default behavior
@@ -140,7 +140,7 @@ You can also pass props you'd like to be on the `<a>` such as a `title`, `id`, `
 #### Example
 Given a route like `<Route path="/users/:userId" />`:
 
-```js
+```jsx
 <Link to={`/users/${user.id}`} activeClassName="active">{user.name}</Link>
 // becomes one of these depending on your History and if the route is
 // active
@@ -172,7 +172,7 @@ Contains data and methods relevant to routing. Most useful for imperatively tran
 ##### `push(pathOrLoc)`
 Transitions to a new URL, adding a new entry in the browser history.
 
-```js
+```jsx
 router.push('/users/12')
 
 // or with a location descriptor object
@@ -242,7 +242,7 @@ If left undefined, the router will try to match the child routes.
 A single component to be rendered when the route matches the URL. It can
 be rendered by the parent route component with `this.props.children`.
 
-```js
+```jsx
 const routes = (
   <Route component={App}>
     <Route path="groups" component={Groups} />
@@ -265,7 +265,7 @@ class App extends React.Component {
 ##### `components`
 Routes can define one or more named components as an object of `[name]: component` pairs to be rendered when the path matches the URL. They can be rendered by the parent route component with `this.props[name]`.
 
-```js
+```jsx
 // Think of it outside the context of the router - if you had pluggable
 // portions of your `render`, you might do it like this:
 // <App main={<Users />} sidebar={<UsersSidebar />} />
@@ -316,7 +316,7 @@ Same as `component` but asynchronous, useful for code-splitting.
 ###### `callback` signature
 `cb(err, component)`
 
-```js
+```jsx
 <Route path="courses/:courseId" getComponent={(nextState, cb) => {
   // do asynchronous stuff to find the components
   cb(null, Course)
@@ -330,7 +330,7 @@ code-splitting.
 ###### `callback` signature
 `cb(err, components)`
 
-```js
+```jsx
 <Route path="courses/:courseId" getComponents={(nextState, cb) => {
   // do asynchronous stuff to find the components
   cb(null, {sidebar: CourseSidebar, content: Course})
@@ -348,7 +348,7 @@ If `callback` is listed as a 3rd argument, this hook will run asynchronously, an
 ###### `callback` signature
 `cb(err)`
 
-```js
+```jsx
 const userIsInATeam = (nextState, replace, callback) => {
   fetch(...)
     .then(response = response.json())
@@ -389,7 +389,7 @@ Same as `childRoutes` but asynchronous and receives `partialNextState`. Useful f
 ###### `callback` signature
 `cb(err, routesArray)`
 
-```js
+```jsx
 let myRoute = {
   path: 'course/:courseId',
   childRoutes: [
@@ -436,7 +436,7 @@ Same as `indexRoute`, but asynchronous and receives `partialNextState`. As with
 ###### `callback` signature
 `cb(err, route)`
 
-```js
+```jsx
 // For example:
 let myIndexRoute = {
   component: MyIndex
@@ -472,7 +472,7 @@ The path you want to redirect to.
 ##### `query`
 By default, the query parameters will just pass through but you can specify them if you need to.
 
-```js
+```jsx
 // Say we want to change from `/profile/123` to `/about/123`
 // and redirect `/get-in-touch` to `/contact`
 <Route component={App}>
@@ -484,7 +484,7 @@ By default, the query parameters will just pass through but you can specify them
 
 Note that the `<Redirect>` can be placed anywhere in the route hierarchy, though [normal precedence](/docs/guides/RouteMatching.md#precedence) rules apply. If you'd prefer the redirects to be next to their respective routes, the `from` path will match the same as a regular route `path`.
 
-```js
+```jsx
 <Route path="course/:courseId">
   <Route path="dashboard" />
   {/* /course/123/home -> /course/123/dashboard */}
@@ -535,7 +535,7 @@ A subset of `this.props.params` that were directly specified in this component's
 The matched child route element to be rendered. If the route has [named components](/docs/API.md#named-components) then this will be undefined, and the components will instead be available as direct properties on `this.props`.
 
 ##### Example
-```js
+```jsx
 render((
   <Router>
     <Route path="/" component={App}>
@@ -563,7 +563,7 @@ class App extends React.Component {
 When a route has one or more named components, the child elements are available by name on `this.props`. In this case `this.props.children` will be undefined. All route components can participate in the nesting.
 
 #### Example
-```js
+```jsx
 render((
   <Router>
     <Route path="/" component={App}>
@@ -635,7 +635,7 @@ and
 enhancers from `history`
 
 #### Example
-```js
+```jsx
 import createHashHistory from 'history/lib/createHashHistory'
 const history = useRouterHistory(createHashHistory)({ queryKey: false })
 ```

docs/Glossary.md

@@ -27,7 +27,7 @@ This is a glossary of common terms used in the React Router codebase and documen
 
 ## Action
 
-```js
+```jsx
 type Action = 'PUSH' | 'REPLACE' | 'POP';
 ```
 
@@ -39,15 +39,15 @@ An *action* describes the type of change to a URL. Possible values are:
 
 ## Component
 
-```js
+```jsx
 type Component = ReactClass | string;
 ```
 
 A *component* is a React component class or a string (e.g. "div"). Basically, it's anything that can be used as the first argument to [`React.createElement`](https://facebook.github.io/react/docs/top-level-api.html#react.createelement).
 
 ## EnterHook
 
-```js
+```jsx
 type EnterHook = (nextState: RouterState, replace: RedirectFunction, callback?: Function) => any;
 ```
 
@@ -65,15 +65,15 @@ A *hash* is a string that represents the hash portion of the URL. It is synonymo
 
 ## LeaveHook
 
-```js
+```jsx
 type LeaveHook = (prevState: RouterState) => any;
 ```
 
 A *leave hook* is a user-defined function that is called when a route is about to be unmounted. It receives the previous [router state](#routerstate) as its first argument. 
 
 ## Location
 
-```js
+```jsx
 type Location = {
   pathname: Pathname;
   search: QueryString;
@@ -108,15 +108,15 @@ You can read more about location descriptors in [the `history` docs](https://git
 
 ## LocationKey
 
-```js
+```jsx
 type LocationKey = string;
 ```
 
 A *location key* is a string that is unique to a particular [`location`](#location). It is the one piece of data that most accurately answers the question "Where am I?".
 
 ## LocationState
 
-```js
+```jsx
 type LocationState = ?Object;
 ```
 
@@ -129,55 +129,55 @@ This type gets its name from the first argument to HTML5's [`pushState`][pushSta
 
 ## Params
 
-```js
+```jsx
 type Params = Object;
 ```
 
 The word *params* refers to an object of key/value pairs that were parsed out of the original URL's [pathname](#pathname). The values of this object are typically strings, unless there is more than one param with the same name in which case the value is an array.
 
 ## Path
 
-```js
+```jsx
 type Path = Pathname + QueryString + Hash;
 ```
 
 A *path* represents a URL path.
 
 ## Pathname
 
-```js
+```jsx
 type Pathname = string;
 ```
 
 A *pathname* is the portion of a URL that describes a hierarchical path, including the preceding `/`. For example, in `http://example.com/the/path?the=query`, `/the/path` is the pathname. It is synonymous with `window.location.pathname` in web browsers.
 
 ## Query
 
-```js
+```jsx
 type Query = Object;
 ```
 
 A *query* is the parsed version of a [query string](#querystring).
 
 ## QueryString
 
-```js
+```jsx
 type QueryString = string;
 ```
 
 A *query string* is the portion of the URL that follows the [pathname](#pathname), including any preceding `?`. For example, in `http://example.com/the/path?the=query`, `?the=query` is the query string. It is synonymous with `window.location.search` in web browsers.
 
 ## RedirectFunction
 
-```js
+```jsx
 type RedirectFunction = (state: ?LocationState, pathname: Pathname | Path, query: ?Query) => void;
 ```
 
 A *redirect function* is used in [`onEnter` hooks](#enterhook) to trigger a transition to a new URL.
 
 ## Route
 
-```js
+```jsx
 type Route = {
   component: RouteComponent;
   path: ?RoutePattern;
@@ -192,7 +192,7 @@ It may help to think of a route as an "entry point" into your UI. You don't need
 
 ## RouteComponent
 
-```js
+```jsx
 type RouteComponent = Component;
 ```
 
@@ -208,23 +208,23 @@ Route components should generally be component classes rather than strings. This
 
 ## RouteConfig
 
-```js
+```jsx
 type RouteConfig = Array<Route>;
 ```
 
 A *route config* is an array of [route](#route)s that specifies the order in which routes should be tried when the router attempts to match a URL.
 
 ## RouteHook
 
-```js
+```jsx
 type RouteHook = (nextLocation?: Location) => any;
 ```
 
 A *route hook* is a function that is used to prevent the user from leaving a route. On normal transitions, it receives the next [location](#location) as an argument and must either `return false` to cancel the transition or `return` a prompt message to show the user. When invoked during the `beforeunload` event in web browsers, it does not receive any arguments and must `return` a prompt message to cancel the transition.
 
 ## RoutePattern
 
-```js
+```jsx
 type RoutePattern = string;
 ```
 
@@ -239,7 +239,7 @@ Route patterns are relative to the pattern of the parent route unless they begin
 
 ## Router
 
-```js
+```jsx
 type Router = {
   push(location: LocationDescriptor) => void;
   replace(location: LocationDescriptor) => void;
@@ -255,7 +255,7 @@ A *router* object allows for procedural manipulation of the routing state.
 
 ## RouterState
 
-```js
+```jsx
 type RouterState = {
   location: Location;
   routes: Array<Route>;

docs/Introduction.md

@@ -6,7 +6,7 @@ To illustrate the problems React Router is going to solve for you, let's build a
 
 ### Without React Router
 
-```js
+```jsx
 import React from 'react'
 import { render } from 'react-dom'
 
@@ -101,7 +101,7 @@ We'd have to make our URL parsing a lot smarter, and we would end up with a lot
 
 Let's refactor our app to use React Router.
 
-```js
+```jsx
 import React from 'react'
 import { render } from 'react-dom'
 
@@ -148,7 +148,7 @@ React Router knows how to build nested UI for us, so we don't have to manually f
 
 Internally, the router converts your `<Route>` element hierarchy to a [route config](/docs/Glossary.md#routeconfig). But if you're not digging the JSX you can use plain objects instead:
 
-```js
+```jsx
 const routes = {
   path: '/',
   component: App,
@@ -166,7 +166,7 @@ render(<Router history={history} routes={routes} />, document.body)
 
 Alright, now we're ready to nest the inbox messages inside the inbox UI.
 
-```js
+```jsx
 // Make a new component to render inside of Inbox
 const Message = React.createClass({
   render() {
@@ -228,7 +228,7 @@ And visits to `/inbox` will build this:
 
 We're going to need to know something about the message in order to fetch it from the server. Route components get some useful properties injected into them when you render, particularly the parameters from the dynamic segment of your path. In our case, `:id`.
 
-```js
+```jsx
 const Message = React.createClass({
 
   componentDidMount() {