原文：How to Sprinkle ReactJS into an Existing Web Application
译者：nzbin
当我们学习一项新技术，可能是一个 JavaScript 框架，也可能是一个 CSS 方法，我们将面对这样的挑战 如何在旧网站上运用这项新技术？。很多教程讲述了如何从头开始，但却很难运用到实际工作中。
在这篇教程中，我会通过一些很基本的例子讲解如何灵活运用 ReactJS，以及替换使用 jQuery 写的代码。
从 jQuery 到 React我最近的任务是用 React 重构一个使用 jQuery 写的功能。这个过程困难重重，因为大量的 jQuery 分散在代码段中。使用 jQuery 构建所有的 UI 是可能的（我们已经这样做了很多年），但是在规模变大之后，将变得混乱且难以维护。
无论你使用 Angular, Ember, Vue, React, 或者只是 jQuery，你所做的事情和开发者多年来所做的事情是一样的：
渲染 HTML > 接收用户事件 > 重新渲染 HTML
因为 jQuery 非常依赖选择器比如 .classes 和 #IDs 去控制 DOM，所以大量的属性会使 HTML 变得容易混淆，而这些属性的目的只是方便 jQuery 查找。如果代码量比较小，这是没有问题的， 但是如果代码量庞大，就会很难知道哪些类用于 CSS，哪些类用于 JavaScript。如果你之前为了改变一个功能而在 HTML 模板或 JavaScript 中查找 find 一个 .class 或者 #ID 选择器，你应该明白我说的。
Relying heavily on .classes and #IDs to select and manipulate your HTML can be brittle.
所以，如果你的代码是用 jQuery 或者其它框架所写，那么应该如何使用 React 去替换这些 UI 片段？
开始之前应该了解的事情 Wrapper / Container 元素无论使用 jQuery 还是下一个流行框架开发应用，大多数情况都是用一个根元素包裹 UI 片段。如果代码库使用 jQuery，通常会有一个元素充当 wrapper 选择器。使用 jQuery 选择 wrapper 元素，它被用于动态更新 DOM。
<!-- .MyAwesomeFeature acts as a container to select and manipulate child components with jQuery. --> <div class="MyAwesomeFeature"> <div class="MyAwesomeFeature__title"></div> <div class="MyAwesomeFeature__image"></div> </div> <script> var container = $(".MyAwesomeFeature"); $(".MyAwesomeFeature__title", container).text("Hello World!"); // Other DOM changes, event handlers, etc... </script>