Tutorials and lessons:
Fixes for some common issues:
Introductions/tutorials:
JavaScript is typically executed in one thread only. This means that long running operations like API calls, database queries and file reads/writes should be executed asynchronously. That is, the single execution thread should not wait for an API call or database query to complete. The simplest way to achieve this is to use async/await:
You should take the single threaded model into account also when processing a large amount of data. In such case you should break the execution in smaller chunks. This way you reserve the single thread only for a small period of time at once, and you also avoid loading large amount of data to memory at once.
In React your UI consist of a component tree. For example:
App
TopBar
LeftDrawer
Router
Posts
PostForm
SubjectField
AuthorField
ContentField
AddButton
PostList
Post 1
Post 2
Post 3
Post 4
...
Reports
...
SearchRouter
SearchPosts
...
SearchImages
...Most of these components should be presentational. That is, they know nothing about application state. They only render themselves by the properties that receive from their parent component, and they also pass along some of the properties to their children. If a presentational component contains some controls that should execute application logic (a button for example), the presentational component typically just calls a function, that it has received from its parent component as a property, when user uses that control.
Some of the components are containers. Container components know about application state, and about operations that are used to alter that state. In a simple application each container component may implement application logic and hold application state inside the component itself by using the state mechanism provided by React. In a more complex application, however, the application state and logic should reside outside the container component, and this is what libraries like Redux and redux-saga are meant for: When should I use Redux.
Additional libraries used in example implementation:
TODO: In the future, use React hooks instead of Redux? Or use Redux with React hooks? Provide React hooks tutorials?
TODO