Simple Modal in React (ES6)

Go to Source

See the Code
See it Full Page
See Details

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

This Pen uses: HTML, CSS, Babel, and Babel