diff --git a/_includes/2017/head.html b/_includes/2017/head.html
index c9a3a7bed..1a7a5cb0c 100644
--- a/_includes/2017/head.html
+++ b/_includes/2017/head.html
@@ -5,15 +5,17 @@
{% include polyfills.html %}
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
+
diff --git a/_sass/2017/components/h3-section.scss b/_sass/2017/components/h3-section.scss
index d6b8d3571..f4741b04b 100644
--- a/_sass/2017/components/h3-section.scss
+++ b/_sass/2017/components/h3-section.scss
@@ -12,8 +12,8 @@
& {
background: white;
box-shadow:
- 0 4px 8px rgba(80, 100, 150, 0.05),
- 0 2px 3px rgba(80, 100, 150, 0.1);
+ 0 4px 8px rgba(80, 100, 150, 0.07),
+ 0 2px 3px rgba(80, 100, 150, 0.15);
}
/* Lists */
@@ -77,3 +77,8 @@
border-top: solid 1px $line-color;
}
}
+
+.h3-section.-prime > .body {
+ border: solid 2px $baseA-400;
+ border-radius: 2px;
+}
diff --git a/_sass/2017/markdown/headings.scss b/_sass/2017/markdown/headings.scss
index a5f64c497..630a8e6b9 100644
--- a/_sass/2017/markdown/headings.scss
+++ b/_sass/2017/markdown/headings.scss
@@ -70,19 +70,39 @@
* Undo prism theme crap
*/
-.MarkdownBody pre {
- box-shadow: none;
- border-left: 0;
- overflow: hidden;
- overflow-x: auto;
- background: white;
-}
+.MarkdownBody {
+ pre {
+ box-shadow: none;
+ border-left: 0;
+ overflow: hidden;
+ overflow-x: auto;
+ background: white;
+ }
-.MarkdownBody pre > code {
- color: $text-color;
- max-height: auto;
- padding: 0;
- background: transparent;
- overflow: visible;
- font-size: 1em;
+ pre > code {
+ color: $text-color;
+ max-height: auto;
+ padding: 0;
+ background: transparent;
+ overflow: visible;
+ font-size: 1em;
+ }
+
+ // Line highlight
+ .line-highlight {
+ background: linear-gradient(
+ to right,
+ rgba($baseB-400, 0.05) 75%,
+ rgba($baseB-400, 0));
+ }
+
+ // Line highlight ranges
+ .line-highlight[data-end] {
+ margin-top: 0;
+ }
+
+ .line-highlight::before,
+ .line-highlight::after {
+ display: none;
+ }
}
diff --git a/react.md b/react.md
index 0f644ec61..fd070f022 100644
--- a/react.md
+++ b/react.md
@@ -6,11 +6,12 @@ layout: 2017/sheet
{%raw%}
-Example
--------
-{: .-left-reference}
+Components
+----------
+{: .-three-column}
-### Basic example
+### Components
+{: .-prime}
```jsx
import React from 'react'
@@ -32,37 +33,42 @@ const el = document.body
ReactDOM.render(, el)
```
-Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output)).
+Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output))
-### Try it
+### Properties
-
-
-[Open in jsbin](http://jsbin.com/yafixat/edit?js,output)
-{: target="_blank"}
-
-Components
-----------
-{: .-three-column}
-
-### Class components
+```html
+
+```
```jsx
-class MyComponent extends React.Component {
- render () {
- return
- Hello {this.props.name}
-
- }
+render () {
+ this.props.fullscreen
+ ···
+}
+```
+{: data-line="2"}
+
+Use `this.props` to access properties passed to the component.
+See: [Properties](https://facebook.github.io/react/docs/tutorial.html#using-props)
+
+### States
+
+```jsx
+this.setState({ username: 'rstacruz' })
+```
+
+```jsx
+render () {
+ this.state.username
+ ···
}
```
-```jsx
-const el = document.body
-ReactDOM.render(, el)
-```
+Use states (`this.state`) to manage dynamic data.
+See: [States](https://facebook.github.io/react/docs/tutorial.html#reactive-state)
-### Functional components
+### Function components
```jsx
function MyComponent ({ name }) {
@@ -73,6 +79,7 @@ function MyComponent ({ name }) {
```
Functional components have no state. Also, their `props` are passed as the first parameter to a function.
+See: [Function and Class Components](https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components)
### Nesting
@@ -88,43 +95,11 @@ class Info extends React.Component {
}
}
```
+{: data-line="6-7"}
-Nest components to separate concerns. See: [multiple components](http://facebook.github.io/react/docs/multiple-components.html)
+Nest components to separate concerns. See: [Composing Components](https://facebook.github.io/react/docs/components-and-props.html#composing-components)
-### Properties
-
-```html
-
-```
-
-```jsx
-class Video extends React.Component {
- render () {
- this.props.fullscreen
- /* ... */
- }
-}
-```
-
-Use [props](https://facebook.github.io/react/docs/tutorial.html#using-props) (`this.props`) to access parameters passed from the parent.
-
-### States
-
-```jsx
-this.setState({ username: 'rstacruz' })
-```
-
-```jsx
-render () {
- this.state.username
- /* ... */
-}
-```
-
-Use states (`this.state`) to manage dynamic data.
-See: [States](https://facebook.github.io/react/docs/tutorial.html#reactive-state)
-
### Setting default props
```jsx
@@ -145,6 +120,30 @@ class Hello extends React.Component {
}
}
```
+{: data-line="4"}
+
+Set the default state in the `constructor()`.
+
+### Children
+
+```jsx
+class AlertBox extends React.Component {
+ render () {
+ return
+ {this.props.children}
+
+ }
+}
+```
+{: data-line="4"}
+
+```jsx
+
+You have pending notifications
+
+```
+
+Children are passed as the `children` property.
### Component API
@@ -208,6 +207,7 @@ class MyComponent extends React.Component {
}
}
```
+{: data-line="4"}
```jsx
this.input.focus()
@@ -223,6 +223,7 @@ Allows access to DOM nodes. See: [Refs and the DOM](https://facebook.github.io/r
value={this.state.value}
onChange={this.handleChange} />
```
+{: data-line="3"}
```jsx
handleChange: function(event) {
@@ -361,6 +362,7 @@ class VideoPlayer extends React.Component {
}
}
```
+{: data-line="3"}
Propagates `src="..."` down to the sub-component.
See [Transferring props](http://facebook.github.io/react/docs/transferring-props.html).
@@ -435,6 +437,41 @@ Always supply a `key` property.
```
+Examples
+-------
+{: .-left-reference}
+
+### Basic example
+
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+```
+
+```jsx
+class Hello extends React.Component {
+ render () {
+ return
+ Hello {this.props.name}
+
+ }
+}
+```
+
+```jsx
+const el = document.body
+ReactDOM.render(, el)
+```
+
+Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output)).
+
+### Try it
+
+
+
+[Open in jsbin](http://jsbin.com/yafixat/edit?js,output)
+{: target="_blank"}
+
Also see
--------
{: .-one-column}