React JS – Infinite Sub Menu

I’m going to mention right off the bat this tutorial doesn’t end with you having a ready to use menu. BUT.. it shows you a simple concept you can use to create the elements necessary for the old school infinite sub menus.

Infinite Sub Menus Were All the Rage

It’s been quite some time since I’ve seen infinite menus used. Maybe it’s because people are becoming more mobile conscious in their design decisions. The only way I could see infinite sub menus be mobile friendly is if the sub menu completely replaced the previous one.

It’ll probably seem ridiculously obvious once you see the solution but it may come in handy in the future. Here are two React components; List and ListItem, that can be used to accomplish infinite sub menus.

The Components

 

 

Notice the second import statement. My components are in a directory structure as follows:
-components
–List
—index.js
—List.js
–ListItem
—index.js
—ListItem.js

Because I’m a sucker for modular organization even with simple examples.

Now for the ListItem component:

 

 

Basically the solution comes down to the line
{ items && <List items={items} />}.

We’ve created sort of a circular dependency where a List, has ListItems, which can potentially contain another list. If you’re not sure what’s happening, React is looking at the items variable, if it does not equal undefined, it will continue to the other half of the AND (&&) comparison displaying a new list.

This is also true for vanilla JavaScript. If the first half of an AND comparison fails it will not bother with the rest.

Finally, I’ll give you a quick example object passed to the List component.

That’s all there is to it. Let me know if you have any issues with the following code.

React License Flip-Flop

Has anyone else been following the React license flip-flop? They had me worried for a bit. I’ve dedicated some time and effort to engulf myself in this environment and it was nearly stripped away with a blog post.

Facebook had changed React’s license to a BSD+Patents license.  The Apache Software Foundation did not like the grant in the license because it was “imbalanced towards the licensor”.[1] This sounds a little sneaky, but according to a post released by Facebook it was to protect themselves from “fighting frivolous lawsuits”.[2] This I could understand.

Facebook and a multi-billion dollar company. Which is likely a huge target for patent trolls and others looking to make a “quick”, not really though, buck. The BSD+Patents license was not well accepted like I mentioned before.

The Apache Software Foundation had listed the license under Category-X. Licenses that should not be included with Apache products. This is a pretty big deal, because to me, it sounds like you would not be able to license your software under the Apache License v2.0 for example if it included React source. Usual disclaimer, I’m not a lawyer, yada, yada, yada… lobster bisque.

I’m sure there are those who don’t care about the change. But if you’re developing software for millions of people, it’s something that needs to be taken into consideration. The biggest thing that stood out to me was a post by Matt Mullenweg.[3] He’s one of the founding developers of WordPress. If you can’t tell, you’re on a WordPress site right now! I know it’s the default theme…

In Matt’s post he announced one of their largest open source projects would be rewritten from React due to this license change. That’s crazy, scary, and frustrating all at once.

For those of you who don’t know, Gutenberg will be a new editor developed by WordPress, check it out!

Rewriting an application due to a license change just sucks. The scary part is that this could happen at any point to other libraries. Makes you kind of feel like Tweek from South Park.

But recently Facebook had decided to change their licensing again. And I’m sure glad they did. A post about a week ago from Facebook revealed they would relicense some of their open source projects under the MIT license.[4]

I’m very happy for the change, though in the post Adam did not sound as delighted. I hope they can leave their projects under the MIT license because I believe it will be adopted much faster this way. As for the patent trolls, they need larger penalties for losing, IMO…

[1] –WHICH LICENSES MAY NOT BE INCLUDED WITHIN APACHE PRODUCTS? –  https://www.apache.org/legal/resolved.html#category-x

[2] – Explaining React’s License – https://code.facebook.com/posts/112130496157735/explaining-react-s-license/

[3] – On React and WordPresshttps://ma.tt/2017/09/on-react-and-wordpress/

[4] – Relicensing React, Jest, Flow, and Immutable.jshttps://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/

