React Shell Commands - askbid-notes/notes-react GitHub Wiki
Babel enables us to use syntax that browsers won't natively recognise by pre-compiling it into syntax that browsers do natively recognise. When used with React, this can (and in our case will) include, but not be limited to, digesting JSX.
<!-- index.html -->
<html>
<head>
<script src="jquery.js"></script>
<script src="animateDiv.js"></script>
</head>
...This code will actually require 3 different fetch requests to the server.
A quick and dirty way around this would be to combine our JavaScript files into one file on the server (bringing this to two requests). Or to copy the code of teh other files inside <script> in index.thml.
Or even better we use Webpack. Webpack lets us combine different files automatically. This means that we can freely import external JS code in our JavaScript files (both local files as well as node_modules installed with npm). We trust that Webpack, before we send clients our JS code over the internet, intelligently packages it up for us.
this:
// reveal.js (pre Webpack digestion)
function reveal(person, realIdentity) {
person.identity = realIdentity
}
export default reveal
// main.js (pre Webpack digestion)
import reveal from './reveal.js'
const gutMensch = {
name: "Andrew Cohn",
identity: "Friendly Neighborhood Flatiron Teacher",
}
reveal(gutMensch, "Chrome Boi")becomes this with webpack:
// bundle.js (post Webpack digestion)
function reveal(person, realIdentity) {
person.identity = realIdentity
}
const gutMensch = {
name: "Andrew Cohn",
identity: "Friendly Neighborhood Flatiron Teacher",
}
reveal(gutMensch, "Chrome Boi")In React, Webpack manages pesky dependency loading for us by pre-digesting our many files' code and outputting a single 'bundle', which contains all of our code, with dependencies properly placed, in one file. An alternative is Browserify
Any time you want your website or app to update without refreshing, you'll need to update the DOM; there is no avoiding it. However, React has some neat tricks for being smart about these updates.
During the initial render, React also uses these elements to build a 'tree' that represents what the DOM currently looks like, referred to as the current tree. When updates are made that would cause a re-render in React, a second tree, the workInProgress tree is created, representing what the DOM will look like. When all updates are processed, the workInProgress tree is used to update the DOM and the current tree is updated to reflect the new updates.
Say, for instance, you have an app with many components, each coloured a shade of blue, and a button, that when pressed, turns all those components to red. When that button is pressed, React will put together a tree containing all the components along with their updated properties, THEN commit all the changes to the DOM at once. This only requires one repaint. Without this design, we could end up with code that updates the DOM for each individual part of the app, one repaint for each part.
React's diffing algorithm is designed to identify changes between what the current DOM looks like and what it will look like (the current and workInProgress trees). Based on the changes it identifies, different DOM updates will be performed to avoid rebuilding unnecessarily.