diff --git a/docs/docs/refactor/00-table-of-contents.md b/docs/docs/refactor/00-table-of-contents.md index aee87d83ac..e9740c73ee 100644 --- a/docs/docs/refactor/00-table-of-contents.md +++ b/docs/docs/refactor/00-table-of-contents.md @@ -27,7 +27,8 @@ Handling user input Scaling up: using multiple components - Motivation: separate concerns - Composition example -- Handling events +- Ownership +- Data flow (one-way data binding) - A note on performance - You should build a reusable component library (CSS, testing etc) - Mixins @@ -41,6 +42,7 @@ Forms Touching the DOM - Refs / getDOMNode() - Component lifecycle +- DOM differences Integrating with other UI libraries - Using jQuery plugins diff --git a/docs/docs/refactor/04-scaling-up.md b/docs/docs/refactor/04-scaling-up.md new file mode 100644 index 0000000000..0b301f501e --- /dev/null +++ b/docs/docs/refactor/04-scaling-up.md @@ -0,0 +1,15 @@ +# Scaling Up: Using Multiple Components + +So far, we've looked at how to write a single component to display data and handle user input. Next let's examine one of React's finest features: composability. + +## Motivation: separation of concerns + +By building modular components that reuse other components using well-definted interfaces, you get much of the same benefits that you get by using functions or classes. Specifically you can *separate the different concerns* of your app however you please simply by building new components. By building a custom component library for your application, you are expressing your UI in a way that best fits your domain. + +## Composition example + +```javascript +/** @jsx React.DOM */ + + +``` \ No newline at end of file