Re-written [BLAST query page] by React JS library about genomics-workspace HOT 5 OPEN

【Example React project】

• Link: https://reactjs.org/community/examples.html
  • ShoppingCart, testing
  • CartPokedex, searching bar

• My hands-on coding from scratch
  https://github.com/r06942072/pro_emoji
  @gmod-dev
  cd /app/data/chun-hung_dev/pro_emoji
npm start

from genomics-workspace.

【Styling for react frontend】
Option1: styled-components
styles are also part of component

• https://www.styled-components.com/docs/basics
• https://medium.freecodecamp.org/a-5-minute-intro-to-styled-components-41f40eb7cd55
• Testing the CSS, https://github.com/styled-components/jest-styled-components
• the benefit of using styled-components, inheritance
  

Option2: reactstrap
https://reactstrap.github.io/

from genomics-workspace.

【testing】
using Jest + Enzyme

• Test-driven development (TDD) for this project.
  • Follow the idea of TDD, I will create unit.test.js file based on the Functionality list first, and then implement it.
• some library options:
  • Jest + Enzyme
  • Mocha + Enzyme
  • Jest v.s. Mocha : Jest new and easy setup, Mocha mature and more config

from genomics-workspace.

【from JQuery to React】
React is good candidate to handle the event of UI

from genomics-workspace.

【State management library】

• The idea is add some restrictions to state of frontend UI component change, so makes it more predictable.
  • The motivation of using Redux
    link: https://redux.js.org/introduction/motivation
  • There are three fundamental principles if we use Redux
    link: https://redux.js.org/introduction/three-principles
• It is nicer to have a central data store in the react project.
• Share state across react components
• Choosing between: Redux (vs) mobX
  • functional programming (vs) object-oriented programming
  • closer to vanilla JavaScript (vs) harder to understand the underlying mechanisms
  • single store (vs) multiple stores
  • strict, changes centralized (vs) not easy to maintain
  • more boilerplate (vs) less boilerplate
  • easy debug, explicit (vs) unpredictable, implicit
  • maintainable code　(vs) small and simple
  • data update logic is redux-defined (vs) data update logic is developer-defined

from genomics-workspace.