Notes: First Steps with React

First Steps with React

by Mike Mathews - Nov. 14, 2023

Event: ReactJs Dallas ( https://www.meetup.com/reactjsdallas/ )

Speaker: Mike Mathews

Date: Nov. 14, 2023

 

   I was amazed that Mike did the talk with no outline.  As an expert, he just knew React so well that it did not bother him to wing it. 

   Overall, Mike was suggesting to NOT use the older commands since they were created nine years ago and have not been extended.  These older commands are:

          npm create-react-app myAppName

          npm create-react-component myComponentName 

  His suggestions to create a React application were: 1) Next.js, 2) Remix, 3) Gatsby (CMS) (that he used), 4) and Expo (for React Native apps).  

 Also, Mike talked about in general terms the challenges of getting the environment setup such as the npm or npx.

Not in Talk

  Overall the talk brought up a lot of libraries I needed to research further.

  Gatsby ( gatsbyjs.com ) is a static site generator that leverages React. Static websites are the original website: just HTML, CSS, and JavaScript. They are not rendered during runtime; there is no server-side code, no database, etc. To boost performance, Gatsby loads only critical HTML, CSS, JavaScript, and other data. Once loaded, it prefetches resources for other pages you might navigate to. Gatsby uses GraphQL to manage data.  In August 2023, Gatsby and Netlify merged.  Gatsbyhas a createPage command that one would use.

   Remix ( remix.run ) has only one way to pull data: loader.  Remix focuses on nested routes and dynamic pages. Remix can prefetch any page because there was no architectural divergence for data loading. Since Remix uses HTML's link prefetching so the browser does the work rather than Remix. Remix does the creation via 

npx remix build

 or 

npx create-remix@latest --template remix-run/remix/templates/remix-tutorial

   

   Vite - It is interesting that Mike did not mention Vite.  ViteJs (pronouced Veet) I have seen recommended: "I prefer vite (and this is what the React document currently recommends), because it's faster for development and easier to configure."  Source: https://www.freecodecamp.org/news/usestate-vs-redux-state-management/ .


 

Comments

Post a Comment

Popular posts from this blog

Upgrading to .NET8 from desktop versions 4.8.X

Image
Upgrade to Latest .NET OVERALL     Problems and differences encountered taking applications from .NET 4.8 desktop to .NET 8 . SUGGESTION    Rebuild the solution and project files from scratch with latest .NET 8. PROBLEMS APIs    On later .NET APIs (post 4.8 desktop), you need to be extra carefully about how the inbound objects are declared.  So if integer in Postman, then must be integer in object.  In older .NET, they accept properties as strings.       Example - Say body in Postman is:          {     "SettingData" : 31000 }    Pretend endpoint method is: [HttpPut("cache/resettimer")] [Produces("application/json")] [ProducesResponseType(typeof(ResetCacheResponse), Status200OK)] public async Task<HttpResponseMessage> MyMethod ([FromBody] InputData input)    Later .NET must be: public class InputData { public int SettingData { get; set; } } ...
Read more

JSON Web Tokens

Image
 JSON Web Tokens (JWT)   A JSON Web Token (JWT) is commonly used for authentication and authorization in web applications and APIs. Essentially, JWTs encode info about a user or entity into a JSON object, which is then digitally signed and/or encrypted.  A JWT consists of three parts, separated by dots (.):  1. Header: Contains metadata about the token, such as the signing algorithm (e.g., HMAC SHA256, RSA SHA256) and the token type (JWT).  2. Payload: Contains the claims, which are statements about an entity (e.g., user ID, role, expiration time).   3. Signature: Verify that the JWT sender is who they claim to be and that the message hasn't been tampered with.  How it works:   Authentication: A user logs in, and the server creates a JWT containing user info and other relevant claims.    Token Transmission: The server sends the JWT to the client (e.g., browser).    Subsequent Requests: The client includes the JWT in the au...
Read more

GHL > Set website so shorter URL address

Image
GHL > Set website so shorter URL address Background:  In GoHighLevel, you can  set a specific page as the default page   for your website or funnel, essentially making it the "index.html" equivalent for your domain. This page will be the first one displayed when someone visits your domain without specifying a specific page path.   Example:      1) GHL > Site > pick your funnel or website > Edit it.       2) Notice where it puts the website:     3) If my  https://aiappointmentbooker.com/  is not working but works when I go to  https://aiappointmentbooker.com/home-page-3213  like above, then you need to fix your index.html by doing these steps. Here's how you can do it: Go to Domains:  In your GoHighLevel account, go to  Settings > Domains . Find and Edit Your Domain:  Find the domain you want to configure and click on the edit icon next to it. Set the Default Page:  Set...
Read more