There are some specific operations we can do when we work with React and the browser. For example, we can ask our users to enter some information using forms, and we will look at how, in React, we can apply different techniques to deal with them.

We can implement uncontrolled components and let the fields keep their internal states, or we can use controlled ones, where we have full control over the state of the fields.

In this chapter, we will also look at how events in React work and how the library implements some advanced techniques to give us a consistent interface across different browsers. We will also look at some interesting solutions that the React team has implemented to make the event system very performant.

After the events, we will jump into refs to look at how we can access the underlying DOM nodes in our React components. This represents a powerful feature, but it should be used carefully because it breaks some of the conventions that make React easy to work with.

After the refs, we will look at how we can implement animations easily with the React add-ons and third-party libraries such as react-motion. Finally, we will learn how easy it is to work with SVGs in React, and how we can create dynamically configurable icons for our applications.

In this chapter, we will go through the following topics:

• Using different techniques to create forms with React
• Listening to DOM events and implementing custom handlers
• A way of performing imperative operations on DOM nodes using refs
• Creating simple animations that work across the different browsers
• The React way of generating SVGs