I’ve FInished Taking the Online Course – Intro to ReactJS

Full disclosure, I wrote my previous blog post about the Intro to ReactJS course a week or so after I started it.

For those who didn’t know, I started an edX course not too long ago. I chose ReactJS because I was already familiar with it but was hoping to find a few gems.

Intro to ReactJS is Basic, But Good!

Unfortunately because it was an introduction course, there wasn’t much to be learned from the content. However, the discussion boards were very good.

At the end of each module you’re asked to complete a lab assignment. This typically consisted of a small application showcasing recently learned aspects of ReactJS.

A graded mark was given out to those who reviewed and critiqued others’ work. This was a great way to see different ways a problem could be tackled. Having fellow programmers review my work was great too. I’m not perfect and the reviews gave me a better idea of how I should be designing ReactJS applications.

I was going to blow away my peers…

Since I was familiar with the library, I may have been a tad over-confident. The first module I designed my components in a way to be reused in multiple future situations.

You may think this is good. That’s how components are meant to be written(not really true). If the components needed to be reused later there would be very little to no refactoring.

YAGNI

The thing is, I knew this would be the last time I would open the source. There was never going to be any more updates to the application. This is where I should have thought of YAGNI (You Aren’t Gonna Need It).

Don’t get me wrong, thinking ahead and preparing for change is important. But what I really should have been considering, is the possibility of needing the functionality I was introducing. Which was zero.

It was a good learning experience and I’m glad a fellow peer had called me on it.

Course Content

The content I thought was well put together. This was my first edX course and it won’t be my last. I’ve already enrolled in another one.

The content includes both written and video media of the same content. This allows you to consume it how you like.

Personally I stuck with the text just because it was slightly faster.

The assessments (tests) were not bad. There were definitely some question/answers I thought could be improved. For the most part it was well done though.

The course was listed as an intermediate course as it should be. If you’re not familiar with JavaScript and HTML I don’t think you’ll do well. This course stays strictly on the topic ReactJS which was really nice. No fluff, just focused content.

I hope this helps anyone considering looking into edX’s courses, maybe I’ll see you on the discussion boards.

Have experience with other courses? Please leave a comment and let me know about it! Also if there are some resources you’d like to share, that would be great too.

I’m Taking an Online Course – Intro to ReactJS

I was browsing some of my favorite info hot spots when I came across a list of resources. They were free learning resources containing mainly books and online courses.

This sparked a memory of me taking some courses at Udacity. I had first come across it a few years back and took the Intro to Computer Science course. This course was (is?) built around using Python to create a web crawler.

Man reading a book beside a laptop

Free Learning for All

I thought the Udacity course was very well done. Especially being a free online course. Assignments were marked automatically. YouTube videos were interactive and allowed you to answer multiple choice questions.

It was a great experience.

I’m always looking for new resources to learn from. Every day I venture to PacktPub’s free learning page to see what free book I can get my hands on.

I’ll be honest, the majority of them will go unopened. But whenever I come across a topic I’d like to dig into I’ve got a heap of books that may help.

Some more great resources are Hacker Bookshelf and Leanpub.

Leanpub is a hidden gem I had come across nearly a year ago. Not everything is free. But I have read some good free content from this site.

If I ever create a book, I’ll likely use this platform to publish it.

Back to the Online Course

Trailed off a little there, but hopefully some of those links will be useful to someone.

So I decided to try out an online course on ReactJS.

Why ReactJS?

Well, I do have experience in ReactJS, but I want more. It seems whenever I read tutorials, books, watch conferences, etc. I learn something new about ReactJS.

There’s just so much to learn in React. And not every resource will cover things necessary for a production ready application.

The course is created by Microsoft but hosted on edX. I’m not paying for the certificate because I don’t feel I have the need for it. But I will audit the course and let others know how it was.

So, my journey through Introduction to ReactJS starts now.