Hey! I'm on a mission to make 100 React.js projects ending March 8th. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!
Link to today's deployed app: Link
Link to the repo: github
Today was another mini-project as I continue to get used to the new job and put a lot of energy and computer time towards it. That said, I really love this exercise as it clearly demonstrates how to properly use the Context API and also shows off using Material UI and a new way of labeling files in a React project.
Tutorial here: link
This project had two dependencies: @material-ui/core and @material-ui/icons. I suspect that together these are fairly large packages because I noticed that today's project took substantially longer than normal to compile on my local server, but the results are great.
The Lesson
Context API is a set of information shared optionally across your React application. A provider component creates a way to change context (and therefore app-wide state, in a way) to any sub-components that use it. A consumer component simply provides a way to consume data from the app-wide context and display that data.
We instantiate them by setting a new variable equal to React.createContext that we'll call SharedSnackbarContext. We then create the provider and consumer with SharedSnackbarContext.Provider and SharedSnackbarContext.Consumer respectively, then export both for use.
Both of these components are defined within a context file. I stored this file in a providers folder because that's how Bob Ziroll did it in his excellent React Bootcamp. You can of course put everything directly in /src if you like.
Material UI
I hadn't used Material UI before so it was a trip to see it used in this little project. The way the author used it was to import components like IconButton and Snackbar from @material-ui/core. These components are then given styling props like primary for blue and secondary for red in the color prop.
The Google/Angular style of coding revealed itself also in the naming of components, which was interesting. The author used a Javascript labeling scheme whereby components were labeled Title.Component.js and the context file was labeled Title.Context.js. VS Code then automatically labeled these as Angular files, which was interesting.
Anyway, I recommend this project for anyone looking for an easy way to practice Context and a soft introduction to Material UI. I'm not a huge fan of the Material UI theme as it makes everything look like a Google product in my opinion, but it's pretty cool that the Javascript and CSS are both built into the components in @material-ui/core and it's so easy to use. As a Bootstrap fan I can attest that these few pre-built components were easier to implement than Bootstrap's React components, in my opinion.
5/5 stars would code again.
Top comments (0)