Simple Modal in React (ES6)

In this snippet I have created a simple reusable Modal component in React in order to explore some of the basic features of this amazing library.

WHAT THE SNIPPET DOES

When the application starts the modal is opened by default. You can change this behavior simply passing opened="false" to the App component when it’s initialized.
After closing the modal you will able to open it again by clicking one of the buttons in the UI. Each button loads a different image in the modal.

KEY POINTS

  • Create reusable components in React
  • Pass properties to components
  • children property
  • render function and state
  • Invoke owner methods from a child
  • Mouse events in React
  • this, bind component methods and arrow functions
  • How to initialize an application with data
  • Inline styling, CSS and flexbox in React

Fabio Biondi

I am an italian developer with over 10+ years of experience in developing custom user interfaces and interactive applications for any screen and device using the latest web technologies - HTML5, SVG, Canvas, ES2015, CSS3 - the latest libraries - React, AngularJS, D3.js, CreateJS - and many other tools - Gulp, WebPack, LESS/SASS but also Sketch, Balsamiq, PS and AI.