These online courses will help you understand the basics of the technologies used in the Virtool client.
- Learn HTML
- Learn CSS
- Make a Website
- Intro to Javascript
- Learn ReactJS: Part I
- Learn ReactJS: Part II
-
It is not necessary to follow the official React tutorial if you have already completed the Codecademy courses for React. Make sure you understand the following items in the ADVANCED GUIDES section:
-
Traditionally, changes in the URL would be associated with visiting a new HTML page requested from the server. In single-page applications, rendering of content and communication with the server is done without visiting entirely new pages. Since new pages are not visted, the URL will not change. This is a problem because URLs are very useful for allowing users to use their built-in browser navigation buttons and use links to specific content.
Many modern Javascript frameworks include URL routing functionality. This allows changes in the application state or appearance to be associated with a change in the URL. React does not include routing. Instead a separate library called React-Router used.
Relevant documentation sections are:
-
Redux is used for state management. Many React components in the Virtool client take state from a central Redux data store. Relevant sections of the Redux docs are:
- Introduction
- Basics
- Recipes
- Using Object Spread Operator
- Reducing Boilerplate (ignore async action creators)
- Writing Tests (ignore async action creators)
- Structuring Reducers
-
Redux is not well-suited to handling data asynchronously (eg. AJAX) by itself. There is Redux middleware available for dealing with this problem. We use Redux-Saga. Redux-Saga uses ES6 generators (read about them here. Relevant sections of the docs are:
-
Webpack is used to turn the client source files into single bundled Javascript, CSS, and HTML assets for download by the browser. Relevant sections of the docs are:
-
Yarn is used for Javascript package management. It helps to download and manage dependencies such as
react. -
Web applications typically communicate between the web browser and the server via HTTP requests and responses. Basic information can be found here:
SuperAgent is a client side AJAX HTTP request library that is used to request data from Virtool's API.
Some aspects of the Virtool's Redux data store are determined by server event-driven responses.
-
Jest is the testing framework used for the client side. Relevant sections of the docs are:
-
Enzyme is a testing utility that helps test, traverse, simulate events, and format output for React components.
Sinon is a testing utility that specializes in spies, mocks, and stubs for Javascript testing. It has more features than what Jest provides, and the relevant docs are: