From 0355e4c49e8ce4f952c727b7f3b5769a02d29cbf Mon Sep 17 00:00:00 2001 From: petehunt Date: Wed, 10 Jul 2013 17:11:52 -0700 Subject: [PATCH] Start on section 04 --- docs/refactor/00-table-of-contents.md | 4 +++- docs/refactor/04-scaling-up.md | 15 +++++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 docs/refactor/04-scaling-up.md diff --git a/docs/refactor/00-table-of-contents.md b/docs/refactor/00-table-of-contents.md index aee87d83..e9740c73 100644 --- a/docs/refactor/00-table-of-contents.md +++ b/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/refactor/04-scaling-up.md b/docs/refactor/04-scaling-up.md new file mode 100644 index 00000000..0b301f50 --- /dev/null +++ b/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