https://app.pluralsight.com/library/courses/react-js-getting-started/

• Stateful function components with React hooks
• More verbose class components
• React's design concepts; JSX and event handlers, data and APIs; React hooks; communicating between components; creating local dev environment

• React 16.8+
• Some JS basics: http://jscomplete.com/js-labs
• Common JS issues when using React: https://jscomplete.com/react-cfp

• Library not a framework to build UIs (not a complete solution)
• React is declarative for 'dynamic data' UIs
• Frameworks have limited flexibility (e.g. conventions) and feature-rich (and so hard to customise)
• "Write programs that do one thing and do it well. Write programs to work together. Write programs to handle text streams, because that is a univeral interface. " Doug McIlory
• React - A "language" to model the state of UIs, not the transactions on them
• The "virtual" browser (vs. DOM API)
• "Just JavaScript"
• React Native allows leveraging same knowledge for mobile apps
• Defines a declarative language to model UI and state. Define the UI in terms of a final state, just like a function. This is widely considered the key strength of React. See http://jscomplete.com/why-react/

1. Components (can be vanilla JS functions)

• Input: props, state | Output: UI
• Reusable and composable
• <Component />
• Can manage a private state

2. Reactive updates

• When the state changes (the Input) the output is updated (the UI)
• React will react
• Updates the browser automatically (the parts of the DOM that need updating)

3. • Virtual views in memory: generate HTML using JavaScript, no HTML template language, virtual DOM/tree reconciliation

• Component types: function (much simpler), class (more powerful)
• props (immutable) and state (mutable) => Component => DOM
• JSX is NOT HTML - JSX is compiled to React function calls e.g. React.createElement() which is shipped to the browser. React can ship these to the browser which React can ship to the browser to efficiently be performed on the DOM in the browser

• A button that records the number of times it is clicked
• http://jscomplete.com/playground
• Install React Developer Tools browser extension
• React Developer Tools displays props and state. State values can be updated in the extension and trigger component update in the app
• Use jsdrops.com links to go to start of each step in this course
• JSX JavaScript library
• Babel - compiles JSX into JavaScript that is executed in the browser, e.g. React.createElement()
• A simple function component - https://jscomplete.com/playground/rgs1.1

• const [counter, setCounter] = useState(5); using a React hook (function components) - https://jscomplete.com/playground/rgs1.3

• Data and functions flow in one drection: from parent component to child components
• props is passed to every component and contains key/value pairs. The values can be data or a function
• A Component design consideration is to only pass data/functions that the component should be concerned with (separaton of concerns)
• When deciding where in a Component to define state, it should in the closest parent component containing all the child components that require access to the state

• Button component refactored for reusability
• https://jscomplete.com/playground/rgs1.6

• jsdrops.com/rgs1.7
• Compare two identical HTML nodes created using inline HTML vs created using ReactDOM.render()
• The HTML generated using React only updates changes in the DOM instead of regenerating the whole DOM node. This is done by React by comparing the previous and new versions of the virtual DOM for differences
• This can be seen in the browser in that the input text cannot be entered into between updates as the whole DOM node is regenerated and secondly by monitoring the changes to the HTML document in Developer Tools - the whole <div> can be seen to be changing for the inline HTML but only the <pre> tag containing the datetime is changing in the React generated DOM node. This is a more efficient way to update the DOM with changes and also uses a simple declarative style of programming to handle the updates rather than having to add imperative code to the inline HTML to calculate deltas.

• A React app is a set of reusable components
• Components are like functions that take in input and state and output an interface in the form of a React element
• React DOM library renders React elements and re-renders them automatically when their in-memory state changes
• Component markup is written using the React JavaScript API. For ease this virtual DOM is specified using JSX rather than using the React JavaScript API directly, which is then compiled into the React JavaScript API which is what is actually delivered to the browser
• Props and State - (props) => {}; [val, setVal] = useState(initialVal); immutable props, mutable state
• ReactDOM.render() - mounts React component in a browser
• React events (onClick, onSubmit, ...)
• Function and class components

• https://jscomplete.com/learn-javascript
• https://jscomplete.com/learn

• {{{}}} - valid JS, nested block scopes
• `{ } - block scopes, c.f. function scopes. variables defined in a block scope are accessible outside of the block. Variables defined in a function scope are not accessible outside of the function scope
• using let to declare variables instead limits access to the block in which it is defined
• nested block scopes can be used to limit access to let and const -defined values within in each scope
• const ensures immutable reference; NB. values of reference types (like arrays, objects) are still mutable!

• Requires multiple tools
• Requires development, test and production environment
• Different renderers - DOM, SSR

• Requires Node.js as CRA is a npm package - Windows installer / Mac Homebrew
• install CRA using npm or npx
• npm start runs newly created React app
• npm run eject - copies all configuration and scripts used by CRA tool permanently to local app

• http://jscomplete.com/reactful - guide to creating own JavaScript development environment
• npm i express - web server for SSR
• npm i react react-dom - React and React DOM libraries
• npm i webpack webpack-cli - module bundler - ships all modules in a single bundle (as browsers are currently unable to work with multiple modules)
• npm i babel-loader @babel/core @babel/node @babel/preset-env @babel/preset-react - compiles JSX to React API calls

• npm i -D nodemon - auto restarts Node after Node changes
• npm i -D eslint babel-eslint eslint-plugin-react

• eslintrc.js - eslint configuration
• npm i -D jest babel-jest react-test-renderer - Jest tests for React
• Prettier - configure to work with ESLint
• Initial directory Structure
• babel.config.js - babel configuration
• webpack.config.js - webpack configuration
• package.json - add tasks under scripts section, e.g. tests, run web server, create bundle
• test with a sample application! App.js, src\index.js, src\server\server.js - see github repo jscomplete/rgs-template
• npm run dev-server and npm run dev-bundle

• http://jscomplete.com/reactful
• npx reactful star-match - barebones app, ejected by default, configuration flat and ready to configure
• npm start - runs webpack AND server ...

• One file per component (will need to import dependences and export component per file)

• Official React docs
• 'Advanced React.js' by Samer Buna
• http://jscomplete.com/react-beyond-basics
• GraphQL - http://jscomplete.com/why-graphql