React is easy. But here are a few key concepts you should know in beginning of your React journey:

Just the View

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.

Understand 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.

React's virtual DOM

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).

State vs Props

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.

Use of Keys

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.

Controlled Vs Uncontrolled components

You need to understand the difference between value and defaultValue in form elements. React docs has a pretty nice explanation. Do check it out.

JSX Attributes

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.

Pay attention to HTML attributes

In React :

• HTML attributes are camel cased (e.g. 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.

Quite agree with @sandeep, but there a few more things I struggled with.

Component Lifecycle

When loading data asynchronously, or when dealing with props changes, we'll typically need to hook into one of the Lifecycle methods to deal with it. Picking the right one is tricky, it's best to understand when each of these are called by putting lots of log messages in each of them, and trying out different things.

Routing

Although I used React-Router, I am not sure this is the best choice. I struggled with programmatically changing the route, had to read lots of example code to find out the right way to do this.

To Flux or not

This is a tough decision. I decided not to use flux for my app, and it worked out OK. I am not sure I agree with most of the advice out there that recommends using Flux from day one.

The concepts and syntax are pretty easy to get into. What I found hard was the initial setup of a project before you actually start coding your own app logic... will it be webpack or gulp? why doesn't webpack dev server run on windows? how do I throw babel into the mix? do I use es5 or es6? will I write my app using only components or will I use a micro-architecture? which one will I use? will it be angular? will it be flux? will it be meteor? how do I use css with it? what is the developer-designer workflow? often the person "converting" the design into html & css will not be the React developer so how do you maintain and streamline changes? do you use templates? Will it render on the server? on the client? will it be universal? Which flux implementation will I use and why? is there a good seed project/example/boilerplate to demo a full app? see - there are way too variants to get started as oppose to say Meteor where in one line of code you have a full bloom project already set up and ready to go letting you focus on YOUR app...

@sandeep and @vasan covered everything.

I would like to add few things .

ReactNode, ReactFragment, ReactElement, ReactText

Virtual DOM is tree a of ReactNodes

React Fragment is array of ReactNodes

ReactNode can be ReactElement or ReactText

React Component's render method should return a ReactElement