16. Component are state machines
You render initially the components based on the
properties
Components
Then you change their state and they will be
automatically re-rendered
17. React renders nested components
with deep hierarchy
Without compromising the performance
Components performance
(thanks to the Virtual DOM)
24. Unconditionally configure your components
Which will help you to debug and test them
Properties are immutable, they are owned by the
parent element
Properties
27. State
Change your components based on user actions or
data from server
When the state is updated, the component
re-renders itself.
State should be considered as private data
32. Events are not attached to the element itself
React is listening for all events at the top level using a
single event listener
When an event occurs, React dispatches it
accordingly
Events delegation
33. React autobinds the method to its component instance
Events autobinding
There is no need to write .bind(this):
<button onClick={this._handleClick .bind(this)}
39. The developer should
be able to replace the
UI entirely
It should be accessibleź
Toolbars should
appear when needed
and where needed
The UI should be
separated from the coreƘ
The UI should be easy
to be styled
AlloyEditor design goals
It should work on all
browsers
45. Instantiating AlloyEditor
Many editors can be instantiated on one page
1 <script>
2 var editor1 = AlloyEditor.editable('description');
3 var editor2 = AlloyEditor.editable('editable');
4 </script>
50. Buttons reordering
1 <script>
2 AlloyEditor.Selections[2].buttons = ['bold', 'italic', 'underline', 'link', 'twitter'];
3 </script>
AlloyEditor.Selections[2] is the text selection.
Instead of hardcoding it, you can also retrieve it by enumerating it inside the array
51. Buttons reordering
1 <script>
2 AlloyEditor.Selections[2].buttons = ['italic', 'bold', 'underline', 'link', 'twitter'];
3 </script>
AlloyEditor.Selections[2] is the text selection.
Instead of hardcoding it, you can also retrieve it by enumerating it inside the array
