mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
v0.3.0
This commit is contained in:
Paul O’Shannessy
committed by
Ben Newman
Ben Newman
parent
2c6620d85f
commit
6de0ab3293
@@ -0,0 +1,239 @@
|
||||
/* BASICS */
|
||||
|
||||
.CodeMirror {
|
||||
/* Set height, width, borders, and global font properties here */
|
||||
font-family: monospace;
|
||||
}
|
||||
.CodeMirror-scroll {
|
||||
/* Set scrolling behaviour here */
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* PADDING */
|
||||
|
||||
.CodeMirror-lines {
|
||||
padding: 14px 0; /* Vertical padding around content */
|
||||
}
|
||||
.CodeMirror pre {
|
||||
padding: 0 14px; /* Horizontal padding of content */
|
||||
}
|
||||
|
||||
.CodeMirror-scrollbar-filler {
|
||||
background-color: white; /* The little square between H and V scrollbars */
|
||||
}
|
||||
|
||||
/* GUTTER */
|
||||
|
||||
.CodeMirror-gutters {
|
||||
border-right: 1px solid #ddd;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
.CodeMirror-linenumbers {}
|
||||
.CodeMirror-linenumber {
|
||||
padding: 0 3px 0 5px;
|
||||
min-width: 20px;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* CURSOR */
|
||||
|
||||
.CodeMirror div.CodeMirror-cursor {
|
||||
border-left: 1px solid black;
|
||||
}
|
||||
/* Shown when moving in bi-directional text */
|
||||
.CodeMirror div.CodeMirror-secondarycursor {
|
||||
border-left: 1px solid silver;
|
||||
}
|
||||
.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
|
||||
width: auto;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
background: rgba(0, 200, 0, .4);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600c800, endColorstr=#4c00c800);
|
||||
}
|
||||
/* Kludge to turn off filter in ie9+, which also accepts rgba */
|
||||
.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor:not(#nonsense_id) {
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
||||
}
|
||||
/* Can style cursor different in overwrite (non-insert) mode */
|
||||
.CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite {}
|
||||
|
||||
/* DEFAULT THEME */
|
||||
|
||||
.cm-s-default .cm-keyword {color: #708;}
|
||||
.cm-s-default .cm-atom {color: #219;}
|
||||
.cm-s-default .cm-number {color: #164;}
|
||||
.cm-s-default .cm-def {color: #00f;}
|
||||
.cm-s-default .cm-variable {color: black;}
|
||||
.cm-s-default .cm-variable-2 {color: #05a;}
|
||||
.cm-s-default .cm-variable-3 {color: #085;}
|
||||
.cm-s-default .cm-property {color: black;}
|
||||
.cm-s-default .cm-operator {color: black;}
|
||||
.cm-s-default .cm-comment {color: #a50;}
|
||||
.cm-s-default .cm-string {color: #a11;}
|
||||
.cm-s-default .cm-string-2 {color: #f50;}
|
||||
.cm-s-default .cm-meta {color: #555;}
|
||||
.cm-s-default .cm-error {color: #f00;}
|
||||
.cm-s-default .cm-qualifier {color: #555;}
|
||||
.cm-s-default .cm-builtin {color: #30a;}
|
||||
.cm-s-default .cm-bracket {color: #997;}
|
||||
.cm-s-default .cm-tag {color: #170;}
|
||||
.cm-s-default .cm-attribute {color: #00c;}
|
||||
.cm-s-default .cm-header {color: blue;}
|
||||
.cm-s-default .cm-quote {color: #090;}
|
||||
.cm-s-default .cm-hr {color: #999;}
|
||||
.cm-s-default .cm-link {color: #00c;}
|
||||
|
||||
.cm-negative {color: #d44;}
|
||||
.cm-positive {color: #292;}
|
||||
.cm-header, .cm-strong {font-weight: bold;}
|
||||
.cm-em {font-style: italic;}
|
||||
.cm-emstrong {font-style: italic; font-weight: bold;}
|
||||
.cm-link {text-decoration: underline;}
|
||||
|
||||
.cm-invalidchar {color: #f00;}
|
||||
|
||||
div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
|
||||
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
|
||||
|
||||
/* STOP */
|
||||
|
||||
/* The rest of this file contains styles related to the mechanics of
|
||||
the editor. You probably shouldn't touch them. */
|
||||
|
||||
.CodeMirror {
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
/* 30px is the magic margin used to hide the element's real scrollbars */
|
||||
/* See overflow: hidden in .CodeMirror, and the paddings in .CodeMirror-sizer */
|
||||
margin-bottom: -30px; margin-right: -30px;
|
||||
padding-bottom: 30px; padding-right: 30px;
|
||||
height: 100%;
|
||||
outline: none; /* Prevent dragging from highlighting the element */
|
||||
position: relative;
|
||||
}
|
||||
.CodeMirror-sizer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* The fake, visible scrollbars. Used to force redraw during scrolling
|
||||
before actuall scrolling happens, thus preventing shaking and
|
||||
flickering artifacts. */
|
||||
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
display: none;
|
||||
}
|
||||
.CodeMirror-vscrollbar {
|
||||
right: 0; top: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.CodeMirror-hscrollbar {
|
||||
bottom: 0; left: 0;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.CodeMirror-scrollbar-filler {
|
||||
right: 0; bottom: 0;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.CodeMirror-gutters {
|
||||
position: absolute; left: 0; top: 0;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
.CodeMirror-gutter {
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
/* Hack to make IE7 behave */
|
||||
*zoom:1;
|
||||
*display:inline;
|
||||
}
|
||||
.CodeMirror-gutter-elt {
|
||||
position: absolute;
|
||||
cursor: default;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.CodeMirror-lines {
|
||||
cursor: text;
|
||||
}
|
||||
.CodeMirror pre {
|
||||
/* Reset some styles that the rest of the page might have set */
|
||||
-moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; border-radius: 0;
|
||||
border-width: 0;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
.CodeMirror-wrap pre {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
word-break: normal;
|
||||
}
|
||||
.CodeMirror-linebackground {
|
||||
position: absolute;
|
||||
left: 0; right: 0; top: 0; bottom: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.CodeMirror-linewidget {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.CodeMirror-wrap .CodeMirror-scroll {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.CodeMirror-measure {
|
||||
position: absolute;
|
||||
width: 100%; height: 0px;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
.CodeMirror-measure pre { position: static; }
|
||||
|
||||
.CodeMirror div.CodeMirror-cursor {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
border-right: none;
|
||||
width: 0;
|
||||
}
|
||||
.CodeMirror-focused div.CodeMirror-cursor {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.CodeMirror-selected { background: #d9d9d9; }
|
||||
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
|
||||
|
||||
.cm-searching {
|
||||
background: #ffa;
|
||||
background: rgba(255, 255, 0, .4);
|
||||
}
|
||||
|
||||
/* IE7 hack to prevent it from returning funny offsetTops on the spans */
|
||||
.CodeMirror span { *vertical-align: text-bottom; }
|
||||
|
||||
@media print {
|
||||
/* Hide the cursor when printing */
|
||||
.CodeMirror div.CodeMirror-cursor {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
Executable
+165
@@ -0,0 +1,165 @@
|
||||
/*****************************************************************************/
|
||||
/*
|
||||
/* Common
|
||||
/*
|
||||
/*****************************************************************************/
|
||||
|
||||
/* Global Reset */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body { height: 100%; }
|
||||
|
||||
body {
|
||||
background-color: #FFF;
|
||||
font: 13.34px Helvetica, Arial, sans-serif;
|
||||
font-size: small;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: 100%; }
|
||||
|
||||
h1 { margin-bottom: 1em; }
|
||||
p { margin: 1em 0; }
|
||||
|
||||
a { color: #00a; }
|
||||
a:hover { color: #000; }
|
||||
a:visited { color: #a0a; }
|
||||
|
||||
table {
|
||||
font-size: inherit;
|
||||
font: 100%;
|
||||
}
|
||||
|
||||
/*****************************************************************************/
|
||||
/*
|
||||
/* Home
|
||||
/*
|
||||
/*****************************************************************************/
|
||||
ul.posts {
|
||||
list-style-type: none;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
ul.posts li {
|
||||
line-height: 1.75em;
|
||||
}
|
||||
|
||||
ul.posts span {
|
||||
color: #aaa;
|
||||
font-family: Monaco, "Courier New", monospace;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/*****************************************************************************/
|
||||
/*
|
||||
/* Site
|
||||
/*
|
||||
/*****************************************************************************/
|
||||
|
||||
.site {
|
||||
font-size: 115%;
|
||||
text-align: justify;
|
||||
width: 42em;
|
||||
margin: 3em auto 2em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.site .header a {
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site .header h1.title {
|
||||
display: inline-block;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.site .header h1.title a {
|
||||
color: #a00;
|
||||
}
|
||||
|
||||
.site .header h1.title a:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.site .header a.extra {
|
||||
color: #aaa;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.site .header a.extra:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.site .meta {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.site .footer {
|
||||
font-size: 80%;
|
||||
color: #666;
|
||||
border-top: 4px solid #eee;
|
||||
margin-top: 2em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.site .footer .contact {
|
||||
float: left;
|
||||
margin-right: 3em;
|
||||
}
|
||||
|
||||
.site .footer .contact a {
|
||||
color: #8085C1;
|
||||
}
|
||||
|
||||
.site .footer .rss {
|
||||
margin-top: 1.1em;
|
||||
margin-right: -.2em;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.site .footer .rss img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*****************************************************************************/
|
||||
/*
|
||||
/* Posts
|
||||
/*
|
||||
/*****************************************************************************/
|
||||
|
||||
/* standard */
|
||||
#post pre {
|
||||
border: 1px solid #ddd;
|
||||
background-color: #eef;
|
||||
padding: 0 .4em;
|
||||
}
|
||||
|
||||
#post ul, #post ol {
|
||||
margin-left: 1.35em;
|
||||
}
|
||||
|
||||
#post code {
|
||||
border: 1px solid #ddd;
|
||||
background-color: #eef;
|
||||
padding: 0 .2em;
|
||||
}
|
||||
|
||||
#post pre code {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* terminal */
|
||||
#post pre.terminal {
|
||||
border: 1px solid #000;
|
||||
background-color: #333;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
#post pre.terminal code {
|
||||
background-color: #333;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
+409
@@ -0,0 +1,409 @@
|
||||
.highlight pre code {
|
||||
color: #637c84;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #333333;
|
||||
background: #f8f5ec;
|
||||
}
|
||||
|
||||
.highlight .c {
|
||||
color: #93a1a1;
|
||||
}
|
||||
|
||||
|
||||
.highlight .g {
|
||||
color: #637c84;
|
||||
}
|
||||
|
||||
/* Generic */
|
||||
|
||||
.highlight .k {
|
||||
color: #859900;
|
||||
}
|
||||
|
||||
/* Keyword */
|
||||
|
||||
.highlight .l {
|
||||
color: #637c84;
|
||||
}
|
||||
|
||||
/* Literal */
|
||||
|
||||
.highlight .n {
|
||||
color: #637c84;
|
||||
}
|
||||
|
||||
/* Name */
|
||||
|
||||
.highlight .o {
|
||||
color: #859900;
|
||||
}
|
||||
|
||||
/* Operator */
|
||||
|
||||
.highlight .x {
|
||||
color: #cc7a6f;
|
||||
}
|
||||
|
||||
/* Other */
|
||||
|
||||
.highlight .p {
|
||||
color: #637c84;
|
||||
}
|
||||
|
||||
/* Punctuation */
|
||||
|
||||
.highlight .cm {
|
||||
color: #93a1a1;
|
||||
}
|
||||
|
||||
/* Comment.Multiline */
|
||||
|
||||
.highlight .cp {
|
||||
color: #859900;
|
||||
}
|
||||
|
||||
/* Comment.Preproc */
|
||||
|
||||
.highlight .c1 {
|
||||
color: #93a1a1;
|
||||
}
|
||||
|
||||
/* Comment.Single */
|
||||
|
||||
.highlight .cs {
|
||||
color: #859900;
|
||||
}
|
||||
|
||||
/* Comment.Special */
|
||||
|
||||
.highlight .gd {
|
||||
color: #36958e;
|
||||
}
|
||||
|
||||
/* Generic.Deleted */
|
||||
|
||||
.highlight .ge {
|
||||
font-style: italic;
|
||||
color: #637c84;
|
||||
}
|
||||
|
||||
/* Generic.Emph */
|
||||
|
||||
.highlight .gr {
|
||||
color: #dc322f;
|
||||
}
|
||||
|
||||
/* Generic.Error */
|
||||
|
||||
.highlight .gh {
|
||||
color: #cc7a6f;
|
||||
}
|
||||
|
||||
/* Generic.Heading */
|
||||
|
||||
.highlight .gi {
|
||||
color: #859900;
|
||||
}
|
||||
|
||||
/* Generic.Inserted */
|
||||
|
||||
.highlight .go {
|
||||
color: #637c84;
|
||||
}
|
||||
|
||||
/* Generic.Output */
|
||||
|
||||
.highlight .gp {
|
||||
color: #637c84;
|
||||
}
|
||||
|
||||
/* Generic.Prompt */
|
||||
|
||||
.highlight .gs {
|
||||
font-weight: bold;
|
||||
color: #637c84;
|
||||
}
|
||||
|
||||
/* Generic.Strong */
|
||||
|
||||
.highlight .gu {
|
||||
color: #cc7a6f;
|
||||
}
|
||||
|
||||
/* Generic.Subheading */
|
||||
|
||||
.highlight .gt {
|
||||
color: #637c84;
|
||||
}
|
||||
|
||||
/* Generic.Traceback */
|
||||
|
||||
.highlight .kc {
|
||||
color: #cc7a6f;
|
||||
}
|
||||
|
||||
/* Keyword.Constant */
|
||||
|
||||
.highlight .kd {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
/* Keyword.Declaration */
|
||||
|
||||
.highlight .kn {
|
||||
color: #859900;
|
||||
}
|
||||
|
||||
/* Keyword.Namespace */
|
||||
|
||||
.highlight .kp {
|
||||
color: #859900;
|
||||
}
|
||||
|
||||
/* Keyword.Pseudo */
|
||||
|
||||
.highlight .kr {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
/* Keyword.Reserved */
|
||||
|
||||
.highlight .kt {
|
||||
color: #dc322f;
|
||||
}
|
||||
|
||||
/* Keyword.Type */
|
||||
|
||||
.highlight .ld {
|
||||
color: #637c84;
|
||||
}
|
||||
|
||||
/* Literal.Date */
|
||||
|
||||
.highlight .m {
|
||||
color: #36958e;
|
||||
}
|
||||
|
||||
/* Literal.Number */
|
||||
|
||||
.highlight .s {
|
||||
color: #36958e;
|
||||
}
|
||||
|
||||
/* Literal.String */
|
||||
|
||||
.highlight .na {
|
||||
color: #637c84;
|
||||
}
|
||||
|
||||
/* Name.Attribute */
|
||||
|
||||
.highlight .nb {
|
||||
color: #b58900;
|
||||
}
|
||||
|
||||
/* Name.Builtin */
|
||||
|
||||
.highlight .nc {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
/* Name.Class */
|
||||
|
||||
.highlight .no {
|
||||
color: #cc7a6f;
|
||||
}
|
||||
|
||||
/* Name.Constant */
|
||||
|
||||
.highlight .nd {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
/* Name.Decorator */
|
||||
|
||||
.highlight .ni {
|
||||
color: #cc7a6f;
|
||||
}
|
||||
|
||||
/* Name.Entity */
|
||||
|
||||
.highlight .ne {
|
||||
color: #cc7a6f;
|
||||
}
|
||||
|
||||
/* Name.Exception */
|
||||
|
||||
.highlight .nf {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
/* Name.Function */
|
||||
|
||||
.highlight .nl {
|
||||
color: #637c84;
|
||||
}
|
||||
|
||||
/* Name.Label */
|
||||
|
||||
.highlight .nn {
|
||||
color: #637c84;
|
||||
}
|
||||
|
||||
/* Name.Namespace */
|
||||
|
||||
.highlight .nx {
|
||||
color: #637c84;
|
||||
}
|
||||
|
||||
/* Name.Other */
|
||||
|
||||
.highlight .py {
|
||||
color: #637c84;
|
||||
}
|
||||
|
||||
/* Name.Property */
|
||||
|
||||
.highlight .nt {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
/* Name.Tag */
|
||||
|
||||
.highlight .nv {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
/* Name.Variable */
|
||||
|
||||
.highlight .ow {
|
||||
color: #859900;
|
||||
}
|
||||
|
||||
/* Operator.Word */
|
||||
|
||||
.highlight .w {
|
||||
color: #637c84;
|
||||
}
|
||||
|
||||
/* Text.Whitespace */
|
||||
|
||||
.highlight .mf {
|
||||
color: #36958e;
|
||||
}
|
||||
|
||||
/* Literal.Number.Float */
|
||||
|
||||
.highlight .mh {
|
||||
color: #36958e;
|
||||
}
|
||||
|
||||
/* Literal.Number.Hex */
|
||||
|
||||
.highlight .mi {
|
||||
color: #36958e;
|
||||
}
|
||||
|
||||
/* Literal.Number.Integer */
|
||||
|
||||
.highlight .mo {
|
||||
color: #36958e;
|
||||
}
|
||||
|
||||
/* Literal.Number.Oct */
|
||||
|
||||
.highlight .sb {
|
||||
color: #93a1a1;
|
||||
}
|
||||
|
||||
/* Literal.String.Backtick */
|
||||
|
||||
.highlight .sc {
|
||||
color: #36958e;
|
||||
}
|
||||
|
||||
/* Literal.String.Char */
|
||||
|
||||
.highlight .sd {
|
||||
color: #637c84;
|
||||
}
|
||||
|
||||
/* Literal.String.Doc */
|
||||
|
||||
.highlight .s2 {
|
||||
color: #36958e;
|
||||
}
|
||||
|
||||
/* Literal.String.Double */
|
||||
|
||||
.highlight .se {
|
||||
color: #cc7a6f;
|
||||
}
|
||||
|
||||
/* Literal.String.Escape */
|
||||
|
||||
.highlight .sh {
|
||||
color: #637c84;
|
||||
}
|
||||
|
||||
/* Literal.String.Heredoc */
|
||||
|
||||
.highlight .si {
|
||||
color: #36958e;
|
||||
}
|
||||
|
||||
/* Literal.String.Interpol */
|
||||
|
||||
.highlight .sx {
|
||||
color: #36958e;
|
||||
}
|
||||
|
||||
/* Literal.String.Other */
|
||||
|
||||
.highlight .sr {
|
||||
color: #dc322f;
|
||||
}
|
||||
|
||||
/* Literal.String.Regex */
|
||||
|
||||
.highlight .s1 {
|
||||
color: #36958e;
|
||||
}
|
||||
|
||||
/* Literal.String.Single */
|
||||
|
||||
.highlight .ss {
|
||||
color: #36958e;
|
||||
}
|
||||
|
||||
/* Literal.String.Symbol */
|
||||
|
||||
.highlight .bp {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
/* Name.Builtin.Pseudo */
|
||||
|
||||
.highlight .vc {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
/* Name.Variable.Class */
|
||||
|
||||
.highlight .vg {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
/* Name.Variable.Global */
|
||||
|
||||
.highlight .vi {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
/* Name.Variable.Instance */
|
||||
|
||||
.highlight .il {
|
||||
color: #36958e;
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Advanced Components</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Advanced Components" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/advanced-components.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" alt="" src="/react/img/logo_small.png">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/getting-started.html">Getting Started</a></li>
|
||||
<li><a href="/react/docs/tutorial.html">Tutorial</a></li>
|
||||
<li><a href="/react/docs/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html" class="active">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Advanced Components</h1>
|
||||
<div class="subHeader">How to build advanced composite components.</div>
|
||||
<p>Composite components extend a <code>ReactCompositeComponent</code> base class that provides
|
||||
a very powerful API that makes React flexible and able to easily work with other
|
||||
libraries and frameworks.</p>
|
||||
|
||||
<h2>Lifecycle Methods</h2>
|
||||
|
||||
<p>Composite components can optionally implement lifecycle methods that are invoked
|
||||
at various stages in the <a href="component-lifecycle.html">component lifecycle</a> that
|
||||
each have unique guarantees.</p>
|
||||
|
||||
<h3>Mounting</h3>
|
||||
|
||||
<ul>
|
||||
<li><code>getInitialState(): object</code> is invoked before a component is mounted.
|
||||
Stateful components should implement this and return the initial state data.</li>
|
||||
<li><code>componentWillMount()</code> is invoked immediately before mounting occurs.</li>
|
||||
<li><code>componentDidMount(DOMElement rootNode)</code> is invoked immediately after
|
||||
mounting occurs. Initialization that requires DOM nodes should go here.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Updating</h3>
|
||||
|
||||
<ul>
|
||||
<li><code>componentWillReceiveProps(object nextProps)</code> is invoked when a mounted
|
||||
component receives new props. This method should be used to compare
|
||||
<code>this.props</code> and <code>nextProps</code> to perform state transitions using
|
||||
<code>this.setState()</code>.</li>
|
||||
<li><code>shouldComponentUpdate(object nextProps, object nextState): boolean</code> is
|
||||
invoked when a component decides whether any changes warrant an update to the
|
||||
DOM. Implement this as an optimization to compare <code>this.props</code> with
|
||||
<code>nextProps</code> and <code>this.state</code> with <code>nextState</code> and return false if React
|
||||
should skip updating.</li>
|
||||
<li><code>componentWillUpdate(object nextProps, object nextState)</code> is invoked
|
||||
immediately before updating occurs. You cannot call <code>this.setState()</code> here.</li>
|
||||
<li><code>componentDidUpdate(object prevProps, object prevState, DOMElement rootNode)</code>
|
||||
is invoked immediately after updating occurs.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Unmounting</h3>
|
||||
|
||||
<ul>
|
||||
<li><code>componentWillUnmount()</code> is invoked immediately before a component is
|
||||
unmounted and destroyed. Cleanup should go here.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Mounted Methods</h2>
|
||||
|
||||
<p><em>Mounted</em> composite components also support the following methods:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>getDOMNode(): DOMElement</code> can be invoked on any mounted component in order
|
||||
to obtain a reference to its rendered DOM node.</li>
|
||||
<li><code>forceUpdate()</code> can be invoked on any mounted component when you know that
|
||||
some deeper aspect of the component's state has changed without using
|
||||
<code>this.setState()</code>.</li>
|
||||
</ul>
|
||||
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>The <code>DOMElement rootNode</code> argument of <code>componentDidMount()</code> and
|
||||
<code>componentDidUpdate()</code> is a convenience. The same node can be obtained by
|
||||
calling <code>this.getDOMNode()</code>.</p>
|
||||
</blockquote>
|
||||
|
||||
<h2>Component Refs</h2>
|
||||
|
||||
<p>A common use case of event callbacks or the lifecycle methods is to operate on a
|
||||
component returned by <code>render()</code>. For example, consider a search component that
|
||||
should auto-focus the input once mounted:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">SearchForm</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">form</span> <span class="nx">action</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">action</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"search"</span> <span class="nx">placeholder</span><span class="o">=</span><span class="s2">"Search..."</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/form></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">rootNode</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">searchInput</span> <span class="o">=</span> <span class="nx">rootNode</span><span class="p">.</span><span class="nx">firstChild</span><span class="p">;</span>
|
||||
<span class="nx">searchInput</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Although this implementation works, it is fragile because <code>componentDidMount()</code>
|
||||
now relies on <code>render()</code> returning a particular DOM structure.</p>
|
||||
|
||||
<p>React provides a better way for composite components to reference components
|
||||
that it constructs in its <code>render()</code> method through the use of refs. A component
|
||||
can assign a <code>ref</code> to any component it constructs. This will create a reference
|
||||
to those components on <code>this.refs</code>. For example:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">SearchForm</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">form</span> <span class="nx">action</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">action</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"search"</span> <span class="nx">placeholder</span><span class="o">=</span><span class="s2">"Search..."</span> <span class="nx">ref</span><span class="o">=</span><span class="s2">"searchInput"</span> <span class="o">/></span>
|
||||
</span> <span class="o"><</span><span class="err">/form></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">rootNode</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="kd">var</span> <span class="nx">searchInput</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">searchInput</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">();</span>
|
||||
</span> <span class="nx">searchInput</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>In this example, <code>this.refs.searchInput</code> will reference the <code><input></code> component
|
||||
and is available in most lifecycle methods and event callbacks. We obtain a
|
||||
reference to the <code><input></code>'s DOM node using <code>getDOMNode()</code>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>If you want to preserve compatibility with Google Closure Compiler's
|
||||
property crushing in <code>ADVANCED_OPTIMIZATIONS</code> mode, make sure to use string
|
||||
literals with <code>this.refs</code>.</p>
|
||||
</blockquote>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/event-handling.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/api.html">Next →</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+202
@@ -0,0 +1,202 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | React API</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | React API" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/api.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" alt="" src="/react/img/logo_small.png">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/getting-started.html">Getting Started</a></li>
|
||||
<li><a href="/react/docs/tutorial.html">Tutorial</a></li>
|
||||
<li><a href="/react/docs/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/api.html" class="active">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>React API</h1>
|
||||
<div class="subHeader"></div>
|
||||
<h2>React</h2>
|
||||
|
||||
<p><code>React</code> is the entry point to the React framework. If you're using one of the prebuilt packages it's available as a global; if you're using CommonJS modules you can <code>require()</code> it.</p>
|
||||
|
||||
<h3>DOM</h3>
|
||||
|
||||
<p><code>React.DOM</code> provides all of the standard HTML tags needed to build a React app. You generally don't use it directly; instead, just include it as part of the <code>/** @jsx React.DOM */</code> docblock.</p>
|
||||
|
||||
<h3>initializeTouchEvents(boolean shouldUseTouch)</h3>
|
||||
|
||||
<p>Configure React's event system to handle touch events on mobile devices.</p>
|
||||
|
||||
<h3>function autoBind(function method)</h3>
|
||||
|
||||
<p>Marks the provided function to be automatically bound to each React component instance created. This allows React components to define automatically bound methods and ensure that when called they will always reference their current instance.</p>
|
||||
|
||||
<p>Example:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">click</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">evt</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">jumping</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||||
<span class="p">}),</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// Look: no bind!</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">a</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">click</span><span class="p">}</span><span class="o">></span><span class="nx">Jump</span><span class="o"><</span><span class="err">/a>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<h3>function createClass(object specification)</h3>
|
||||
|
||||
<p>Creates a component given a specification. A component implements a <code>render</code> method which returns a single child. That child may have an arbitrarily deep child structure. One thing that makes components different than a standard prototypal classes is that you don't need to call new on them. They are convenience wrappers that construct backing instances (via new) for you.</p>
|
||||
|
||||
<h3>ReactComponent renderComponent(ReactComponent container, DOMElement mountPoint)</h3>
|
||||
|
||||
<p>Renders a React component into the DOM in the supplied <code>container</code>.</p>
|
||||
|
||||
<p>If the React component was previously rendered into <code>container</code>, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React component.</p>
|
||||
|
||||
<h2>AbstractEvent</h2>
|
||||
|
||||
<p>Your event handlers will be passed instances of <code>AbstractEvent</code>, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event (such as <code>stopPropagation()</code> and <code>preventDefault()</code>) except they work exactly the same across all browsers.</p>
|
||||
|
||||
<p>If you find that you need the underlying browser event for some reason, simply use the <code>nativeEvent</code> attribute to get it.</p>
|
||||
|
||||
<h2>ReactComponent</h2>
|
||||
|
||||
<p>Component classses created by <code>createClass()</code> return instances of <code>ReactComponent</code> when called. Most of the time when you're using React you're either creating or consuming <code>ReactComponent</code>s.</p>
|
||||
|
||||
<h3>DOMElement getDOMNode()</h3>
|
||||
|
||||
<p>If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements.</p>
|
||||
|
||||
<h3>setProps(object nextProps)</h3>
|
||||
|
||||
<p>When you're integrating with an external JavaScript application you may want to signal a change to a React component rendered with <code>renderComponent()</code>. Simply call <code>setProps()</code> to change its properties and trigger a re-render.</p>
|
||||
|
||||
<p><strong>Note:</strong> This method can only be called on a root-level component. That is, it's only available on the component passed directly to <code>renderComponent()</code> and none of its children. If you're inclined to use <code>setProps()</code> on a child component, instead take advantage of reactive updates and pass the new prop to the child component when it's created in <code>render()</code>.</p>
|
||||
|
||||
<h3>replaceProps(object nextProps)</h3>
|
||||
|
||||
<p>Like <code>setProps()</code> but deletes any pre-existing props that are not in nextProps.</p>
|
||||
|
||||
<h3>ReactComponent transferPropsTo(ReactComponent targetComponent)</h3>
|
||||
|
||||
<p>Transfer properties from this component to a target component that have not already been set on the target component. This is usually used to pass down properties to the returned root component. <code>targetComponent</code>, now updated with some new props is returned as a convenience.</p>
|
||||
|
||||
<h3>setState(object nextState)</h3>
|
||||
|
||||
<p>Merges nextState with the current state. This is the primary method you use to trigger UI updates from event handlers and server request callbacks.</p>
|
||||
|
||||
<p><strong>Note:</strong> <em>NEVER</em> mutate <code>this.state</code> directly. As calling <code>setState()</code> afterwards may replace the mutation you made. Treat <code>this.state</code> as if it were immutable.</p>
|
||||
|
||||
<p><strong>Note:</strong> <code>setState()</code> does not immediately mutate <code>this.state</code> but creates a pending state transition. Accessing <code>this.state</code> after calling this method can potentially return the existing value.</p>
|
||||
|
||||
<h3>replaceState(object nextState)</h3>
|
||||
|
||||
<p>Like <code>setState()</code> but deletes any pre-existing state keys that are not in nextState.</p>
|
||||
|
||||
<h3>forceUpdate()</h3>
|
||||
|
||||
<p>If your <code>render()</code> method reads from something other than <code>this.props</code> or <code>this.state</code> you'll need to tell React when it needs to re-run <code>render()</code>. Use <code>forceUpdate()</code> to cause React to automatically re-render. This will cause <code>render()</code> to be called on the component and all of its children but React will only update the DOM if the markup changes.</p>
|
||||
|
||||
<p>Normally you should try to avoid all uses of <code>forceUpdate()</code> and only read from <code>this.props</code> and <code>this.state</code> in <code>render()</code>. This makes your application much simpler and more efficient.</p>
|
||||
|
||||
<h3>object getInitialState()</h3>
|
||||
|
||||
<h3>componentWillMount()</h3>
|
||||
|
||||
<h3>componentDidMount(DOMElement domNode)</h3>
|
||||
|
||||
<h3>componentWillReceiveProps(object nextProps)</h3>
|
||||
|
||||
<h3>boolean shouldComponentUpdate(object nextProps, object nextState)</h3>
|
||||
|
||||
<h3>componentWillUpdate(object nextProps, object nextState)</h3>
|
||||
|
||||
<h3>ReactComponent render()</h3>
|
||||
|
||||
<h3>componentDidUpdate(object prevProps, object prevState, DOMElement domNode)</h3>
|
||||
|
||||
<h3>componentWillUnmount()</h3>
|
||||
|
||||
<p>These are overridable lifecycle methods; see the <a href="lifecycle.html">lifecycle methods</a> documentation for more information.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/advanced-components.html">← Prev</a>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Common Questions</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Common Questions" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/common-questions.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" alt="" src="/react/img/logo_small.png">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/getting-started.html">Getting Started</a></li>
|
||||
<li><a href="/react/docs/tutorial.html">Tutorial</a></li>
|
||||
<li><a href="/react/docs/common-questions.html" class="active">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Common Questions</h1>
|
||||
<div class="subHeader"></div>
|
||||
<h3>What browsers does React support?</h3>
|
||||
|
||||
<p>React supports the latest two Chrome, Firefox, Safari, and Internet Explorer versions. React can work with Internet Explorer 8 with polyfills.</p>
|
||||
|
||||
<h3>How do I get React to support Internet Explorer 8?</h3>
|
||||
|
||||
<p>React requires ES5 JavaScript shims to run in Internet Explorer 8. Include the <a href="https://github.com/kriskowal/es5-shim">ES5 Shims</a> to implement these shims.</p>
|
||||
|
||||
<h3>Who uses React?</h3>
|
||||
|
||||
<p>The <a href="http://instagram.com/">Instagram</a> website is built entirely in React. The <a href="https://www.facebook.com/">Facebook</a> website is also increasingly using React, including the common commenting plugin across the site.</p>
|
||||
|
||||
<h3>Can I integrate with other JavaScript libraries?</h3>
|
||||
|
||||
<p>Absolutely! In fact, we encourage it! See <a href="http://github.com/facebook/react/">our GitHub repo</a> for a <a href="https://github.com/facebook/react/tree/master/examples/todomvc-backbone">TodoMVC example using Backbone</a> and a <a href="https://github.com/facebook/react/tree/master/examples/jquery-bootstrap">jQuery + Bootstrap modal demo</a>.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/tutorial.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/syntax.html">Next →</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Component Basics</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Component Basics" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/component-basics.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" alt="" src="/react/img/logo_small.png">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/getting-started.html">Getting Started</a></li>
|
||||
<li><a href="/react/docs/tutorial.html">Tutorial</a></li>
|
||||
<li><a href="/react/docs/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html" class="active">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Component Basics</h1>
|
||||
<div class="subHeader">What are components?</div>
|
||||
<p><em>Components</em> are the basic units of composition in React. Components encapsulate
|
||||
the logic necessary to take input parameters and render markup. Components can
|
||||
be rendered into an existing DOM element on the page by using
|
||||
<code>React.renderComponent</code>:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// Replaces everything in `document.body` with <div>Hello, world!</div>;</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!<</span><span class="err">/div>, document.body);</span>
|
||||
</code></pre></div>
|
||||
<p>Keep in mind that <code><div></code> is <strong>not</strong> a DOM element! Keep reading...</p>
|
||||
|
||||
<h2>Types of Components</h2>
|
||||
|
||||
<p>There are two types of components:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Composite Components</strong></li>
|
||||
<li><strong>DOM Components</strong></li>
|
||||
</ul>
|
||||
|
||||
<h3>Composite Components <small>such as <code>TodoApp</code> and <code>Typeahead</code>.</small></h3>
|
||||
|
||||
<p>The majority of your React code will be implementing composite components.</p>
|
||||
|
||||
<p>Composite components are higher-level components with custom rendering logic
|
||||
that may compose other composite components or DOM components.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
|
||||
<span class="kd">var</span> <span class="nx">LinkButton</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">a</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"btn"</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">myButton</span> <span class="o">=</span> <span class="o"><</span><span class="nx">LinkButton</span> <span class="o">/></span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>This example defines a <code>LinkButton</code> component class using <code>React.createClass()</code>,
|
||||
and its <code>render()</code> method composes the <code><a></code> DOM component.</p>
|
||||
|
||||
<h3>DOM Components <small>such as <code>div</code> and <code>span</code>.</small></h3>
|
||||
|
||||
<p>DOM components are the set of classes that correspond to browser DOM elements.
|
||||
They are defined in <code>React.DOM</code> and can be brought "into scope" by setting
|
||||
<code>@jsx React.DOM</code> in the docblock. See <a href="syntax.html">JSX Syntax</a> for more
|
||||
details.</p>
|
||||
|
||||
<p>Although <code>React.DOM</code> components look like browser DOM elements, they differ in a
|
||||
few ways:</p>
|
||||
|
||||
<ul>
|
||||
<li>All property names, including event handlers, are camelCased.</li>
|
||||
<li>JavaScript identifiers should be used, namely <code>className</code> and <code>htmlFor</code>.</li>
|
||||
<li>The <code>style</code> prop expects an object instead of a string. The object should map
|
||||
camelCased style properties to values, e.g. <code>{backgroundColor: '#fff'}</code>.</li>
|
||||
</ul>
|
||||
|
||||
<p>Here is an example of a React link styled as a button with a click handler:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
|
||||
<span class="kd">var</span> <span class="nx">handleClick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span><span class="nx">alert</span><span class="p">(</span><span class="s1">'Clicked!'</span><span class="p">);};</span>
|
||||
<span class="kd">var</span> <span class="nx">inlineStyle</span> <span class="o">=</span> <span class="p">{</span><span class="nx">textDecoration</span><span class="o">:</span> <span class="s1">'none'</span><span class="p">};</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">myLink</span> <span class="o">=</span> <span class="o"><</span><span class="nx">a</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"btn"</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">handleClick</span><span class="p">}</span> <span class="nx">style</span><span class="o">=</span><span class="p">{</span><span class="nx">inlineStyle</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/syntax.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/component-data.html">Next →</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,231 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Component Data</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Component Data" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/component-data.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" alt="" src="/react/img/logo_small.png">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/getting-started.html">Getting Started</a></li>
|
||||
<li><a href="/react/docs/tutorial.html">Tutorial</a></li>
|
||||
<li><a href="/react/docs/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html" class="active">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Component Data</h1>
|
||||
<div class="subHeader">How is data passed into a component?</div>
|
||||
<h2>Props</h2>
|
||||
|
||||
<p>Components use data to determine what should be rendered. For example:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">LikeLink</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">text</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">liked</span> <span class="o">?</span> <span class="s1">'Liked'</span> <span class="o">:</span> <span class="s1">'Like'</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">a</span><span class="o">></span><span class="p">{</span><span class="nx">text</span><span class="p">}</span><span class="o"><</span><span class="err">/a>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">myLikeLink</span> <span class="o">=</span> <span class="o"><</span><span class="nx">LikeLink</span> <span class="nx">liked</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>In this example, <code>LikeLink</code> takes <code>liked</code> as boolean data. This type of data
|
||||
that is passed in is called a "prop". Examples of props on DOM components
|
||||
include <code>className</code> and <code>onClick</code>.</p>
|
||||
|
||||
<p>Whenever a component's props change, its <code>render()</code> function will be
|
||||
re-evaluated and the DOM will be updated. React will ensure that the DOM is
|
||||
always kept up-to-date.</p>
|
||||
|
||||
<h2>State</h2>
|
||||
|
||||
<p>Let's build a small <code>LikeApp</code> application that makes use of the <code><LikeLink></code>
|
||||
component from above. It should start off unliked and we should be able to like
|
||||
it by clicking the link:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">LikeApp</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">isClicked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">LikeLink</span> <span class="nx">liked</span><span class="o">=</span><span class="p">{</span><span class="nx">isClicked</span><span class="p">}</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// Somehow update `isClicked`.</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>This renders a <code><LikeLink></code> with a click listener. However, it is not clear how
|
||||
<code>handleClick</code> should update <code>isClicked</code> to true. <code>LikeApp</code> needs a way to store
|
||||
<strong>state</strong> about whether or not it has been clicked.</p>
|
||||
|
||||
<h3>State vs. Props</h3>
|
||||
|
||||
<p>State is data that is managed <em>internally</em> by a composite component. Like props,
|
||||
the <code>render()</code> function will be re-evaluated whenever state changes. Props and
|
||||
state differ in that:</p>
|
||||
|
||||
<ul>
|
||||
<li>Props are passed in from the creator.</li>
|
||||
<li>State is private to and managed by the component.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Managing State</h3>
|
||||
|
||||
<p>Let's update our <code>LikeApp</code> component using state:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">LikeApp</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="hll"> <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="k">return</span> <span class="p">{</span><span class="nx">isClicked</span><span class="o">:</span> <span class="kc">false</span><span class="p">};</span>
|
||||
</span><span class="hll"> <span class="p">},</span>
|
||||
</span> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="kd">var</span> <span class="nx">isClicked</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">isClicked</span><span class="p">;</span>
|
||||
</span> <span class="k">return</span> <span class="o"><</span><span class="nx">LikeLink</span> <span class="nx">liked</span><span class="o">=</span><span class="p">{</span><span class="nx">isClicked</span><span class="p">}</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">isClicked</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||||
</span> <span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>There's a lot going on here, so let's work our way from top to bottom:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>getInitialState()</code> describes what state data looks like when the component
|
||||
is created.</li>
|
||||
<li>In <code>render()</code>, state data can be accessed via <code>this.state</code>.</li>
|
||||
<li>When the link is clicked, we update state using <code>setState()</code>.</li>
|
||||
</ul>
|
||||
|
||||
<p>Now when we click the link, the <code><LikeLink></code> will get updated, right? Wrong.</p>
|
||||
|
||||
<h2>Transferring Props</h2>
|
||||
|
||||
<p>If you have been following carefully, you may have noticed that although we pass
|
||||
a click handler into <code><LikeLink></code> as a prop, <code>LikeLink</code> does not do anything
|
||||
with <code>this.props.onClick</code>! Let's fix that.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">LikeLink</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">text</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">liked</span> <span class="o">?</span> <span class="s1">'Liked'</span> <span class="o">:</span> <span class="s1">'Like'</span><span class="p">;</span>
|
||||
<span class="hll"> <span class="k">return</span> <span class="o"><</span><span class="nx">a</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">onClick</span><span class="p">}</span><span class="o">></span><span class="p">{</span><span class="nx">text</span><span class="p">}</span><span class="o"><</span><span class="err">/a>;</span>
|
||||
</span> <span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Although this works, realize that this would quickly become tedious if we wanted
|
||||
to also transfer <code>href</code>, <code>title</code>, <code>target</code>, and other events from <code>this</code> to the
|
||||
rendered <code><a></code>. React provides a convenience method, <code>transferPropsTo()</code>, for
|
||||
transferring props:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">LikeLink</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">text</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">liked</span> <span class="o">?</span> <span class="s1">'Liked'</span> <span class="o">:</span> <span class="s1">'Like'</span><span class="p">;</span>
|
||||
<span class="hll"> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">transferPropsTo</span><span class="p">(</span><span class="o"><</span><span class="nx">a</span><span class="o">></span><span class="p">{</span><span class="nx">text</span><span class="p">}</span><span class="o"><</span><span class="err">/a>);</span>
|
||||
</span> <span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>This will transfer all props from <code>this</code> to the specified component (including
|
||||
<code>onClick</code>).</p>
|
||||
|
||||
<h2>Summary</h2>
|
||||
|
||||
<p>Now we are done. <code>LikeApp</code> renders an unliked link which, when clicked, will:</p>
|
||||
|
||||
<ol>
|
||||
<li>Update the internal state of <code>LikeApp</code>.</li>
|
||||
<li>Change the props passed into <code>LikeLink</code>.</li>
|
||||
<li>Change the return value of <code>render()</code>.</li>
|
||||
<li>Trigger an update to the DOM.</li>
|
||||
</ol>
|
||||
|
||||
<p>It's worth noting that React will handle new return values of <code>render()</code> by
|
||||
making the mininal set of mutations necessary to bring the DOM up-to-date. In
|
||||
this case, only the <code>textContent</code> of the rendered link will be mutated.</p>
|
||||
|
||||
<p>In summary:</p>
|
||||
|
||||
<ul>
|
||||
<li>Props are passed in whereas state is managed internally by a component.</li>
|
||||
<li>Never mutate <code>this.props</code> or <code>this.state</code>. You should pass props into other
|
||||
components and mutate state using <code>setState()</code>.</li>
|
||||
<li>State is private. Never read <code>state</code> or call <code>setState()</code> on
|
||||
anything but <code>this</code>.</li>
|
||||
<li>Whenever props or state changes, <code>render()</code> will be re-evaluated and the DOM
|
||||
updated. Also, <code>render()</code> should not depend on anything besides <code>this.props</code>
|
||||
and <code>this.state</code>.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/component-basics.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/component-lifecycle.html">Next →</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Component Lifecycle</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Component Lifecycle" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/component-lifecycle.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" alt="" src="/react/img/logo_small.png">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/getting-started.html">Getting Started</a></li>
|
||||
<li><a href="/react/docs/tutorial.html">Tutorial</a></li>
|
||||
<li><a href="/react/docs/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html" class="active">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Component Lifecycle</h1>
|
||||
<div class="subHeader">What happens when I render a React component?</div>
|
||||
<h2>Mounting</h2>
|
||||
|
||||
<p><a href="component-basics.html">We have previously seen</a> how to render components into
|
||||
existing DOM elements on the page:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!<</span><span class="err">/div>, document.body);</span>
|
||||
</code></pre></div>
|
||||
<p>In this one simple line, we have accomplished the following:</p>
|
||||
|
||||
<ul>
|
||||
<li>A <code><div></code> (defined by <code>React.DOM.div</code>) component is instantiated.</li>
|
||||
<li>The component is <strong>mounted</strong> into <code>document.body</code>.</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Mounting</strong> is the process of initializing a React component by creating its
|
||||
DOM nodes and inserting the them into a supplied container node.</p>
|
||||
|
||||
<p>At this point, the entire page consists of a single <code><div></code> with "Hello,
|
||||
world!".</p>
|
||||
|
||||
<h2>Updating</h2>
|
||||
|
||||
<p>Let's add a second call to <code>React.renderComponent()</code> after three
|
||||
seconds:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!<</span><span class="err">/div>, document.body);</span>
|
||||
<span class="hll"><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="nx">Goodbye</span><span class="p">,</span> <span class="nx">world</span><span class="p">.</span><span class="o"><</span><span class="err">/div>, document.body);</span>
|
||||
</span><span class="hll"><span class="p">},</span> <span class="mi">3000</span><span class="p">);</span>
|
||||
</span></code></pre></div>
|
||||
<p>The second call to <code>React.renderComponent()</code> will trigger the following:</p>
|
||||
|
||||
<ul>
|
||||
<li>The <code><div></code> component will check the new props to see if anything changed.</li>
|
||||
<li>The set of changes are used to <strong>update</strong> the DOM node as necessary.</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Updating</strong> is the process of mutating the rendered DOM nodes and occurs
|
||||
whenever either props or state has changed. This ensures that the rendered DOM
|
||||
is consistent with the data.</p>
|
||||
|
||||
<h2>Unmounting</h2>
|
||||
|
||||
<p>Let's add one final call to <code>React.renderComponent()</code> after another three
|
||||
seconds:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!<</span><span class="err">/div>, document.body);</span>
|
||||
<span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="nx">Goodbye</span><span class="p">,</span> <span class="nx">world</span><span class="p">.</span><span class="o"><</span><span class="err">/div>, document.body);</span>
|
||||
<span class="p">},</span> <span class="mi">3000</span><span class="p">);</span>
|
||||
<span class="hll"><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">img</span> <span class="nx">src</span><span class="o">=</span><span class="s2">"/images/fin.png"</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">);</span>
|
||||
</span><span class="hll"><span class="p">},</span> <span class="mi">6000</span><span class="p">);</span>
|
||||
</span></code></pre></div>
|
||||
<p>The third call to <code>React.renderComponent()</code> will trigger the following:</p>
|
||||
|
||||
<ul>
|
||||
<li>An <code><img></code> (defined by <code>React.DOM.img</code>) component is instantiated.</li>
|
||||
<li>React will compare the <code><div></code> component with the <code><img></code> component.</li>
|
||||
<li>Since the component class is different, the <code><div></code> component will be
|
||||
<strong>unmounted</strong>.</li>
|
||||
<li>The <code><img></code> component will then be mounted into <code>document.body</code>.</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Unmounting</strong> is the process of releasing resources that have been allocated by
|
||||
a component. This allows user interfaces built with React to live long without
|
||||
memory leaks.</p>
|
||||
|
||||
<p>Components can also be unmounted using
|
||||
<code>React.unmountAndReleaseReactRootNode()</code>:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">unmountAndReleaseReactRootNode</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>This will unmount any components mounted immediately within <code>document.body</code>.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/component-data.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/event-handling.html">Next →</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,206 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Event Handling</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Event Handling" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/event-handling.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" alt="" src="/react/img/logo_small.png">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/getting-started.html">Getting Started</a></li>
|
||||
<li><a href="/react/docs/tutorial.html">Tutorial</a></li>
|
||||
<li><a href="/react/docs/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html" class="active">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Event Handling</h1>
|
||||
<div class="subHeader">How do events work with React components?</div>
|
||||
<p>Events in React work the way they do with HTML, except the event names are
|
||||
camelCased.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Clicker</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">span</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">}</span><span class="o">></span><span class="nx">Click</span> <span class="nx">me</span><span class="o">!<</span><span class="err">/span>;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="s1">'You clicked me!'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>When <code><Clicker></code> is clicked, the <code>handleClick()</code> function will get fired. Under
|
||||
the hood, React uses top-level event delegation to achieve high performance.</p>
|
||||
|
||||
<h2>Automatically Binding Callbacks</h2>
|
||||
|
||||
<p>Just like any callback in JavaScript, if you want to refer to the component as
|
||||
<code>this</code> from the callback, you need to bind the callback to the component:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Clicker</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="kd">var</span> <span class="nx">handleClick</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
</span> <span class="k">return</span> <span class="o"><</span><span class="nx">span</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">handleClick</span><span class="p">}</span><span class="o">></span><span class="nx">Click</span> <span class="nx">me</span><span class="o">!<</span><span class="err">/span>;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ALERT_MESSAGE</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">ALERT_MESSAGE</span><span class="o">:</span> <span class="s1">'You clicked me!'</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>React provides a convenient and <em>efficient</em> way to bind methods using
|
||||
<code>React.autoBind()</code>:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Clicker</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="k">return</span> <span class="o"><</span><span class="nx">span</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">}</span><span class="o">></span><span class="nx">Click</span> <span class="nx">me</span><span class="o">!<</span><span class="err">/span>;</span>
|
||||
</span> <span class="p">},</span>
|
||||
<span class="hll"> <span class="nx">handleClick</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ALERT_MESSAGE</span><span class="p">);</span>
|
||||
</span><span class="hll"> <span class="p">}),</span>
|
||||
</span> <span class="nx">ALERT_MESSAGE</span><span class="o">:</span> <span class="s1">'You clicked me!'</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>Binding a function allocates memory to create a new bound function. Since
|
||||
<code>render()</code> may be invoked many times, it is a bad place to bind functions.
|
||||
<code>React.autoBind()</code> sidesteps this issue by only binding once at instantiation
|
||||
time.</p>
|
||||
</blockquote>
|
||||
|
||||
<h2>DOM Events</h2>
|
||||
|
||||
<p>React uses <a href="http://davidwalsh.name/event-delegate">top-level event delegation</a>
|
||||
to achieve high performance when implementing DOM events. For each type of DOM
|
||||
event, React adds a single top-level listener and determines which event
|
||||
handlers to execute by simulating event capturing and bubbling.</p>
|
||||
|
||||
<p>DOM event handlers are called with a normalized <code>AbstractEvent</code> object that has
|
||||
cross-browser compatible implementations of <code>stopPropagation</code> and
|
||||
<code>preventDefault()</code>. If you need access to the raw browser event, you can use the
|
||||
<code>nativeEvent</code> property.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>The <code>AbstractEvent</code> object is JSON serializable so that React applications can
|
||||
be executed inside web workers.</p>
|
||||
</blockquote>
|
||||
|
||||
<h3>Touch Events</h3>
|
||||
|
||||
<p>If you want to use touch events, you must configure React's event system to
|
||||
initialize them:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// Invoke before calling `React.renderComponent()`.</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">initializeTouchEvents</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h2>Custom Events</h2>
|
||||
|
||||
<p>Notice that event listeners are attached by simply passing them into components
|
||||
as props. For DOM components, events are handled using top-level event
|
||||
delegation. For composite components, event handling is up to the component's
|
||||
implementation.</p>
|
||||
|
||||
<p>Here is an example of a toggle link that fires a custom <code>onToggle</code> event:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">ToggleLink</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">isEnabled</span><span class="o">:</span> <span class="kc">false</span><span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">a</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">}</span><span class="o">></span><span class="nx">Toggle</span><span class="o"><</span><span class="err">/a>;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleClick</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">willEnable</span> <span class="o">=</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">isEnabled</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">onToggle</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">onToggle</span><span class="p">(</span><span class="nx">willEnable</span><span class="p">)</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">isEnabled</span><span class="o">:</span> <span class="nx">willEnable</span><span class="p">});</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">handleToggle</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">enabled</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="nx">enabled</span> <span class="o">?</span> <span class="s1">'Enabled.'</span> <span class="o">:</span> <span class="s1">'Disabled.'</span><span class="p">);</span>
|
||||
<span class="p">};</span>
|
||||
<span class="kd">var</span> <span class="nx">myToggleLink</span> <span class="o">=</span> <span class="o"><</span><span class="nx">ToggleLink</span> <span class="nx">onToggle</span><span class="o">=</span><span class="p">{</span><span class="nx">handleToggle</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/component-lifecycle.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/advanced-components.html">Next →</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,179 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Getting Started</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Getting Started" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/getting-started.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" alt="" src="/react/img/logo_small.png">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/getting-started.html" class="active">Getting Started</a></li>
|
||||
<li><a href="/react/docs/tutorial.html">Tutorial</a></li>
|
||||
<li><a href="/react/docs/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Getting Started</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p>Download the starter kit to get started.</p>
|
||||
|
||||
<div class="buttons-unit downloads">
|
||||
<a href="/react/downloads/react-0.3.0.zip" class="button">
|
||||
Download Starter Kit 0.3.0
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2>Hello, world!</h2>
|
||||
|
||||
<p>In the root directory of the starter kit, create a <code>helloworld.html</code> with the following contents.</p>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"build/react.min.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"build/JSXTransformer.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"></head></span>
|
||||
<span class="nt"><body></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"example"</span><span class="nt">></div></span>
|
||||
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/jsx"</span><span class="nt">></span>
|
||||
<span class="cm">/** @jsx React.DOM */</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!<</span><span class="err">/h1>,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
<span class="nt"></script></span>
|
||||
<span class="nt"></body></span>
|
||||
<span class="nt"></html></span>
|
||||
</code></pre></div>
|
||||
<p>The XML syntax inside of JavaScript is called JSX; check out the <a href="syntax.html">JSX syntax</a> to learn more about it. In order to translate it to vanilla JavaScript we use <code><script type="text/jsx"></code> and include <code>JSXTransformer.js</code> to actually perform the transformation in the browser.</p>
|
||||
|
||||
<h3>Separate File</h3>
|
||||
|
||||
<p>Your React JSX file can live in a separate file. Create the following <code>src/helloworld.js</code>.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!<</span><span class="err">/h1>,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>Then reference it from <code>helloworld.html</code>:</p>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt"><script </span><span class="na">type=</span><span class="s">"text/jsx"</span> <span class="na">src=</span><span class="s">"src/helloworld.js"</span><span class="nt">></script></span>
|
||||
</code></pre></div>
|
||||
<h3>Offline Transform</h3>
|
||||
|
||||
<p>First install the command-line tools (requires <a href="http://npmjs.org/">npm</a>):</p>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">npm install -g react-tools
|
||||
</code></pre></div>
|
||||
<p>Then, translate your <code>src/helloworld.js</code> file to plain JavaScript:</p>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">jsx --watch src/ build/
|
||||
</code></pre></div>
|
||||
<p>The file <code>build/helloworld.js</code> is autogenerated whenever you make a change.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
|
||||
<span class="hll"> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">h1</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="s1">'Hello, world!'</span><span class="p">),</span>
|
||||
</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementyById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>Update your HTML file as below:</p>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><title></span>Hello React!<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"build/react.min.js"</span><span class="nt">></script></span>
|
||||
<span class="hll"> <span class="c"><!-- No need for JSXTransformer! --></span>
|
||||
</span> <span class="nt"></head></span>
|
||||
<span class="nt"><body></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"example"</span><span class="nt">></div></span>
|
||||
<span class="hll"> <span class="nt"><script </span><span class="na">src=</span><span class="s">"build/helloworld.js"</span><span class="nt">></script></span>
|
||||
</span> <span class="nt"></body></span>
|
||||
<span class="nt"></html></span>
|
||||
</code></pre></div>
|
||||
<h2>Want CommonJS?</h2>
|
||||
|
||||
<p>If you want to use React within a module system, <a href="http://github.com/facebook/react">fork our repo</a>, <code>npm install</code> and run <code>grunt</code>. A nice set of CommonJS modules will be generated. Our <code>jsx</code> build tool can be integrated into most packaging systems (not just CommonJS) quite easily.</p>
|
||||
|
||||
<h2>Next Steps</h2>
|
||||
|
||||
<p>Check out <a href="tutorial.html">the tutorial</a> and the other examples in the <code>/examples</code> directory to learn more. Good luck, and welcome!</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/tutorial.html">Next →</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | JSX Syntax</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | JSX Syntax" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/syntax.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" alt="" src="/react/img/logo_small.png">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/getting-started.html">Getting Started</a></li>
|
||||
<li><a href="/react/docs/tutorial.html">Tutorial</a></li>
|
||||
<li><a href="/react/docs/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html" class="active">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>JSX Syntax</h1>
|
||||
<div class="subHeader">Writing JavaScript with XML syntax.</div>
|
||||
<p>JSX is a JavaScript XML syntax extension recommended (but not required) for use
|
||||
with React.</p>
|
||||
|
||||
<p>JSX makes code that deeply nested React components more readable, and writing it
|
||||
feels like writing HTML. React documentation examples make use of JSX.</p>
|
||||
|
||||
<h2>The Transform</h2>
|
||||
|
||||
<p>JSX transforms XML-like syntax into native JavaScript. It turns XML elements and
|
||||
attributes into function calls and objects, respectively.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Nav</span><span class="p">;</span>
|
||||
<span class="c1">// Input (JSX):</span>
|
||||
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="o"><</span><span class="nx">Nav</span> <span class="nx">color</span><span class="o">=</span><span class="s2">"blue"</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="c1">// Output (JS):</span>
|
||||
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">Nav</span><span class="p">({</span><span class="nx">color</span><span class="o">:</span><span class="s1">'blue'</span><span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Notice that in order to use <code><Nav /></code>, the <code>Nav</code> variable must be in scope.</p>
|
||||
|
||||
<p>JSX also allows specifying children using XML syntax:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Nav</span><span class="p">,</span> <span class="nx">Profile</span><span class="p">;</span>
|
||||
<span class="c1">// Input (JSX):</span>
|
||||
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="o"><</span><span class="nx">Nav</span> <span class="nx">color</span><span class="o">=</span><span class="s2">"blue"</span><span class="o">><</span><span class="nx">Profile</span><span class="o">></span><span class="nx">click</span><span class="o"><</span><span class="err">/Profile></Nav>;</span>
|
||||
<span class="c1">// Output (JS):</span>
|
||||
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">Nav</span><span class="p">({</span><span class="nx">color</span><span class="o">:</span><span class="s1">'blue'</span><span class="p">},</span> <span class="nx">Profile</span><span class="p">({},</span> <span class="s1">'click'</span><span class="p">));</span>
|
||||
</code></pre></div>
|
||||
<p>The <a href="getting-started.html">Getting Started</a> guide shows how to setup JSX
|
||||
compilation.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>Details about the code transform are given here to increase understanding, but
|
||||
your code should not rely on these implementation details.</p>
|
||||
</blockquote>
|
||||
|
||||
<h2>React and JSX</h2>
|
||||
|
||||
<p>React and JSX are independent technologies, but JSX was primarily built with
|
||||
React in mind. The two valid uses of JSX are:</p>
|
||||
|
||||
<ul>
|
||||
<li>To construct instances of React DOM components (<code>React.DOM.*</code>).</li>
|
||||
<li>To construct instances of composite components created with
|
||||
<code>React.createClass()</code>.</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>React DOM Components</strong></p>
|
||||
|
||||
<p>To construct a <code><div></code> is to create a variable that refers to <code>React.DOM.div</code>.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">div</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="o"><</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"appClass"</span><span class="o">></span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">React</span><span class="o">!<</span><span class="err">/div>;</span>
|
||||
</code></pre></div>
|
||||
<p><strong>React Component Components</strong></p>
|
||||
|
||||
<p>To construct an instance of a composite component, create a variable that
|
||||
references the class.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span><span class="cm">/*...*/</span><span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="o"><</span><span class="nx">MyComponent</span> <span class="nx">someProperty</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>See <a href="component-basics.html">Component Basics</a> to learn more about components.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>Since JSX is JavaScript, identifiers such as <code>class</code> and <code>for</code> are discouraged
|
||||
as XML attribute names. Instead, React DOM components expect attributes like
|
||||
<code>className</code> and <code>htmlFor</code>, respectively.</p>
|
||||
</blockquote>
|
||||
|
||||
<h2>DOM Convenience</h2>
|
||||
|
||||
<p>Having to define variables for every type of DOM element can get tedious
|
||||
(e.g. <code>var div, span, h1, h2, ...</code>). JSX provides a convenience to address this
|
||||
problem by allowing you to specify a variable in an <code>@jsx</code> docblock field. JSX
|
||||
will use that field to find DOM components.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/**</span>
|
||||
<span class="cm"> * @jsx React.DOM</span>
|
||||
<span class="cm"> */</span>
|
||||
<span class="kd">var</span> <span class="nx">Nav</span><span class="p">;</span>
|
||||
<span class="c1">// Input (JSX):</span>
|
||||
<span class="kd">var</span> <span class="nx">tree</span> <span class="o">=</span> <span class="o"><</span><span class="nx">Nav</span><span class="o">><</span><span class="nx">span</span> <span class="o">/><</span><span class="err">/Nav>;</span>
|
||||
<span class="c1">// Output (JS):</span>
|
||||
<span class="kd">var</span> <span class="nx">tree</span> <span class="o">=</span> <span class="nx">Nav</span><span class="p">({},</span> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">span</span><span class="p">({}));</span>
|
||||
</code></pre></div>
|
||||
<blockquote>
|
||||
<p>Remember:</p>
|
||||
|
||||
<p>JSX simply transforms elements into function calls and has no notion of the
|
||||
DOM. The docblock parameter is only a convenience to resolve the most commonly
|
||||
used elements. In general, JSX has no notion of the DOM.</p>
|
||||
</blockquote>
|
||||
|
||||
<h2>JavaScript Expressions</h2>
|
||||
|
||||
<h4>Attribute Expressions</h4>
|
||||
|
||||
<p>To use a JavaScript expression as an attribute value, wrap the expression in a
|
||||
pair of curly braces (<code>{}</code>) instead of quotes (<code>""</code>).</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// Input (JSX):</span>
|
||||
<span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="o"><</span><span class="nx">Person</span> <span class="nx">name</span><span class="o">=</span><span class="p">{</span><span class="nb">window</span><span class="p">.</span><span class="nx">isLoggedIn</span> <span class="o">?</span> <span class="nb">window</span><span class="p">.</span><span class="nx">name</span> <span class="o">:</span> <span class="s1">''</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="c1">// Output (JS):</span>
|
||||
<span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="nx">Person</span><span class="p">({</span><span class="nx">name</span><span class="o">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">isLoggedIn</span> <span class="o">?</span> <span class="nb">window</span><span class="p">.</span><span class="nx">name</span> <span class="o">:</span> <span class="s1">''</span><span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<h4>Child Expressions</h4>
|
||||
|
||||
<p>Likewise, JavaScript expressions may be used to express children:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// Input (JSX):</span>
|
||||
<span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="o"><</span><span class="nx">Container</span><span class="o">></span><span class="p">{</span><span class="nb">window</span><span class="p">.</span><span class="nx">isLoggedIn</span> <span class="o">?</span> <span class="o"><</span><span class="nx">Nav</span> <span class="o">/></span> <span class="o">:</span> <span class="o"><</span><span class="nx">Login</span> <span class="o">/></span><span class="p">}</span><span class="o"><</span><span class="err">/Container>;</span>
|
||||
<span class="c1">// Output (JS):</span>
|
||||
<span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="nx">Container</span><span class="p">({},</span> <span class="nb">window</span><span class="p">.</span><span class="nx">isLoggedIn</span> <span class="o">?</span> <span class="o"><</span><span class="nx">Nav</span> <span class="o">/></span> <span class="o">:</span> <span class="o"><</span><span class="nx">Login</span> <span class="o">/></span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h2>Tooling</h2>
|
||||
|
||||
<p>Beyond the compilation step, JSX does not require any special tools.</p>
|
||||
|
||||
<ul>
|
||||
<li>Many editors already include reasonable support for JSX (Vim, Emacs js2-mode).</li>
|
||||
<li>Linting provides accurate line numbers after compiling without sourcemaps.</li>
|
||||
<li>Elements use standard scoping so linters can find usage of out-of-scope
|
||||
components.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Prior Work</h2>
|
||||
|
||||
<p>JSX is similar to several other JavaScript embedded XML language
|
||||
proposals/projects. Some of the features of JSX that distinguish it from similar
|
||||
efforts include:</p>
|
||||
|
||||
<ul>
|
||||
<li>JSX is a simple syntactic transform.</li>
|
||||
<li>JSX neither provides nor requires a runtime library.</li>
|
||||
<li>JSX does not alter or add to the semantics of JavaScript.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/common-questions.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/component-basics.html">Next →</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,700 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Tutorial</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Tutorial" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/tutorial.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" alt="" src="/react/img/logo_small.png">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/getting-started.html">Getting Started</a></li>
|
||||
<li><a href="/react/docs/tutorial.html" class="active">Tutorial</a></li>
|
||||
<li><a href="/react/docs/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Tutorial</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p>We'll be building a simple, but realistic comments box that you can drop into a blog, similar to Disqus, LiveFyre or Facebook comments.</p>
|
||||
|
||||
<p>We'll provide:</p>
|
||||
|
||||
<ul>
|
||||
<li>A view of all of the comments</li>
|
||||
<li>A form to submit a comment</li>
|
||||
<li>Hooks for you to provide a custom backend</li>
|
||||
</ul>
|
||||
|
||||
<p>It'll also have a few neat features:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Optimistic commenting:</strong> comments appear in the list before they're saved on the server so it feels fast.</li>
|
||||
<li><strong>Live updates:</strong> as other users comment we'll pop them into the comment view in real time</li>
|
||||
<li><strong>Markdown formatting:</strong> users can use Markdown to format their text</li>
|
||||
</ul>
|
||||
|
||||
<h2>Getting started</h2>
|
||||
|
||||
<p>For this tutorial we'll use prebuilt JavaScript files on a CDN. Open up your favorite editor and create a new HTML document:</p>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="c"><!-- template.html --></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><title></span>Hello React<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"http://fb.me/react-0.3.0.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"http://fb.me/JSXTransformer-0.3.0.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"></head></span>
|
||||
<span class="nt"><body></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"content"</span><span class="nt">></div></span>
|
||||
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/jsx"</span><span class="nt">></span>
|
||||
<span class="cm">/**</span>
|
||||
<span class="cm"> * @jsx React.DOM</span>
|
||||
<span class="cm"> */</span>
|
||||
<span class="c1">// Your code here</span>
|
||||
<span class="nt"></script></span>
|
||||
<span class="nt"></body></span>
|
||||
<span class="nt"></html></span>
|
||||
</code></pre></div>
|
||||
<p>For the remainder of this tutorial, we'll be writing our JavaScript code in this script tag.</p>
|
||||
|
||||
<h2>Your first component</h2>
|
||||
|
||||
<p>React is all about modular, composable components. For our comment box example, we'll have the following component structure:</p>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">- CommentBox
|
||||
- CommentList
|
||||
- Comment
|
||||
- CommentForm
|
||||
</code></pre></div>
|
||||
<p>Let's build the <code>CommentBox</code> component, which is just a simple <code><div></code>:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial1.js</span>
|
||||
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentBox"</span><span class="o">></span>
|
||||
<span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!</span> <span class="nx">I</span> <span class="nx">am</span> <span class="nx">a</span> <span class="nx">CommentBox</span><span class="p">.</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">CommentBox</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'content'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h3>JSX Syntax</h3>
|
||||
|
||||
<p>The first thing you'll notice is the XML-ish syntax in your JavaScript. We have a simple precompiler that translates the syntactic sugar to this plain JavaScript:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial1-raw.js</span>
|
||||
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">div</span><span class="p">({</span>
|
||||
<span class="nx">className</span><span class="o">:</span> <span class="s1">'commentBox'</span><span class="p">,</span>
|
||||
<span class="nx">children</span><span class="o">:</span> <span class="s1">'Hello, world! I am a CommentBox.'</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
|
||||
<span class="nx">CommentBox</span><span class="p">({}),</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'content'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>Its use is optional but we've found JSX syntax easier to use than plain JavaScript. Read more on the <a href="syntax.html">JSX Syntax article</a>.</p>
|
||||
|
||||
<h3>What's going on</h3>
|
||||
|
||||
<p>We pass some methods in a JavaScript object to <code>React.createClass()</code> to create a new React component. The most important of these methods is called <code>render</code> which returns a tree of React components that will eventually render to HTML.</p>
|
||||
|
||||
<p>The <code><div></code> tags are not actual DOM nodes; they are instantiations of React <code>div</code> components. You can think of these as markers or pieces of data that React knows how to handle. React is <strong>safe</strong>. We are not generating HTML strings so XSS protection is the default.</p>
|
||||
|
||||
<p>You do not have to return basic HTML. You can return a tree of components that you (or someone else built). This is what makes React <strong>composable</strong>: a key tenet of maintainable frontends.</p>
|
||||
|
||||
<p><code>React.renderComponent()</code> instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument.</p>
|
||||
|
||||
<h1>Composing components</h1>
|
||||
|
||||
<p>Let's build skeletons for <code>CommentList</code> and <code>CommentForm</code> which will, again, be simple <code><div></code>s:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial2.js</span>
|
||||
<span class="kd">var</span> <span class="nx">CommentList</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentList"</span><span class="o">></span>
|
||||
<span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!</span> <span class="nx">I</span> <span class="nx">am</span> <span class="nx">a</span> <span class="nx">CommentList</span><span class="p">.</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">CommentForm</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentForm"</span><span class="o">></span>
|
||||
<span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!</span> <span class="nx">I</span> <span class="nx">am</span> <span class="nx">a</span> <span class="nx">CommentForm</span><span class="p">.</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Next, update the <code>CommentBox</code> component to use its new friends:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial3.js</span>
|
||||
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentBox"</span><span class="o">></span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Comments</span><span class="o"><</span><span class="err">/h1></span>
|
||||
</span><span class="hll"> <span class="o"><</span><span class="nx">CommentList</span> <span class="o">/></span>
|
||||
</span><span class="hll"> <span class="o"><</span><span class="nx">CommentForm</span> <span class="o">/></span>
|
||||
</span> <span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Notice how we're mixing HTML tags and components we've built. HTML components are regular React components, just like the ones you define, with one difference. The JSX compiler will automatically rewrite HTML tags to "ReactDOM.tagName" expressions and leave everything else alone. This is to prevent the pollution of the global namespace.</p>
|
||||
|
||||
<h2>Component Properties</h2>
|
||||
|
||||
<p>Let's create our third component, <code>Comment</code>. We will want to pass it the author name and comment text so we can reuse the same code for each unique comment. First let's add some comments to the <code>CommentList</code>:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial4.js</span>
|
||||
<span class="kd">var</span> <span class="nx">CommentList</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentList"</span><span class="o">></span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">Comment</span> <span class="nx">author</span><span class="o">=</span><span class="s2">"Pete Hunt"</span><span class="o">></span><span class="nx">This</span> <span class="nx">is</span> <span class="nx">one</span> <span class="nx">comment</span><span class="o"><</span><span class="err">/Comment></span>
|
||||
</span><span class="hll"> <span class="o"><</span><span class="nx">Comment</span> <span class="nx">author</span><span class="o">=</span><span class="s2">"Jordan Walke"</span><span class="o">></span><span class="nx">This</span> <span class="nx">is</span> <span class="o">*</span><span class="nx">another</span><span class="o">*</span> <span class="nx">comment</span><span class="o"><</span><span class="err">/Comment></span>
|
||||
</span> <span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Note that we have passed some data from the parent <code>CommentList</code> component to the child <code>Comment</code> component as both XML-like children and attributes. Data passed from parent to child is called <strong>props</strong>, short for properties.</p>
|
||||
|
||||
<h2>Using props</h2>
|
||||
|
||||
<p>Let's create the Comment component. It will read the data passed to it from the CommentList and render some markup:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial5.js</span>
|
||||
<span class="kd">var</span> <span class="nx">Comment</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"comment"</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">h2</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentAuthor"</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">author</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/h2></span>
|
||||
<span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>By surrounding a JavaScript expression in braces inside JSX (as either an attribute or child), you can drop text or React components into the tree. We access named attributes passed to the component as keys on <code>this.props</code> and any nested elements as <code>this.props.children</code>.</p>
|
||||
|
||||
<h2>Adding Markdown</h2>
|
||||
|
||||
<p>Markdown is a simple way to format your text inline. For example, surrounding text with asterisks will make it emphasized.</p>
|
||||
|
||||
<p>First, add the third-party <strong>Showdown</strong> library to your application. This is a JavaScript library which takes Markdown text and converts it to raw HTML. This requires a script tag in your head (which we have already included in the React playground).</p>
|
||||
|
||||
<p>Next, let's convert the comment text to Markdown and output it:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial6.js</span>
|
||||
<span class="hll"><span class="kd">var</span> <span class="nx">converter</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Showdown</span><span class="p">.</span><span class="nx">converter</span><span class="p">();</span>
|
||||
</span><span class="kd">var</span> <span class="nx">Comment</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"comment"</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">h2</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentAuthor"</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">author</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/h2></span>
|
||||
<span class="hll"> <span class="p">{</span><span class="nx">converter</span><span class="p">.</span><span class="nx">makeHtml</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">.</span><span class="nx">toString</span><span class="p">())}</span>
|
||||
</span> <span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>All we're doing here is calling the Showdown library. We need to convert <code>this.props.children</code> from React's wrapped text to a raw string that Showdown will understand so we explicitly call <code>toString()</code>.</p>
|
||||
|
||||
<p>But there's a problem! Our rendered comments look like this in the browser: "<code><p></code>This is <code><em></code>another<code></em></code> comment<code></p></code>". We want those tags to actually render as HTML.</p>
|
||||
|
||||
<p>That's React protecting you from an XSS attack. There's a way to get around it but the framework warns you not to use it:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial7.js</span>
|
||||
<span class="kd">var</span> <span class="nx">converter</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Showdown</span><span class="p">.</span><span class="nx">converter</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">Comment</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="kd">var</span> <span class="nx">rawMarkup</span> <span class="o">=</span> <span class="nx">converter</span><span class="p">.</span><span class="nx">makeHtml</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span>
|
||||
</span> <span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"comment"</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">h2</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentAuthor"</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">author</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/h2></span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">span</span> <span class="nx">dangerouslySetInnerHTML</span><span class="o">=</span><span class="p">{{</span><span class="nx">__html</span><span class="o">:</span> <span class="nx">rawMarkup</span><span class="p">}}</span> <span class="o">/></span>
|
||||
</span> <span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>This is a special API that intentionally makes it difficult to insert raw HTML, but for Showdown we'll take advantage of this backdoor.</p>
|
||||
|
||||
<p><strong>Remember:</strong> by using this feature you're relying on Showdown to be secure.</p>
|
||||
|
||||
<h2>Hook up the data model</h2>
|
||||
|
||||
<p>So far we've been inserting the comments directly in the source code. Instead, let's render a blob of JSON data into the comment list. Eventually this will come from the server, but for now, write it in your source:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial8.js</span>
|
||||
<span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">[</span>
|
||||
<span class="p">{</span><span class="nx">author</span><span class="o">:</span> <span class="s1">'Pete Hunt'</span><span class="p">,</span> <span class="nx">text</span><span class="o">:</span> <span class="s1">'This is one comment'</span><span class="p">},</span>
|
||||
<span class="p">{</span><span class="nx">author</span><span class="o">:</span> <span class="s1">'Jordan Walke'</span><span class="p">,</span> <span class="nx">text</span><span class="o">:</span> <span class="s1">'This is *another* comment'</span><span class="p">}</span>
|
||||
<span class="p">];</span>
|
||||
</code></pre></div>
|
||||
<p>We need to get this data into <code>CommentList</code> in a modular way. Modify <code>CommentBox</code> and the <code>renderComponent()</code> call to pass this data into the <code>CommentList</code> via props:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial9.js</span>
|
||||
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentBox"</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Comments</span><span class="o"><</span><span class="err">/h1></span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">CommentList</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">data</span><span class="p">}</span> <span class="o">/></span>
|
||||
</span> <span class="o"><</span><span class="nx">CommentForm</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">CommentBox</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">data</span><span class="p">}</span> <span class="o">/></span><span class="p">,</span>
|
||||
</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'content'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>Now that the data is available in the <code>CommentList</code>, let's render the comments dynamically:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial10.js</span>
|
||||
<span class="kd">var</span> <span class="nx">CommentList</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="kd">var</span> <span class="nx">commentNodes</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="k">return</span> <span class="o"><</span><span class="nx">Comment</span> <span class="nx">author</span><span class="o">=</span><span class="p">{</span><span class="nx">comment</span><span class="p">.</span><span class="nx">author</span><span class="p">}</span><span class="o">></span><span class="p">{</span><span class="nx">comment</span><span class="p">.</span><span class="nx">text</span><span class="p">}</span><span class="o"><</span><span class="err">/Comment>;</span>
|
||||
</span><span class="hll"> <span class="p">});</span>
|
||||
</span> <span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentList"</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="nx">commentNodes</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>That's it!</p>
|
||||
|
||||
<h2>Fetching from the server</h2>
|
||||
|
||||
<p>Let's replace the hard-coded data with some dynamic data from the server. We will remove the data prop and replace it with a URL to fetch:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial11.js</span>
|
||||
<span class="hll"><span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
|
||||
</span> <span class="o"><</span><span class="nx">CommentBox</span> <span class="nx">url</span><span class="o">=</span><span class="s2">"comments.json"</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>This component is different from the prior components because it will have to re-render itself. The component won't have any data until the request from the server comes back, at which point the component may need to render some new comments.</p>
|
||||
|
||||
<h2>Reactive state</h2>
|
||||
|
||||
<p>So far, each component has rendered itself once based on its props. <code>props</code> are immutable: they are passed from the parent and are "owned" by the parent. To implement interactions, we introduce mutable <strong>state</strong> to the component. <code>this.state</code> is private to the component and can be changed by calling <code>this.setState()</code>. When the state is updated, the component re-renders itself.</p>
|
||||
|
||||
<p><code>render()</code> methods are written declaratively as functions of <code>this.props</code> and <code>this.state</code>. The framework guarantees the UI is always consistent with the inputs.</p>
|
||||
|
||||
<p>When the server fetches data, we will be changing the comment data we have. Let's add an array of comment data to the <code>CommentBox</code> component as its state:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial12.js</span>
|
||||
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="hll"> <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="k">return</span> <span class="p">{</span><span class="nx">data</span><span class="o">:</span> <span class="p">[]};</span>
|
||||
</span><span class="hll"> <span class="p">},</span>
|
||||
</span> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentBox"</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Comments</span><span class="o"><</span><span class="err">/h1></span>
|
||||
<span class="o"><</span><span class="nx">CommentList</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">data</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">CommentForm</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p><code>getInitialState()</code> executes exactly once during the lifecycle of the component and sets up the initial state of the component.</p>
|
||||
|
||||
<h3>Updating state</h3>
|
||||
|
||||
<p>When the component is first created, we want to GET some JSON from the server and update the state to reflect the latest data. In a real application this would be a dynamic endpoint, but for this example, we will use a static JSON file to keep things simple:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial13.json</span>
|
||||
<span class="p">[</span>
|
||||
<span class="p">{</span><span class="s1">'author'</span><span class="o">:</span> <span class="s1">'Pete Hunt'</span><span class="p">,</span> <span class="s1">'text'</span><span class="o">:</span> <span class="s1">'This is one comment'</span><span class="p">},</span>
|
||||
<span class="p">{</span><span class="s1">'author'</span><span class="o">:</span> <span class="s1">'Jordan Walke'</span><span class="p">,</span> <span class="s1">'text'</span><span class="o">:</span> <span class="s1">'This is *another* comment'</span><span class="p">}</span>
|
||||
<span class="p">]</span>
|
||||
</code></pre></div>
|
||||
<p>We will use jQuery 1.5 to help make an asynchronous request to the server.</p>
|
||||
|
||||
<p>Note: because this is becoming an AJAX application you'll need to develop your app using a web server rather than as a file sitting on your file system. The easiest way to do this is to run <code>python -m SimpleHTTPServer</code> in your application's directory.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial13.js</span>
|
||||
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
|
||||
</span><span class="hll"> <span class="nx">url</span><span class="o">:</span> <span class="s1">'comments.json'</span><span class="p">,</span>
|
||||
</span><span class="hll"> <span class="nx">dataType</span><span class="o">:</span> <span class="s1">'json'</span><span class="p">,</span>
|
||||
</span><span class="hll"> <span class="nx">mimeType</span><span class="o">:</span> <span class="s1">'textPlain'</span><span class="p">,</span>
|
||||
</span><span class="hll"> <span class="nx">success</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">data</span><span class="o">:</span> <span class="nx">data</span><span class="p">});</span>
|
||||
</span><span class="hll"> <span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
|
||||
</span><span class="hll"> <span class="p">});</span>
|
||||
</span> <span class="k">return</span> <span class="p">{</span><span class="nx">data</span><span class="o">:</span> <span class="p">[]};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentBox"</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Comments</span><span class="o"><</span><span class="err">/h1></span>
|
||||
<span class="o"><</span><span class="nx">CommentList</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">data</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">CommentForm</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>The key is the call to <code>this.setState()</code>. We replace the old array of comments with the new one from the server and the UI automatically updates itself. Because of this reactivity, it is trivial to add live updates. We will use simple polling here but you could easily use WebSockets or other technologies.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial14.js</span>
|
||||
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="hll"> <span class="nx">loadCommentsFromServer</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
</span> <span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
|
||||
<span class="nx">url</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">url</span><span class="p">,</span>
|
||||
<span class="nx">dataType</span><span class="o">:</span> <span class="s1">'json'</span><span class="p">,</span>
|
||||
<span class="nx">mimeType</span><span class="o">:</span> <span class="s1">'textPlain'</span><span class="p">,</span>
|
||||
<span class="nx">success</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">data</span><span class="o">:</span> <span class="nx">data</span><span class="p">});</span>
|
||||
<span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">data</span><span class="o">:</span> <span class="p">[]};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">componentWillMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">loadCommentsFromServer</span><span class="p">();</span>
|
||||
</span><span class="hll"> <span class="nx">setInterval</span><span class="p">(</span>
|
||||
</span><span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">loadCommentsFromServer</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">),</span>
|
||||
</span><span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">pollInterval</span>
|
||||
</span><span class="hll"> <span class="p">);</span>
|
||||
</span> <span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentBox"</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Comments</span><span class="o"><</span><span class="err">/h1></span>
|
||||
<span class="o"><</span><span class="nx">CommentList</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">data</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">CommentForm</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">CommentBox</span> <span class="nx">url</span><span class="o">=</span><span class="s2">"comments.json"</span> <span class="nx">pollInterval</span><span class="o">=</span><span class="p">{</span><span class="mi">5000</span><span class="p">}</span> <span class="o">/></span><span class="p">,</span>
|
||||
</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'content'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>All we have done here is move the AJAX call to a separate method and call it when the component is first loaded and every 60 seconds after that. Try running this in your browser and changing the <code>comments.json</code> file; within 5 seconds, the changes will show!</p>
|
||||
|
||||
<h2>Adding new comments</h2>
|
||||
|
||||
<p>Now it's time to build the form. Our <code>CommentForm</code> component should ask the user for their name and comment text and send a request to the server to save the comment.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial15.js</span>
|
||||
<span class="kd">var</span> <span class="nx">CommentForm</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">form</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentForm"</span><span class="o">></span>
|
||||
</span><span class="hll"> <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="nx">placeholder</span><span class="o">=</span><span class="s2">"Your name"</span> <span class="o">/></span>
|
||||
</span><span class="hll"> <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="nx">placeholder</span><span class="o">=</span><span class="s2">"Say something..."</span> <span class="o">/></span>
|
||||
</span><span class="hll"> <span class="o"><</span><span class="err">/form></span>
|
||||
</span> <span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Let's make the form interactive. When the user presses enter, we should clear the form, submit a request to the server, and refresh the list of comments. To start, let's listen for this event and just clear the form.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial16.js</span>
|
||||
<span class="kd">var</span> <span class="nx">CommentForm</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="hll"> <span class="nx">handleSubmit</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="kd">var</span> <span class="nx">author</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span><span class="p">.</span><span class="nx">trim</span><span class="p">();</span>
|
||||
</span><span class="hll"> <span class="kd">var</span> <span class="nx">text</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">text</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span><span class="p">.</span><span class="nx">trim</span><span class="p">();</span>
|
||||
</span><span class="hll"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">text</span> <span class="o">||</span> <span class="o">!</span><span class="nx">author</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="k">return</span><span class="p">;</span>
|
||||
</span><span class="hll"> <span class="p">}</span>
|
||||
</span><span class="hll"> <span class="c1">// TODO: send request to the server</span>
|
||||
</span><span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
|
||||
</span><span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">text</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
|
||||
</span><span class="hll"> <span class="p">}),</span>
|
||||
</span> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">form</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentForm"</span> <span class="nx">onSubmit</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span>
|
||||
</span> <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="nx">placeholder</span><span class="o">=</span><span class="s2">"Your name"</span> <span class="nx">ref</span><span class="o">=</span><span class="s2">"author"</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span>
|
||||
<span class="nx">placeholder</span><span class="o">=</span><span class="s2">"Say something..."</span>
|
||||
<span class="hll"> <span class="nx">ref</span><span class="o">=</span><span class="s2">"text"</span>
|
||||
</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/form></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<h4>Events</h4>
|
||||
|
||||
<p>React attaches event handlers to components using a camelCase naming convention. We attach an onKeyUp handler to the text field, check if the user has entered text and pressed the enter key and then clear the form fields.</p>
|
||||
|
||||
<p><code>React.autoBind()</code> is a simple way to ensure that a method is always bound to its component. Inside the method, <code>this</code> will be bound to the component instance.</p>
|
||||
|
||||
<h4>Refs</h4>
|
||||
|
||||
<p>We use the <code>ref</code> attribute to assign a name to a child component and <code>this.refs</code> to reference the component. We can call <code>getDOMNode()</code> on a component to get the native browser DOM element.</p>
|
||||
|
||||
<h4>Callbacks as props</h4>
|
||||
|
||||
<p>When a user submits a comment, we will need to refresh the list of comments to include the new one. It makes sense to do all of this logic in <code>CommentBox</code> since <code>CommentBox</code> owns the state that represents the list of comments.</p>
|
||||
|
||||
<p>We need to pass data from the child component to its parent. We do this by passing a <code>callback</code> in props from parent to child:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial17.js</span>
|
||||
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">loadCommentsFromServer</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
|
||||
<span class="nx">url</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">url</span><span class="p">,</span>
|
||||
<span class="nx">dataType</span><span class="o">:</span> <span class="s1">'json'</span><span class="p">,</span>
|
||||
<span class="nx">mimeType</span><span class="o">:</span> <span class="s1">'textPlain'</span><span class="p">,</span>
|
||||
<span class="nx">success</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">data</span><span class="o">:</span> <span class="nx">data</span><span class="p">});</span>
|
||||
<span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="hll"> <span class="nx">handleCommentSubmit</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="c1">// TODO: submit to the server and refresh the list</span>
|
||||
</span><span class="hll"> <span class="p">}),</span>
|
||||
</span> <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">data</span><span class="o">:</span> <span class="p">[]};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">componentWillMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">loadCommentsFromServer</span><span class="p">();</span>
|
||||
<span class="nx">setInterval</span><span class="p">(</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">loadCommentsFromServer</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">),</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">pollInterval</span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentBox"</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Comments</span><span class="o"><</span><span class="err">/h1></span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">CommentList</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">data</span><span class="p">}</span> <span class="o">/></span>
|
||||
</span> <span class="o"><</span><span class="nx">CommentForm</span>
|
||||
<span class="nx">onCommentSubmit</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleCommentSubmit</span><span class="p">}</span>
|
||||
<span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Let's call the callback from the <code>CommentForm</code> when the user presses enter:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial18.js</span>
|
||||
<span class="kd">var</span> <span class="nx">CommentForm</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">handleSubmit</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">author</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span><span class="p">.</span><span class="nx">trim</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">text</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">text</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span><span class="p">.</span><span class="nx">trim</span><span class="p">();</span>
|
||||
<span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">onCommentSubmit</span><span class="p">({</span><span class="nx">author</span><span class="o">:</span> <span class="nx">author</span><span class="p">,</span> <span class="nx">text</span><span class="o">:</span> <span class="nx">text</span><span class="p">});</span>
|
||||
</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">text</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
|
||||
<span class="p">}),</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">form</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentForm"</span> <span class="nx">onSubmit</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="nx">placeholder</span><span class="o">=</span><span class="s2">"Your name"</span> <span class="nx">ref</span><span class="o">=</span><span class="s2">"author"</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span>
|
||||
<span class="nx">placeholder</span><span class="o">=</span><span class="s2">"Say something..."</span>
|
||||
<span class="nx">ref</span><span class="o">=</span><span class="s2">"text"</span>
|
||||
<span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/form></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Now that the callbacks are in place, all we have to do is submit to the server and refresh the list:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial19.js</span>
|
||||
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">loadCommentsFromServer</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
|
||||
<span class="nx">url</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">url</span><span class="p">,</span>
|
||||
<span class="nx">dataType</span><span class="o">:</span> <span class="s1">'json'</span><span class="p">,</span>
|
||||
<span class="nx">mimeType</span><span class="o">:</span> <span class="s1">'textPlain'</span><span class="p">,</span>
|
||||
<span class="nx">success</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">data</span><span class="o">:</span> <span class="nx">data</span><span class="p">});</span>
|
||||
<span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleCommentSubmit</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
|
||||
</span><span class="hll"> <span class="nx">url</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">url</span><span class="p">,</span>
|
||||
</span><span class="hll"> <span class="nx">data</span><span class="o">:</span> <span class="nx">comment</span><span class="p">,</span>
|
||||
</span><span class="hll"> <span class="nx">dataType</span><span class="o">:</span> <span class="s1">'json'</span><span class="p">,</span>
|
||||
</span><span class="hll"> <span class="nx">mimeType</span><span class="o">:</span> <span class="s1">'textPlain'</span><span class="p">,</span>
|
||||
</span><span class="hll"> <span class="nx">success</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">data</span><span class="o">:</span> <span class="nx">data</span><span class="p">});</span>
|
||||
</span><span class="hll"> <span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
|
||||
</span><span class="hll"> <span class="p">});</span>
|
||||
</span> <span class="p">}),</span>
|
||||
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">data</span><span class="o">:</span> <span class="p">[]};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">componentWillMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">loadCommentsFromServer</span><span class="p">();</span>
|
||||
<span class="nx">setInterval</span><span class="p">(</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">loadCommentsFromServer</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">),</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">pollInterval</span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentBox"</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Comments</span><span class="o"><</span><span class="err">/h1></span>
|
||||
<span class="o"><</span><span class="nx">CommentList</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">data</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">CommentForm</span>
|
||||
<span class="nx">onCommentSubmit</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleCommentSubmit</span><span class="p">}</span>
|
||||
<span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<h2>Optimization: optimistic updates</h2>
|
||||
|
||||
<p>Our application is now feature complete but it feels slow to have to wait for the request to complete before your comment appears in the list. We can optimistically add this comment to the list to make the app feel faster.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial20.js</span>
|
||||
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">loadCommentsFromServer</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
|
||||
<span class="nx">url</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">url</span><span class="p">,</span>
|
||||
<span class="nx">dataType</span><span class="o">:</span> <span class="s1">'json'</span><span class="p">,</span>
|
||||
<span class="nx">mimeType</span><span class="o">:</span> <span class="s1">'textPlain'</span><span class="p">,</span>
|
||||
<span class="nx">success</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">data</span><span class="o">:</span> <span class="nx">data</span><span class="p">});</span>
|
||||
<span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleCommentSubmit</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="kd">var</span> <span class="nx">comments</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
|
||||
</span><span class="hll"> <span class="nx">comments</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">comment</span><span class="p">);</span>
|
||||
</span><span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">data</span><span class="o">:</span> <span class="nx">comments</span><span class="p">});</span>
|
||||
</span> <span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
|
||||
<span class="nx">url</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">url</span><span class="p">,</span>
|
||||
<span class="nx">data</span><span class="o">:</span> <span class="nx">comment</span><span class="p">,</span>
|
||||
<span class="nx">dataType</span><span class="o">:</span> <span class="s1">'json'</span><span class="p">,</span>
|
||||
<span class="nx">mimeType</span><span class="o">:</span> <span class="s1">'textPlain'</span><span class="p">,</span>
|
||||
<span class="nx">success</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">data</span><span class="o">:</span> <span class="nx">data</span><span class="p">});</span>
|
||||
<span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}),</span>
|
||||
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">data</span><span class="o">:</span> <span class="p">[]};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">componentWillMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">loadCommentsFromServer</span><span class="p">();</span>
|
||||
<span class="nx">setInterval</span><span class="p">(</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">loadCommentsFromServer</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">),</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">pollInterval</span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentBox"</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Comments</span><span class="o"><</span><span class="err">/h1></span>
|
||||
<span class="o"><</span><span class="nx">CommentList</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">data</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">CommentForm</span>
|
||||
<span class="nx">onCommentSubmit</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleCommentSubmit</span><span class="p">}</span>
|
||||
<span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<h2>Congrats!</h2>
|
||||
|
||||
<p>You have just built a comment box in a few simple steps. Learn more about React in the <a href="syntax.html">reference</a> or start hacking! Good luck!</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/getting-started.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/common-questions.html">Next →</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+109
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Downloads</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Downloads" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/downloads.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" alt="" src="/react/img/logo_small.png">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html" class="active">download</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent nosidebar">
|
||||
<div class="inner-content">
|
||||
<h1>Downloads</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p>Download the starter kit to get everything you need to
|
||||
<a href="/react/docs/getting-started.html">get started with React</a>.</p>
|
||||
|
||||
<div class="buttons-unit downloads">
|
||||
<a href="/react/downloads/react-0.3.0.zip" class="button">
|
||||
Download Starter Kit 0.3.0
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2>Individual Downloads</h2>
|
||||
|
||||
<h4><a href="http://fb/me/react-0.3.0.min.js">React Core 0.3.0 (production)</a></h4>
|
||||
|
||||
<p>The compressed, production version of React core</p>
|
||||
|
||||
<h4><a href="http://fb/me/react-0.3.0.js">React Core 0.3.0 (development)</a></h4>
|
||||
|
||||
<p>The uncompressed, development version of React core with inline documentation.</p>
|
||||
|
||||
<h4><a href="http://fb/me/JSXTransformer-0.3.0.js">JSX Transform</a></h4>
|
||||
|
||||
<p>The JSX transformer used to support <a href="/react/docs/syntax.html">XML syntax</a> in JavaScript.</p>
|
||||
|
||||
<h2>Bower</h2>
|
||||
<div class="highlight"><pre><code class="sh language-sh" data-lang="sh"><span class="nv">$ </span>bower install react
|
||||
</code></pre></div>
|
||||
<h2>NPM</h2>
|
||||
<div class="highlight"><pre><code class="sh language-sh" data-lang="sh"><span class="nv">$ </span>npm install -g react-tools
|
||||
</code></pre></div>
|
||||
<h2>Release Notes</h2>
|
||||
|
||||
<p><strong>0.3</strong> Initial public release.</p>
|
||||
|
||||
<p><strong>0.2</strong> Standardize API & refactor component lifecycle. Normalize DOM interactions.</p>
|
||||
|
||||
<p><strong>0.1</strong> Initial release.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
@@ -0,0 +1,37 @@
|
||||
var argv = require('optimist').argv;
|
||||
var fs = require('fs');
|
||||
|
||||
var CODE_SAMPLE = /```[\S]+\s*[\s\S]*?```/g;
|
||||
var PARTS = /```[\S]+\s*\/\/\s+(.+?)\n([\s\S]*?)```/;
|
||||
|
||||
function truncate(s, n) {
|
||||
n = n || 256
|
||||
if (s.length < n) {
|
||||
return s;
|
||||
}
|
||||
return s.substring(0, n) + '...';
|
||||
}
|
||||
|
||||
function main(dest, filenames) {
|
||||
if (!dest) {
|
||||
throw new Error('no dest provided');
|
||||
}
|
||||
filenames.map(function (filename) {
|
||||
var content = fs.readFileSync(filename).toString('utf8');
|
||||
var codeSamples = content.match(CODE_SAMPLE);
|
||||
|
||||
codeSamples.map(function (codeSample) {
|
||||
// Do a little jank preprocessing
|
||||
codeSample = codeSample.replace('<!--', '//').replace(' -->', '');
|
||||
var extracted = codeSample.match(PARTS);
|
||||
if (!extracted) {
|
||||
throw new Error('Code sample did not match correct format in ' + filename + ': ' + truncate(codeSample));
|
||||
}
|
||||
var filename = extracted[1];
|
||||
var content = extracted[2].replace(/\*\*/g, '');
|
||||
fs.writeFileSync(argv.dest + '/' + filename, content);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
main(argv.dest, argv._);
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
+157
@@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | A JavaScript library for building user interfaces</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | A JavaScript library for building user interfaces" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/index.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" alt="" src="/react/img/logo_small.png">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="hero">
|
||||
<div class="wrap">
|
||||
<div class="text"><strong>React</strong></div>
|
||||
<div class="minitext">
|
||||
A JavaScript library for building user interfaces
|
||||
</div>
|
||||
|
||||
<div class="buttons-unit">
|
||||
<a href="/react/docs/getting-started.html" class="button">Get Started</a>
|
||||
<a href="/react/downloads.html" class="button">Download React v0.3.0</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<section class="content wrap">
|
||||
<p><section class="light home-section">
|
||||
<div class="marketing-row">
|
||||
<div class="marketing-col">
|
||||
<h3>Declarative</h3>
|
||||
<p>
|
||||
React uses a declarative paradigm that makes it easier to reason about
|
||||
your application.
|
||||
</p>
|
||||
</div>
|
||||
<div class="marketing-col">
|
||||
<h3>Efficient</h3>
|
||||
<p>
|
||||
React minimizes interactions with the DOM by using a mock representation
|
||||
of the DOM.
|
||||
</p>
|
||||
</div>
|
||||
<div class="marketing-col">
|
||||
<h3>Flexible</h3>
|
||||
<p>
|
||||
React works with the libraries and frameworks that you already know.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="home-divider" />
|
||||
<section class="home-section">
|
||||
<div id="examples">
|
||||
<div class="example">
|
||||
<h3>A Simple Component</h3>
|
||||
<p>
|
||||
React components implement a <code>render()</code> method that takes input data and
|
||||
returns what to display. This example constructs the component using an
|
||||
XML-like syntax called JSX. Input data is passed to the component as XML
|
||||
attributes, and <code>render()</code> accesses this data via <code>this.props</code>.
|
||||
</p>
|
||||
<div id="helloExample"></div>
|
||||
</div>
|
||||
<div class="example">
|
||||
<h3>A Stateful Component</h3>
|
||||
<p>
|
||||
In addition to taking data from its creator (accessed via <code>this.props</code>),
|
||||
a component can maintain internal state data (accessed via
|
||||
<code>this.state</code>). When a component's state data changes, the rendered
|
||||
markup will be updated by re-invoking <code>render()</code>.
|
||||
</p>
|
||||
<div id="timerExample"></div>
|
||||
</div>
|
||||
<div class="example">
|
||||
<h3>An Application</h3>
|
||||
<p>
|
||||
Using properties and state, we can put together a small Todo
|
||||
application. React provides an interface to the DOM via <code>refs</code>. Although
|
||||
event handlers appear to be rendered inline, they will be
|
||||
collected and implemented using event delegation.
|
||||
</p>
|
||||
<div id="todoExample"></div>
|
||||
</div>
|
||||
<div class="example">
|
||||
<h3>A Component Using External Plugins</h3>
|
||||
<p>
|
||||
React is flexible and provides hooks that allow you to interface with
|
||||
other libraries and frameworks. This example uses Showdown, an external
|
||||
Markdown library, to convert the textarea's value in real-time.
|
||||
</p>
|
||||
<div id="markdownExample"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="js/examples/hello.js"></script>
|
||||
<script type="text/javascript" src="js/examples/timer.js"></script>
|
||||
<script type="text/javascript" src="js/examples/todo.js"></script>
|
||||
<script type="text/javascript" src="js/examples/markdown.js"></script>
|
||||
</section>
|
||||
<hr class="home-divider" />
|
||||
<section class="home-bottom-section">
|
||||
<div class="buttons-unit">
|
||||
<a href="/getting-started.html" class="button">Get Started</a>
|
||||
<a href="/download.html" class="button">Download React v0.3.0</a>
|
||||
</div>
|
||||
</section></p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+10139
File diff suppressed because one or more lines are too long
+5230
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,19 @@
|
||||
/**
|
||||
* @jsx React.DOM
|
||||
*/
|
||||
|
||||
var HELLO_COMPONENT = "\
|
||||
/** @jsx React.DOM */\n\
|
||||
var HelloMessage = React.createClass({\n\
|
||||
render: function() {\n\
|
||||
return <div>{'Hello ' + this.props.name}</div>;\n\
|
||||
}\n\
|
||||
});\n\
|
||||
\n\
|
||||
React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
|
||||
";
|
||||
|
||||
React.renderComponent(
|
||||
ReactPlayground( {codeText:HELLO_COMPONENT}, null ),
|
||||
document.getElementById('helloExample')
|
||||
);
|
||||
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* @jsx React.DOM
|
||||
*/
|
||||
|
||||
var MARKDOWN_COMPONENT = "\
|
||||
/** @jsx React.DOM */\n\
|
||||
\n\
|
||||
var converter = new Showdown.converter();\n\
|
||||
\n\
|
||||
var MarkdownEditor = React.createClass({\n\
|
||||
getInitialState: function() {\n\
|
||||
return {value: 'Type some *markdown* here!'};\n\
|
||||
},\n\
|
||||
handleKeyUp: React.autoBind(function() {\n\
|
||||
this.setState({value: this.refs.textarea.getDOMNode().value});\n\
|
||||
}),\n\
|
||||
render: function() {\n\
|
||||
return (\n\
|
||||
<div className=\"MarkdownEditor\">\n\
|
||||
<h3>Input</h3>\n\
|
||||
<textarea onKeyUp={this.handleKeyUp} ref=\"textarea\">\n\
|
||||
{this.state.value}\n\
|
||||
</textarea>\n\
|
||||
<h3>Output</h3>\n\
|
||||
<div\n\
|
||||
className=\"content\"\n\
|
||||
dangerouslySetInnerHTML={{\n\
|
||||
__html: converter.makeHtml(this.state.value)\n\
|
||||
}}\n\
|
||||
/>\n\
|
||||
</div>\n\
|
||||
);\n\
|
||||
}\n\
|
||||
});\n\
|
||||
\n\
|
||||
React.renderComponent(<MarkdownEditor />, mountNode);\
|
||||
";
|
||||
|
||||
React.renderComponent(
|
||||
ReactPlayground( {codeText:MARKDOWN_COMPONENT}, null ),
|
||||
document.getElementById('markdownExample')
|
||||
);
|
||||
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* @jsx React.DOM
|
||||
*/
|
||||
|
||||
var TIMER_COMPONENT = "\
|
||||
/** @jsx React.DOM */\n\
|
||||
var Timer = React.createClass({\n\
|
||||
getInitialState: function() {\n\
|
||||
return {secondsElapsed: 0};\n\
|
||||
},\n\
|
||||
tick: React.autoBind(function() {\n\
|
||||
this.setState({secondsElapsed: this.state.secondsElapsed + 1});\n\
|
||||
}),\n\
|
||||
componentDidMount: function() {\n\
|
||||
setInterval(this.tick, 1000);\n\
|
||||
},\n\
|
||||
render: function() {\n\
|
||||
return (\n\
|
||||
<div>\n\
|
||||
{'Seconds Ellapsed: ' + this.state.secondsElapsed}\n\
|
||||
</div>\n\
|
||||
);\n\
|
||||
}\n\
|
||||
});\n\
|
||||
\n\
|
||||
React.renderComponent(<Timer />, mountNode);\
|
||||
";
|
||||
|
||||
React.renderComponent(
|
||||
ReactPlayground( {codeText:TIMER_COMPONENT}, null ),
|
||||
document.getElementById('timerExample')
|
||||
);
|
||||
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* @jsx React.DOM
|
||||
*/
|
||||
|
||||
var TODO_COMPONENT = "\
|
||||
/** @jsx React.DOM */\n\
|
||||
var TodoList = React.createClass({\n\
|
||||
render: function() {\n\
|
||||
var items = this.props.items.map(function(item) {\n\
|
||||
return <li>{item}</li>;\n\
|
||||
});\n\
|
||||
return <ul>{items}</ul>;\n\
|
||||
}\n\
|
||||
});\n\
|
||||
\n\
|
||||
var TodoCreate = React.createClass({\n\
|
||||
handleSubmit: function() {\n\
|
||||
var textInput = this.refs.textInput.getDOMNode();\n\
|
||||
this.props.onCreate(textInput.value);\n\
|
||||
textInput.value = '';\n\
|
||||
return false;\n\
|
||||
},\n\
|
||||
render: function() {\n\
|
||||
return (\n\
|
||||
<form onSubmit={this.handleSubmit.bind(this)}>\n\
|
||||
<input type=\"text\" ref=\"textInput\" />\n\
|
||||
<button>Add</button>\n\
|
||||
</form>\n\
|
||||
);\n\
|
||||
}\n\
|
||||
});\n\
|
||||
\n\
|
||||
var TodoApp = React.createClass({\n\
|
||||
getInitialState: function() {\n\
|
||||
return {items: []};\n\
|
||||
},\n\
|
||||
onItemCreate: function(value) {\n\
|
||||
this.setState({items: this.state.items.concat([value])});\n\
|
||||
},\n\
|
||||
render: function() {\n\
|
||||
return (\n\
|
||||
<div>\n\
|
||||
<h3>TODO</h3>\n\
|
||||
<TodoList items={this.state.items} />\n\
|
||||
<TodoCreate onCreate={this.onItemCreate.bind(this)} />\n\
|
||||
</div>\n\
|
||||
);\n\
|
||||
}\n\
|
||||
});\n\
|
||||
\n\
|
||||
React.renderComponent(<TodoApp />, mountNode);\
|
||||
";
|
||||
|
||||
React.renderComponent(
|
||||
ReactPlayground( {codeText:TODO_COMPONENT}, null ),
|
||||
document.getElementById('todoExample')
|
||||
);
|
||||
@@ -0,0 +1,425 @@
|
||||
// TODO actually recognize syntax of TypeScript constructs
|
||||
|
||||
CodeMirror.defineMode("javascript", function(config, parserConfig) {
|
||||
var indentUnit = config.indentUnit;
|
||||
var jsonMode = parserConfig.json;
|
||||
var isTS = parserConfig.typescript;
|
||||
|
||||
// Tokenizer
|
||||
|
||||
var keywords = function(){
|
||||
function kw(type) {return {type: type, style: "keyword"};}
|
||||
var A = kw("keyword a"), B = kw("keyword b"), C = kw("keyword c");
|
||||
var operator = kw("operator"), atom = {type: "atom", style: "atom"};
|
||||
|
||||
var jsKeywords = {
|
||||
"if": A, "while": A, "with": A, "else": B, "do": B, "try": B, "finally": B,
|
||||
"return": C, "break": C, "continue": C, "new": C, "delete": C, "throw": C,
|
||||
"var": kw("var"), "const": kw("var"), "let": kw("var"),
|
||||
"function": kw("function"), "catch": kw("catch"),
|
||||
"for": kw("for"), "switch": kw("switch"), "case": kw("case"), "default": kw("default"),
|
||||
"in": operator, "typeof": operator, "instanceof": operator,
|
||||
"true": atom, "false": atom, "null": atom, "undefined": atom, "NaN": atom, "Infinity": atom
|
||||
};
|
||||
|
||||
// Extend the 'normal' keywords with the TypeScript language extensions
|
||||
if (isTS) {
|
||||
var type = {type: "variable", style: "variable-3"};
|
||||
var tsKeywords = {
|
||||
// object-like things
|
||||
"interface": kw("interface"),
|
||||
"class": kw("class"),
|
||||
"extends": kw("extends"),
|
||||
"constructor": kw("constructor"),
|
||||
|
||||
// scope modifiers
|
||||
"public": kw("public"),
|
||||
"private": kw("private"),
|
||||
"protected": kw("protected"),
|
||||
"static": kw("static"),
|
||||
|
||||
"super": kw("super"),
|
||||
|
||||
// types
|
||||
"string": type, "number": type, "bool": type, "any": type
|
||||
};
|
||||
|
||||
for (var attr in tsKeywords) {
|
||||
jsKeywords[attr] = tsKeywords[attr];
|
||||
}
|
||||
}
|
||||
|
||||
return jsKeywords;
|
||||
}();
|
||||
|
||||
var isOperatorChar = /[+\-*&%=<>!?|]/;
|
||||
|
||||
function chain(stream, state, f) {
|
||||
state.tokenize = f;
|
||||
return f(stream, state);
|
||||
}
|
||||
|
||||
function nextUntilUnescaped(stream, end) {
|
||||
var escaped = false, next;
|
||||
while ((next = stream.next()) != null) {
|
||||
if (next == end && !escaped)
|
||||
return false;
|
||||
escaped = !escaped && next == "\\";
|
||||
}
|
||||
return escaped;
|
||||
}
|
||||
|
||||
// Used as scratch variables to communicate multiple values without
|
||||
// consing up tons of objects.
|
||||
var type, content;
|
||||
function ret(tp, style, cont) {
|
||||
type = tp; content = cont;
|
||||
return style;
|
||||
}
|
||||
|
||||
function jsTokenBase(stream, state) {
|
||||
var ch = stream.next();
|
||||
if (ch == '"' || ch == "'")
|
||||
return chain(stream, state, jsTokenString(ch));
|
||||
else if (/[\[\]{}\(\),;\:\.]/.test(ch))
|
||||
return ret(ch);
|
||||
else if (ch == "0" && stream.eat(/x/i)) {
|
||||
stream.eatWhile(/[\da-f]/i);
|
||||
return ret("number", "number");
|
||||
}
|
||||
else if (/\d/.test(ch) || ch == "-" && stream.eat(/\d/)) {
|
||||
stream.match(/^\d*(?:\.\d*)?(?:[eE][+\-]?\d+)?/);
|
||||
return ret("number", "number");
|
||||
}
|
||||
else if (ch == "/") {
|
||||
if (stream.eat("*")) {
|
||||
return chain(stream, state, jsTokenComment);
|
||||
}
|
||||
else if (stream.eat("/")) {
|
||||
stream.skipToEnd();
|
||||
return ret("comment", "comment");
|
||||
}
|
||||
else if (state.lastType == "operator" || state.lastType == "keyword c" ||
|
||||
/^[\[{}\(,;:]$/.test(state.lastType)) {
|
||||
nextUntilUnescaped(stream, "/");
|
||||
stream.eatWhile(/[gimy]/); // 'y' is "sticky" option in Mozilla
|
||||
return ret("regexp", "string-2");
|
||||
}
|
||||
else {
|
||||
stream.eatWhile(isOperatorChar);
|
||||
return ret("operator", null, stream.current());
|
||||
}
|
||||
}
|
||||
else if (ch == "#") {
|
||||
stream.skipToEnd();
|
||||
return ret("error", "error");
|
||||
}
|
||||
else if (isOperatorChar.test(ch)) {
|
||||
stream.eatWhile(isOperatorChar);
|
||||
return ret("operator", null, stream.current());
|
||||
}
|
||||
else {
|
||||
stream.eatWhile(/[\w\$_]/);
|
||||
var word = stream.current(), known = keywords.propertyIsEnumerable(word) && keywords[word];
|
||||
return (known && state.lastType != ".") ? ret(known.type, known.style, word) :
|
||||
ret("variable", "variable", word);
|
||||
}
|
||||
}
|
||||
|
||||
function jsTokenString(quote) {
|
||||
return function(stream, state) {
|
||||
if (!nextUntilUnescaped(stream, quote))
|
||||
state.tokenize = jsTokenBase;
|
||||
return ret("string", "string");
|
||||
};
|
||||
}
|
||||
|
||||
function jsTokenComment(stream, state) {
|
||||
var maybeEnd = false, ch;
|
||||
while (ch = stream.next()) {
|
||||
if (ch == "/" && maybeEnd) {
|
||||
state.tokenize = jsTokenBase;
|
||||
break;
|
||||
}
|
||||
maybeEnd = (ch == "*");
|
||||
}
|
||||
return ret("comment", "comment");
|
||||
}
|
||||
|
||||
// Parser
|
||||
|
||||
var atomicTypes = {"atom": true, "number": true, "variable": true, "string": true, "regexp": true};
|
||||
|
||||
function JSLexical(indented, column, type, align, prev, info) {
|
||||
this.indented = indented;
|
||||
this.column = column;
|
||||
this.type = type;
|
||||
this.prev = prev;
|
||||
this.info = info;
|
||||
if (align != null) this.align = align;
|
||||
}
|
||||
|
||||
function inScope(state, varname) {
|
||||
for (var v = state.localVars; v; v = v.next)
|
||||
if (v.name == varname) return true;
|
||||
}
|
||||
|
||||
function parseJS(state, style, type, content, stream) {
|
||||
var cc = state.cc;
|
||||
// Communicate our context to the combinators.
|
||||
// (Less wasteful than consing up a hundred closures on every call.)
|
||||
cx.state = state; cx.stream = stream; cx.marked = null, cx.cc = cc;
|
||||
|
||||
if (!state.lexical.hasOwnProperty("align"))
|
||||
state.lexical.align = true;
|
||||
|
||||
while(true) {
|
||||
var combinator = cc.length ? cc.pop() : jsonMode ? expression : statement;
|
||||
if (combinator(type, content)) {
|
||||
while(cc.length && cc[cc.length - 1].lex)
|
||||
cc.pop()();
|
||||
if (cx.marked) return cx.marked;
|
||||
if (type == "variable" && inScope(state, content)) return "variable-2";
|
||||
return style;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Combinator utils
|
||||
|
||||
var cx = {state: null, column: null, marked: null, cc: null};
|
||||
function pass() {
|
||||
for (var i = arguments.length - 1; i >= 0; i--) cx.cc.push(arguments[i]);
|
||||
}
|
||||
function cont() {
|
||||
pass.apply(null, arguments);
|
||||
return true;
|
||||
}
|
||||
function register(varname) {
|
||||
function inList(list) {
|
||||
for (var v = list; v; v = v.next)
|
||||
if (v.name == varname) return true;
|
||||
return false;
|
||||
}
|
||||
var state = cx.state;
|
||||
if (state.context) {
|
||||
cx.marked = "def";
|
||||
if (inList(state.localVars)) return;
|
||||
state.localVars = {name: varname, next: state.localVars};
|
||||
} else {
|
||||
if (inList(state.globalVars)) return;
|
||||
state.globalVars = {name: varname, next: state.globalVars};
|
||||
}
|
||||
}
|
||||
|
||||
// Combinators
|
||||
|
||||
var defaultVars = {name: "this", next: {name: "arguments"}};
|
||||
function pushcontext() {
|
||||
cx.state.context = {prev: cx.state.context, vars: cx.state.localVars};
|
||||
cx.state.localVars = defaultVars;
|
||||
}
|
||||
function popcontext() {
|
||||
cx.state.localVars = cx.state.context.vars;
|
||||
cx.state.context = cx.state.context.prev;
|
||||
}
|
||||
function pushlex(type, info) {
|
||||
var result = function() {
|
||||
var state = cx.state;
|
||||
state.lexical = new JSLexical(state.indented, cx.stream.column(), type, null, state.lexical, info);
|
||||
};
|
||||
result.lex = true;
|
||||
return result;
|
||||
}
|
||||
function poplex() {
|
||||
var state = cx.state;
|
||||
if (state.lexical.prev) {
|
||||
if (state.lexical.type == ")")
|
||||
state.indented = state.lexical.indented;
|
||||
state.lexical = state.lexical.prev;
|
||||
}
|
||||
}
|
||||
poplex.lex = true;
|
||||
|
||||
function expect(wanted) {
|
||||
return function(type) {
|
||||
if (type == wanted) return cont();
|
||||
else if (wanted == ";") return pass();
|
||||
else return cont(arguments.callee);
|
||||
};
|
||||
}
|
||||
|
||||
function statement(type) {
|
||||
if (type == "var") return cont(pushlex("vardef"), vardef1, expect(";"), poplex);
|
||||
if (type == "keyword a") return cont(pushlex("form"), expression, statement, poplex);
|
||||
if (type == "keyword b") return cont(pushlex("form"), statement, poplex);
|
||||
if (type == "{") return cont(pushlex("}"), block, poplex);
|
||||
if (type == ";") return cont();
|
||||
if (type == "function") return cont(functiondef);
|
||||
if (type == "for") return cont(pushlex("form"), expect("("), pushlex(")"), forspec1, expect(")"),
|
||||
poplex, statement, poplex);
|
||||
if (type == "variable") return cont(pushlex("stat"), maybelabel);
|
||||
if (type == "switch") return cont(pushlex("form"), expression, pushlex("}", "switch"), expect("{"),
|
||||
block, poplex, poplex);
|
||||
if (type == "case") return cont(expression, expect(":"));
|
||||
if (type == "default") return cont(expect(":"));
|
||||
if (type == "catch") return cont(pushlex("form"), pushcontext, expect("("), funarg, expect(")"),
|
||||
statement, poplex, popcontext);
|
||||
return pass(pushlex("stat"), expression, expect(";"), poplex);
|
||||
}
|
||||
function expression(type) {
|
||||
if (atomicTypes.hasOwnProperty(type)) return cont(maybeoperator);
|
||||
if (type == "function") return cont(functiondef);
|
||||
if (type == "keyword c") return cont(maybeexpression);
|
||||
if (type == "(") return cont(pushlex(")"), maybeexpression, expect(")"), poplex, maybeoperator);
|
||||
if (type == "operator") return cont(expression);
|
||||
if (type == "[") return cont(pushlex("]"), commasep(expression, "]"), poplex, maybeoperator);
|
||||
if (type == "{") return cont(pushlex("}"), commasep(objprop, "}"), poplex, maybeoperator);
|
||||
return cont();
|
||||
}
|
||||
function maybeexpression(type) {
|
||||
if (type.match(/[;\}\)\],]/)) return pass();
|
||||
return pass(expression);
|
||||
}
|
||||
|
||||
function maybeoperator(type, value) {
|
||||
if (type == "operator") {
|
||||
if (/\+\+|--/.test(value)) return cont(maybeoperator);
|
||||
if (value == "?") return cont(expression, expect(":"), expression);
|
||||
return cont(expression);
|
||||
}
|
||||
if (type == ";") return;
|
||||
if (type == "(") return cont(pushlex(")"), commasep(expression, ")"), poplex, maybeoperator);
|
||||
if (type == ".") return cont(property, maybeoperator);
|
||||
if (type == "[") return cont(pushlex("]"), expression, expect("]"), poplex, maybeoperator);
|
||||
}
|
||||
function maybelabel(type) {
|
||||
if (type == ":") return cont(poplex, statement);
|
||||
return pass(maybeoperator, expect(";"), poplex);
|
||||
}
|
||||
function property(type) {
|
||||
if (type == "variable") {cx.marked = "property"; return cont();}
|
||||
}
|
||||
function objprop(type) {
|
||||
if (type == "variable") cx.marked = "property";
|
||||
if (atomicTypes.hasOwnProperty(type)) return cont(expect(":"), expression);
|
||||
}
|
||||
function commasep(what, end) {
|
||||
function proceed(type) {
|
||||
if (type == ",") return cont(what, proceed);
|
||||
if (type == end) return cont();
|
||||
return cont(expect(end));
|
||||
}
|
||||
return function(type) {
|
||||
if (type == end) return cont();
|
||||
else return pass(what, proceed);
|
||||
};
|
||||
}
|
||||
function block(type) {
|
||||
if (type == "}") return cont();
|
||||
return pass(statement, block);
|
||||
}
|
||||
function maybetype(type) {
|
||||
if (type == ":") return cont(typedef);
|
||||
return pass();
|
||||
}
|
||||
function typedef(type) {
|
||||
if (type == "variable"){cx.marked = "variable-3"; return cont();}
|
||||
return pass();
|
||||
}
|
||||
function vardef1(type, value) {
|
||||
if (type == "variable") {
|
||||
register(value);
|
||||
return isTS ? cont(maybetype, vardef2) : cont(vardef2);
|
||||
}
|
||||
return pass();
|
||||
}
|
||||
function vardef2(type, value) {
|
||||
if (value == "=") return cont(expression, vardef2);
|
||||
if (type == ",") return cont(vardef1);
|
||||
}
|
||||
function forspec1(type) {
|
||||
if (type == "var") return cont(vardef1, expect(";"), forspec2);
|
||||
if (type == ";") return cont(forspec2);
|
||||
if (type == "variable") return cont(formaybein);
|
||||
return cont(forspec2);
|
||||
}
|
||||
function formaybein(_type, value) {
|
||||
if (value == "in") return cont(expression);
|
||||
return cont(maybeoperator, forspec2);
|
||||
}
|
||||
function forspec2(type, value) {
|
||||
if (type == ";") return cont(forspec3);
|
||||
if (value == "in") return cont(expression);
|
||||
return cont(expression, expect(";"), forspec3);
|
||||
}
|
||||
function forspec3(type) {
|
||||
if (type != ")") cont(expression);
|
||||
}
|
||||
function functiondef(type, value) {
|
||||
if (type == "variable") {register(value); return cont(functiondef);}
|
||||
if (type == "(") return cont(pushlex(")"), pushcontext, commasep(funarg, ")"), poplex, statement, popcontext);
|
||||
}
|
||||
function funarg(type, value) {
|
||||
if (type == "variable") {register(value); return isTS ? cont(maybetype) : cont();}
|
||||
}
|
||||
|
||||
// Interface
|
||||
|
||||
return {
|
||||
startState: function(basecolumn) {
|
||||
return {
|
||||
tokenize: jsTokenBase,
|
||||
lastType: null,
|
||||
cc: [],
|
||||
lexical: new JSLexical((basecolumn || 0) - indentUnit, 0, "block", false),
|
||||
localVars: parserConfig.localVars,
|
||||
globalVars: parserConfig.globalVars,
|
||||
context: parserConfig.localVars && {vars: parserConfig.localVars},
|
||||
indented: 0
|
||||
};
|
||||
},
|
||||
|
||||
token: function(stream, state) {
|
||||
if (stream.sol()) {
|
||||
if (!state.lexical.hasOwnProperty("align"))
|
||||
state.lexical.align = false;
|
||||
state.indented = stream.indentation();
|
||||
}
|
||||
if (stream.eatSpace()) return null;
|
||||
var style = state.tokenize(stream, state);
|
||||
if (type == "comment") return style;
|
||||
state.lastType = type;
|
||||
return parseJS(state, style, type, content, stream);
|
||||
},
|
||||
|
||||
indent: function(state, textAfter) {
|
||||
if (state.tokenize == jsTokenComment) return CodeMirror.Pass;
|
||||
if (state.tokenize != jsTokenBase) return 0;
|
||||
var firstChar = textAfter && textAfter.charAt(0), lexical = state.lexical;
|
||||
if (lexical.type == "stat" && firstChar == "}") lexical = lexical.prev;
|
||||
var type = lexical.type, closing = firstChar == type;
|
||||
if (type == "vardef") return lexical.indented + (state.lastType == "operator" || state.lastType == "," ? 4 : 0);
|
||||
else if (type == "form" && firstChar == "{") return lexical.indented;
|
||||
else if (type == "form") return lexical.indented + indentUnit;
|
||||
else if (type == "stat")
|
||||
return lexical.indented + (state.lastType == "operator" || state.lastType == "," ? indentUnit : 0);
|
||||
else if (lexical.info == "switch" && !closing)
|
||||
return lexical.indented + (/^(?:case|default)\b/.test(textAfter) ? indentUnit : 2 * indentUnit);
|
||||
else if (lexical.align) return lexical.column + (closing ? 0 : 1);
|
||||
else return lexical.indented + (closing ? 0 : indentUnit);
|
||||
},
|
||||
|
||||
electricChars: ":{}",
|
||||
|
||||
jsonMode: jsonMode
|
||||
};
|
||||
});
|
||||
|
||||
CodeMirror.defineMIME("text/javascript", "javascript");
|
||||
CodeMirror.defineMIME("text/ecmascript", "javascript");
|
||||
CodeMirror.defineMIME("application/javascript", "javascript");
|
||||
CodeMirror.defineMIME("application/ecmascript", "javascript");
|
||||
CodeMirror.defineMIME("application/json", {name: "javascript", json: true});
|
||||
CodeMirror.defineMIME("text/typescript", { name: "javascript", typescript: true });
|
||||
CodeMirror.defineMIME("application/typescript", { name: "javascript", typescript: true });
|
||||
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* @jsx React.DOM
|
||||
*/
|
||||
|
||||
var CodeMirrorEditor = React.createClass({displayName: 'CodeMirrorEditor',
|
||||
componentDidMount: function(root) {
|
||||
this.editor = CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), {
|
||||
mode: 'javascript',
|
||||
lineNumbers: false,
|
||||
matchBrackets: true,
|
||||
theme: 'solarized-light'
|
||||
});
|
||||
this.editor.on('change', this.onChange.bind(this));
|
||||
this.onChange();
|
||||
},
|
||||
onChange: function() {
|
||||
if (this.props.onChange) {
|
||||
var content = this.editor.getValue();
|
||||
this.props.onChange(content);
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
// wrap in a div to fully contain CodeMirror
|
||||
return (
|
||||
React.DOM.div( {className:this.props.className},
|
||||
React.DOM.textarea( {ref:"editor"}, this.props.codeText)
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var ReactPlayground = React.createClass({displayName: 'ReactPlayground',
|
||||
MODES: {XJS: 'XJS', JS: 'JS'}, //keyMirror({XJS: true, JS: true}),
|
||||
|
||||
getInitialState: function() {
|
||||
return {mode: this.MODES.XJS, code: this.props.codeText};
|
||||
},
|
||||
|
||||
bindState: function(name) {
|
||||
return function(value) {
|
||||
var newState = {};
|
||||
newState[name] = value;
|
||||
this.setState(newState);
|
||||
}.bind(this);
|
||||
},
|
||||
|
||||
getDesugaredCode: function() {
|
||||
return JSXTransformer.transform(this.state.code).code;
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var content;
|
||||
if (this.state.mode === this.MODES.XJS) {
|
||||
content =
|
||||
CodeMirrorEditor(
|
||||
{onChange:this.bindState('code'),
|
||||
className:"playgroundStage",
|
||||
codeText:this.state.code}, null
|
||||
);
|
||||
} else if (this.state.mode === this.MODES.JS) {
|
||||
content =
|
||||
React.DOM.div( {className:{playgroundJS: true, playgroundStage: true}},
|
||||
this.getDesugaredCode()
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
React.DOM.div( {className:"playground"}, [
|
||||
React.DOM.div( {className:"playgroundCode"},
|
||||
content
|
||||
),
|
||||
React.DOM.div( {className:"playgroundPreview"},
|
||||
React.DOM.div( {ref:"mount"}, null )
|
||||
)
|
||||
])
|
||||
);
|
||||
},
|
||||
componentDidMount: function() {
|
||||
this.executeCode();
|
||||
},
|
||||
componentDidUpdate: function() {
|
||||
this.executeCode();
|
||||
},
|
||||
executeCode: function() {
|
||||
var mountNode = this.refs.mount.getDOMNode();
|
||||
|
||||
try {
|
||||
React.unmountAndReleaseReactRootNode(mountNode);
|
||||
} catch (e) { }
|
||||
|
||||
try {
|
||||
eval(this.getDesugaredCode());
|
||||
} catch (e) {
|
||||
React.renderComponent(React.DOM.div( {content:e.toString(), className:{playgroundError: true}}, null ), mountNode);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Vendored
+19
File diff suppressed because one or more lines are too long
+1302
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Need help?</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Need help?" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/support.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" alt="" src="/react/img/logo_small.png">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html">docs</a></li>
|
||||
<li><a href="/react/support.html" class="active">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent nosidebar">
|
||||
<div class="inner-content">
|
||||
<h1>Need help?</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p><strong>React</strong> is worked on full-time by Facebook's product infrastructure and Instagram's user interface engineering teams. They're often around and available for questions.</p>
|
||||
|
||||
<h2>Google Groups mailing list</h2>
|
||||
|
||||
<p><a href="http://groups.google.com/group/reactjs" target="_blank">The <strong>reactjs</strong> Google Group</a> is the best place to ask questions and find answers.</p>
|
||||
|
||||
<h2>IRC</h2>
|
||||
|
||||
<p>Many developers and users idle on Freenode.net's IRC network in <strong><a href="irc://chat.freenode.net/reactjs">#reactjs on freenode</a></strong>.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user