It has been a while since I last wrote a blog and that was during my first phase of studies at Flatiron. Since then, I have learned much of the fundamentals of JavaScript and how to wield them to my advantage during my adventure through the courses. As of recent I have more or less leaped into the JS framework of React and all the nifty tricks that come along with it. While going through my course work there were a few main things that stuck out the most to me. Those concepts are components, hooks and the simplicity of UI creation. With that said I suppose I should elaborate on what they do.
When it comes to React JS the first thing anyone would notice is the importing and exporting of components. Components or otherwise known as modular code play a great role in organization of code. The components themselves are files of code which are also reusable meaning you can import and use that component/code anywhere within your project. That can be useful for a multitude of reasons. An example of this is if you had multiple places in which you need to render previews of a product like on Amazon. Those product cards are constructed in one component which are then imported into other files. Take for instance different category pages or a showcase of recommended products on the homepage. One other great thing that comes from using modular code is that it can be far easier to debug as you work through your projects.
Example of component: 
Example of importing and organization: 
Another really interesting aspect of React is the simplicity of UI creation. For example, my first project was 3 files: index.html, stylesheet.css, and index.js. with that being said all of what I wrote could only be in those 3 and a big problem with that is 1. If I am making a single page project then all my UI creation is done in JS which can be done but it comes with lots of unnecessary and messy code, or 2. Those elements get hard coded into my HTML file which isn't good if I'm doing a single page application. The great benefit of using React for this kind of thing is JSX. It allows the user to write functions that return UI elements without all the .appendchild() and createElement(). Though there may be some syntax differences between JSX and HTML it is a very easier to learn and a big improvement for quality of life.
Example without JSX:
Example with JSX:
The last thing I would like to touch on is the usage of React Hooks. If you haven't dealt with React before chances, are you don't know what a "hook" is and that's okay. "Hooks" can be looked at as just another function that were created to help other programmers. At base level they are a function that have a name that can be imported from within the react library and have special functions to help in common situations. A common one is the hook known as { useState } which allows a user to set and store data locally to specified variables. Those variables can also be passed to other components as needed but in order to do that the { useState } hook must be declared at the highest appropriate level and passed down as needed. Though there are caveats depending on the hook used the more you use and implement them the simpler and more useful you realize they are to work with. For example in my Phase 2 project I use 4 different hooks. I will list them below.
-
{ useState }- used for local data storage through out my project. -
{ useEffect }- used to fetch data for my db.json when certain conditions were met. -
{ NavLink }- made it nice and easy to implement client-side routing into my project -
{ useHistory }- allowed for easy redirection after submitting a post. These hooks are of great use because they allowed me to write less but have more overall functionality and efficiency in my project.
I think that overall React is a great framework and I have enjoyed working with it. I look forward to learning more about it as I progress in this field. I hope that anyone reading this can take something away or possibly related to what I have explained and/or described. Thank you for checking out my blog.
Top comments (0)