Ones and Zeros

React: Login pages with JSON Web Tokens      I have finished Shaun Wassell's course on LinkedIn learning on the Authentication process using React and JSON Web Tokens. The course was excellent.  Other technologies and libraries he uses are Mongol DB (for NoSql database), Axios (for fetching), jsonwebtoken (for JWTs), Babel (for more compact syntax in JSX and backward comparability), bcrypt (for encryption), Express (for fetching), OAuth 2.0 connecting to Goggle, Amazon Cognito as an authentication alternative, NodeJs, and sendgrid (for email sending).      The course is over 5 hours long of instruction.  What is really good in the course is the OAuth 2.0, JSON Web Tokens, and Amazon Cognito sections.  What could be improved is his teaching style is hand-typing all the code (having the viewer wait as he types) and talking explaining as he goes.  He could just copy and paste sections and adjust them so that he focuses on explaini...

GENERAL NOTES React is built by Jordan Walke, a software engineer at Facebook, who founded the library in 2011. =============================================================== NAMING - JAVASCRIPT AND REACT: ... is "spread operator" "Arrow Functions" which are => like rest of Javascrpt a.k.a. lambda a.k.a. anonymous functions Syntax: "Arrow Functions" point at parenthesis rather than braces.   =============================================================== OVERALL: WHY REACT? High performance reinforced by Virtual DOM By virtualizing and keeping DOM in memory, React grants outstandingly fast rendering capacities with all view changes readily reflected in the virtual DOM. The specialized diff algorithm juxtaposes former and existing virtual DOM states, calculating the most efficient way to apply new changes without requiring too many updates. A minimum number of updates is then introduced to achieve the fastest read/write time, which results in an overall...

My lecture notes:  REACT AND GRAPH QL RELAYS MEETING    night of 10/10/2023    at ReactJs Dallas monthly  (reactjsdallas.com)    by Rigre Garciandia — React Relay - Unlocking GraphQL's Full Potential    source code: https://github.com/rigrergl/react-relay-demo --------------------------------------------------------- REACT RELAY:      Dev Kit at:   https://relay.dev/   working example:  https://codesandbox.io/s/relay-sandbox-nxl7i?file=/src/TodoApp.tsx   1) Server state management   2) GraphQL partner   3) Used at Scale   Why Use?     A) Locally          a) co-locate          b) component code          c) encapsulation     B) Globally          a) static query generation     ...

 NEXT JS - 4 stars from EBW https://github.com/LinkedInLearning/learning-nextjs-2491193   b  = begin   e  = end lipsum.com reactjs.org    Client-side rendering CSR Jamstack    1) Pre-rendering 2) decoupled        NEW FEATURE in Next.JS - "Fast refresh" - Example: say counter=5 will change the style. So keeps state so no need to refresh if was 5 and change style. Example 2: Would help auth and other types of state. nextjs.org - by Vercel - subset of Jamstack    Server-side rendering SSR  (a.k.a. hydration)    benefit: fast development, flexible and responsive, zero config, rich user experience, SEO, site performance nodejs.org/en/ - dependency on 12.20 or later React developer tools: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en npm or yarn to create npx pages/index.js  (say Route: http://localhost:3000/ ) pages/hello.js  (say Route:...

 CHOOSING A FORM LIBRARY (for custom hooks) formik.org react-hook-form.com usehooks.com

 https://newsapi.org/   click on get API key Json web tokens (JWT) - security features for APIs - good example is Twitter or Facebook https://www.linkedin.com/learning/react-working-with-apis-22613064/initialize-a-react-project?autoSkip=true&resume=false CALLING APIS WITH REACT Chrome or Firefox developer tools - Ctrl + Shift + I React developer tools Postman is great for testing. (Postman.com) materializecss.com  for cards ------------------------------------------------ class News extends Component {   constructor(props) {      super(props);      this.state = { news : [], };   }   componentDidMount() {      const url = 'xxxxxxxxxxxxx=${process.env.REACT_APP_API}'      fetch(url)          .then ((response) => {              return response.json();    ...

 ARROW FUNCTIONS old JS: function DoXXX() { } React: const DoXXXX = () => { } ------------------------------- old JS: export default function DoXXX() { } React: export const DoXXXX = () => { } =========================== ANONYMOUS FUNCTIONS <button onClick={() => {      console.log("hello world");     }}> </button> =========================== TERNARY OPERATORS let age = 16; let name = age > 10 ? "Pedro" : "Jack"; const Component = () => {    return age > 10 ? <div> Pedro </div> ? <div> Jack </div>; }; ====================================================== OBJECTS/DICTIONARIES/HASH MAPS (Short-hand 1) Deconstructor: const person = { name: "Pedro", age: 20, isMarried: False }; const { name, age, isMarried } = person; (Short-hand 2) Assigns if field is the same: const name: "Pedro"; const person = { name, age: 20, isMarried: False }; (Short-hand 3) Assigns all except specific overrides ...

 ============================================================================ Rust and ReactJs Interesting article by Jay Sea: https://medium.com/@Jayseabee/rust-react-part-i-3a33c3da9ca0  PART 1 https://medium.com/@Jayseabee/rust-react-part-ii-76c2ea60a80d PART 2    Source: https://github.com/jayseabee/rust-react-julia Actix crate to listen for GET requests Rust & React & Actix   Javascript fetch command calls the julia-image API endpoint vs. React WebSocket API handler     ============================================================================ Actix and ReactJs use std::io; use actix_web::{middleware::Logger, get, post, web, App, HttpResponse, HttpServer, Responder, HttpRequest}; use actix_web_lab::web::spa; #[actix_web::main] async fn main() -> io::Result<()> {     env_logger::init_from_env(env_logger::Env::new().default_filter_or("info"));     let bind = ("127.0.0.1", 8081);     log...