React officially recommends that you use Next.js[ref], so just do it. It just sets up obvious missing functionality from raw React.
Its main design goal is to reduce DOM changes to improve rendering times.
And an important side effect of that is that it becomes easier to do stuff of the type:and then the new comment easily gets the callback attached to it.
- user creates a new comment that appears on screen without page reload
- comment has a delete button, which is JavaScript callback activated
But React can also be extremely hard to use. It can be very hard to know what you can and cannot do sometimes, then you have to stop and try to understand how react works things better:The biggest problem is that it is hard to automatically detect such errors, but perhaps this is the same for other frontend stuff. Though when doing server-side rendering, the setup should really tell you about such errors, so you don't just discover them in production later on.
- cannot update a component while rendering a different component warning in React
- Rendered more hooks than during the previous render.
- cannot use hooks from helpers:
Examples under: react.
- react/hello.html
- react/hello-func.html: Hello World with a React function component instead of classes. At page load console shows:and then after each click:
Mainso we understand thatonClick MainMaininsanely functions both as the constructor and as the render function in React function components. - react/hello-func-use-callback.html: same as react/hello-func.html but with useCallback. TODO no advantages in this case? When does it help?
- react/hello-without-jsx.html: Hello World in pure JavaScript, without JSX. Exactly equivalent to react/hello.html. Documented at: reactjs.org/docs/react-without-jsx.html Understanding this is fundamental to understanding React.
- By looking at the console, we see all
renderget called every time, even ifpropsdidn't change, but not the constructors.After page load the console contains:Main.constructor Main.render NotMain.constructor NotMain.render NotMain2.constructor NotMain2.renderNote how thepropsofNotMainonly change every other click, butrenderstill gets called every time.In order to makeReactnot re-render when there are not changes, you have to either:- define the
shouldComponentUpdatemethod of class components - wrap functional components in
React.memo
- define the
- react/prop-change-hook.html: same as react/prop-change.html, but using hooks. The notable difference is that functional components don't have a clear constructor/render separation, the function just gets called every time. Then React does some magic to ensure that
useStatereturns the current state, except for the first render where they return the initial value. - react/prop-change-hook-use-memo.html: TODO forgot if this example is useful, was tring to use
useMemo - react/prop-change-child.html: shows what child prop changes do not call render on parent,
Maindoes not show up on console when you click underNotMain - react/hook-from-function-fail.html: TODO got some errors that seemed linked to this on a larger program, but failed to minimize them here
- react/hook-different-number-of-times.html: this illustrates one of the cardinal points of using hooks: you must always call them the same number of times, otherwise it fails with:In the case of
React has detected a change in the order of Hooks called by Main. This will lead to bugs and errors if not fixed.
useState, we can kind of understand why this happens: React must use the order of calls to determine which state variable to return at each point in time. - react/hello-hook-use-effect.html: just checking when it gets called. Happens after every render
handleClick Main useEffect useEffect2 - TODO create a test
\a[react/img-broken.html]
How React works bibliography:
- www.netlify.com/blog/2019/03/11/deep-dive-how-do-react-hooks-really-work/ shows how
uesStateworks under the hood with crazy closures - medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e
His uncle, which Ciro rassembles in many ways, was like that. But he collected physical objects such as wines and stamps. Or even worse, objects that were meant to be collected such Panini soccer sticker albums! This Ciro looks down on.
With computers, knowledge takes no physical space and can be immediately shared with the hole world, and there is great beauty to that, as you can just keep collecting forever without filling up your house.
But of course, physical or not, all attachments futile.
Like other types collecting, once Ciro decides that "he must know everything about a given subject", he will keep coming back to that subject over and over. Not in a systematic way of course, since Ciro is a lazy bastard, but he will keep coming back for a very long time, and eventually become an expert at it.
This compulsive hoarding, together with Ciro Santilli's bad old event memory, are the fundamental reasons for OurBigBook.com.
Minimal React hello world example. As you click:By opening a web inspector, you can see that only modified elements get updated. So we understand that JSX parses its "HTML-like" into a tree, and then propagates updates on that tree.
- one counter increments every time
- the other increments every two clicks
Dummy example of using a React
ref This example is useless and to the end user seems functionally equivalent to react/hello.html.It does however serve as a good example of what react does that is useful: it provides a "clear" separation between state and render code (which becomes once again much less clear in React function components.
Notably, this example is insane because at:we are extracing state from some random HTML string rather than having a clean JavaScript variable containing that value.
<button onClick={() => {
elem.innerHTML = (parseInt(elem.innerHTML) + 1).toString()In this case we managed to get away with it, but this is in general not easy/possible.
React function components do produce shorter code. But they are also impossible to understand without knowing what is their corresponding class component.
Hooks were introduced much after classes, and just require less code, so everyone is using them now instead of classes.
Ciro was even more stupid than as of 2020, and continued to try and hang out with those evil kids to show them he was cool too or that he was strong, and so continued to get hurt.
Advice to his children: stay away from evil people.
The bullied sometimes feels an almost masochistic desire to overcome the bullies' contempt, and to try and either become friends with the bullies, or to overpower them.
You must never give into those thoughts.
If you come across evil people, smile a fake smile to them, and walk away, but never give your back to them, and always be ready to fight.
If they laugh at you, know that you are shit like everyone else, pretend to laugh with them, take their post and repost it on your public profile, and silently stay away from those idiots.
Never show any weakness.
If a fight is likely, always be ready, always have your friends nearby, be as well armed as the enemy, and never be outnumbered.
On the Internet, never care about e-bully posts, either block them immediately, and anyone that likes their posts, or follow Ciro's reply policy.
Call parents or other authorities as soon as there is risk of physical harm. Better a living free pussy than dead or in youth detention for murder. Similar advice applies if you are going to jail I guess.
If a physical fight is inevitable however, ignore Jesus this once and don't give the other face, but rather follow the Talmud and fight all out on the beaches:References:
If someone comes to kill you, rise and kill first.
The Sikh knife, the Kirpan, which Sikhs must carry at all times as a religious obligation, also comes to mind. The Sikh must have been bullied out of the their minds at some point in history, Ciro understands.
Non-violence only works when you have bodies to spare from your followers.
Perhaps it was good to learn those lessons early, before the stakes were too high. Adults fake it much better, and therefore it is harder to learn those lessons from them, but they are still just as evil on the inside.
These experiences might have contributed to Ciro Santilli's self perceived compassionate personality.
Pinned article: Introduction to the OurBigBook Project
Welcome to the OurBigBook Project! Our goal is to create the perfect publishing platform for STEM subjects, and get university-level students to write the best free STEM tutorials ever.
Everyone is welcome to create an account and play with the site: ourbigbook.com/go/register. We belive that students themselves can write amazing tutorials, but teachers are welcome too. You can write about anything you want, it doesn't have to be STEM or even educational. Silly test content is very welcome and you won't be penalized in any way. Just keep it legal!
Intro to OurBigBook
. Source. We have two killer features:
- topics: topics group articles by different users with the same title, e.g. here is the topic for the "Fundamental Theorem of Calculus" ourbigbook.com/go/topic/fundamental-theorem-of-calculusArticles of different users are sorted by upvote within each article page. This feature is a bit like:
- a Wikipedia where each user can have their own version of each article
- a Q&A website like Stack Overflow, where multiple people can give their views on a given topic, and the best ones are sorted by upvote. Except you don't need to wait for someone to ask first, and any topic goes, no matter how narrow or broad
This feature makes it possible for readers to find better explanations of any topic created by other writers. And it allows writers to create an explanation in a place that readers might actually find it.
Figure 1. Screenshot of the "Derivative" topic page. View it live at: ourbigbook.com/go/topic/derivativeVideo 2. OurBigBook Web topics demo. Source. - local editing: you can store all your personal knowledge base content locally in a plaintext markup format that can be edited locally and published either:This way you can be sure that even if OurBigBook.com were to go down one day (which we have no plans to do as it is quite cheap to host!), your content will still be perfectly readable as a static site.
- to OurBigBook.com to get awesome multi-user features like topics and likes
- as HTML files to a static website, which you can host yourself for free on many external providers like GitHub Pages, and remain in full control
Figure 3. Visual Studio Code extension installation.
Figure 4. Visual Studio Code extension tree navigation.
Figure 5. Web editor. You can also edit articles on the Web editor without installing anything locally.Video 3. Edit locally and publish demo. Source. This shows editing OurBigBook Markup and publishing it using the Visual Studio Code extension.Video 4. OurBigBook Visual Studio Code extension editing and navigation demo. Source. 
- Infinitely deep tables of contents:
All our software is open source and hosted at: github.com/ourbigbook/ourbigbook
Further documentation can be found at: docs.ourbigbook.com
Feel free to reach our to us for any help or suggestions: docs.ourbigbook.com/#contact