React is easy. But here are a few key concepts you should know in beginning of your React journey:
React is just the view. I know this has been repeated many times. I am just reinforcing it so that you understand React just takes care of your UI and doesn't make any assumption about your architecture.
setState()If you are from AngularJS or some other background, you may wonder how React re-renders UI. For example, Angular 1.x has a different way of re-rendering UI - It uses dirty checking to see if DOM needs to be updated. In React, you need to call setState() from within the component to trigger an update.
The markup you return from component's render() function is not the DOM. It describes how the DOM looks at any point of time. When you call setState(), React utilises its diff algorithm to see which parts of the DOM needs to be updated (instead of re-rendering the whole UI).
The state of parent component can become the props for a child component. When the component's state changes, the change will be propagated to the child which will trigger a re-render. Some of your components will be stateful while some will be stateless. Read the docs to know more about whether components should have state or not.
When you are looping over an array and rendering components remember to use key prop. Also make sure the key is unique and avoid using array indexes as keys.
You need to understand the difference between value and defaultValue in form elements. React docs has a pretty nice explanation. Do check it out.
Some attributes like style expect an object. For example, the following will not work :
render: function () {
return <div style={background-image: url('some image')}></div>
}
Instead, you have to pass an object to style which is done as following :
render: function () {
return <div style={{backgroundImage: url('some image')}}></div>
}
Also note that it's backgroundImage and not background-image.
In React :
onClick, onChange etc).class is written as className and for is written as htmlFor.style attributes expects an object (use double braces {{}}).I will update this answer if I think of some more gotchas. If you are getting started with React, be sure to read this story by @vasan.