forked from marcusphillips/react
-
Notifications
You must be signed in to change notification settings - Fork 0
/
README
52 lines (34 loc) · 2.09 KB
/
README
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
React is a templating language expressed entirely in HTML. All template directives are written in custom tag attributes.
Since a rendered reactive template retrains all the same directives that went into rendering it, it can be re-rendered just as easily, without any complicated DOM surgery. Check this out:
-------- The old way --------
<script>
var updateProfileDiv = function(userInfo, profile){
var profileDiv = $('#profile');
profileDiv.find('.mugshot img').attr('src', user.mugshotUrl);
profileDiv.find('.mugshot .caption').html(user.mugshotCaption);
if(userInfo.isAdmin){
profileDiv.find('.admin_links').show();
} else {
profileDiv.find('.admin_links').hide();
}
};
updateProfileDiv(user, $('#profile'));
</script>
-------- The Reactive way --------
<script>
react.render(user, $('#profile'));
</script>
--- how is that possible? ---
It's all due to using a react template like this one:
<div id="profile">
<div class="mugshot">
<img src="/pictures/knitting_with_50_cent.png" react="attr 'src' mugshotUrl"/>
<span class="caption" react="contain mugshotCaption">Gee, you knit?</span>
</div>
<div class="admin_links" react="showIf isAdmin">
<a href="/ray_guns/mind_control">Mind control ray</a>
<a href="/blowup/moon">Blow up the moon</a>
</div>
</div>
By using a custom HTML attribute to express all template directives, your templates don't have to discard those directives at render time. Thus re-rendering in React is as simple as rendering in the first place, and is totally non-destructive to the node structure you've already built. In other words, all the event handlers, memory references, and dom modifications you might have done will be preserved. For this reason, React is compatible with almost any 3rd party library or jQuery plugin!
In the example above, you might have also used the react.render function to render the template in the first place, but it isn's necessary. Once there's an update to the data, the re-render step is trivial, since none of the rendering instructions have been discarded in the render process.