React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both. We will come back to components in a further section, but if you’re not yet comfortable putting markup in JS, this talk might convince you otherwise.

React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

const name = 'Josh Perez'; const element =

;

ReactDOM.render( element, document.getElementById('root') );

function formatName(user) { return user.firstName + ' ' + user.lastName; }

const user = { firstName: 'Harper', lastName: 'Perez' };

const element = (

);

ReactDOM.render( element, document.getElementById('root') );

React elements are immutable. Once you create an element, you can’t change its children or attributes.

React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.