CSC/ECE 517 Sping 2023 - E2333: Implement Course Component with React

Expertiza

Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

React JS

ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

Advantages of ReactJS

• It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html divs.
• JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.
• React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too.
• It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.
• It ensures readability and makes maintainability easier.
• It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.

Current Implementation

The current implementation of Courses is in basic html table structure. The basic HTML table structure has several disadvantages such as

Limited styling options: Basic HTML tables have limited styling options compared to modern CSS frameworks. This can make it difficult to create visually appealing and responsive designs.

Accessibility issues: Tables can be difficult to navigate for visually impaired users who rely on screen readers. When tables are not properly structured with the correct HTML tags, it can make it difficult for users to understand the content.

Poor performance: Large tables with many rows and columns can negatively impact page load times and performance.

Lack of flexibility: Tables are not flexible when it comes to adjusting to different screen sizes or devices. This can make it difficult to create responsive designs that work well on mobile devices.