How to build a Modal in ReactJS (Part One)
A four-part tutorial on building an advanced, accessible, and reusable ReactJS Modal
Modals are a ubiquitous part of web and application development. They provide a way to alert or provide information to our users while maintaining simple UI. As long as we do not bombard users with too many modals (in this case it gets annoying and we don’t want that for our users) they absolutely should be embraced and well understood by your everyday developer.
So what will this part of the tutorial cover?
- How to get a basic project started
- Incorporate the state for our modal
- Build the UI for the modal using ReactJS
Let’s begin!
The first step to getting started is getting your project set up. We can use create-react-app to get our boilerplate locally, but for the sake of this example, I will be using sandbox. This way you will be able to jump right into the code I write. I learn through direct engagement and I find it inconvenient to have different learning-based projects stored on your local machine. Follow along to this example here. I will have one sandbox for each part of the learnings project.
