Trying Facebook React: CSS Color Names App
Finally, I've been able to give myself some time to try React. It's been fun to playing with. I'm looking forward to use it in actual products.
What is Facebook React?
Heres from the Facebook React Docs:
First attempt on React: "CSS Color Name App"
The idea of the app is to list CSS names and display it with a preview box. There is 146 colors in the list. 10 will be chosen randomly at the initial load. You can add more colors or sort the colors by the date appearance of the color or by the name of the color. The random colors is not necessarily unique, so some color can appear twice or more.
Therea are few things that I learned from creating app.
- JSX is cool. Very convenient to use. Its not exactly the same as HTML, but its very similar. E.g. to wrote class attribute you use
- All you need to do in React is store your data in the component state. Then, If you modify the state (using
this.setState()), React will automatically run the components
render()method. Its like Data Binding in other MVC Framework. You wont need to manually update the DOM from other method other than
- If you want to use React Animation,
ReactCSSTransitionGroup, don't forget to add the
keyattribute in the element. The key needs to be unique, or your animation wont work.
- ReactCSSTransitionGroup element will automatically add class attributes during the event add and remove. All you need to do use the class name in the your css. E.g.: if the code is
<ReactCSSTransitionGroup transitionName="items">, it means it will add:
.items-enter, when the element added for the first time.
.items-enter.items-enter-active, added immediatelly after the items-enter added.
.items-leave, when the element is about to be removed from the DOM.
.items-leave.items-leave-active, added immediatelly after the items-leave added.
Thats it I think. You can play with this furthermore if you want to in My Codepen.
Update on Feb 27, 2015 — Theres an updated post on this, see React Demo: CSS Color Names v.02.