Notes on: Learning Bootstrap, React templates; Misc. notes

Last updated on 11 Dec. 2024
My post: Tutorial links for Bootstrap, Next.js, TypeScript and React Native,  https://raviswdev.blogspot.com/2024/04/tutorial-links-for-bootstrap-react.html has some initial info. on this topic. 
Additional post of mine having some info. on Bootstrap in section with 'Bootstrap' title: Learning Full Stack (MERN) Web App Development through Free Online Tutorials – Organized Notes and Log,  https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html.

This post mainly covers a deeper dive I am making into Bootstrap but it also has some other miscellaneous stuff.

Git Clone Branch: A Step-by-Step Tutorial, https://www.datacamp.com/tutorial/git-clone-branch-tutorial
git clone --single-branch --branch <branch_name> <repository_url>

Yarn related:
'corepack enable' command needs Administrative login.

Yarn Package Manager Crash Course, https://www.youtube.com/watch?v=g9_6KmiBISk , 22 mins, Jan. 2018
Yarn commands covered in video .. info. file: https://gist.github.com/bradtraversy/9bdab9c9a0bf94e2c6952d3f89e9e350

=================
VSCode extensions provide completion Intellisense for Bootstrap classes but I could not get an extension or figure out how to get an extension to show underlying CSS code by hovering on top of the Bootstrap class (which, IIRC, is what the Tailwind extension does for Tailwind classes).

One roundabout but still workable solution is to look up Bootstrap source code for the classes. I created a folder bootstrapv5.3.3 in ....\VSCode\HTML-CSS-JS\bootstrap\ on my PC, which is a copy of bootstrap folder from node_modules folder of a project using Bootstrap v 5.3.3. It has the source code for v5.3.3 and may be useful for me to check underlying CSS used in Bootstrap for some of its classes. The search in files feature of VSCode may be useful here.
Within the bootstrapv5.3.3 folder, the following files are important for this lookup:
dist\css\bootstrap.css ... sample code
:root,
[data-bs-theme=light] {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
...
...
.display-3 {
font-size: calc(1.525rem + 3.3vw);
font-weight: 300;
line-height: 1.2;
}
@media (min-width: 1200px) {
.display-3 {
font-size: 4rem;
}
}
----
dist\css\bootstrap-utilities.css ... sample code
.pt-5 {
padding-top: 3rem !important;
}

.pe-0 {
padding-right: 0 !important;
}

.pe-1 {
padding-right: 0.25rem !important;
}
----

As seen from above sample code, the underlying CSS can be seen. About CSS variables which seem to be heavily used in Bootstrap source code, here's an article having simple explanation of it: How to Use Variables in CSS: CSS Custom Properties, https://www.sitepoint.com/how-to-use-variables-in-css/, June 2022.

I could not figure out how to get HTML CSS Support VSCode extension to work in ReactJS for Bootstrap classes autocomplete (it works for HTML and Bootstrap).
Intellisense for CSS classnames in HTML by Zignd VSCode extension supports Bootstrap classnames autocomplete in React JS. Ref: Best VS code Extensions for Web Development, https://dev.to/shubhamtiwari909/best-vs-code-extensions-for-web-development-2lk3

-----------------------------------
21 Oct. 2024 (notes over past few days)

'yarn list --pattern react' worked
react@18.3.1
yarn list --pattern bootstrap
bootstrap@5.3.3
----

What’s the Difference between Tilde(~) and Caret(^) in package.json?, https://betterstack.com/community/questions/difference-between-tilde-and-caret-in-package-json/

"react": "^18.2.0",
Above line specifies latest version in v18. So I got react@18.3.1 on running yarn install and I think it would be the same for npm install as well.

===============

For Bootstrap learning, I am doing a 2nd round of: Bootstrap 5 Crash Course, https://www.youtube.com/watch?v=Jyvffr3aCp0 , around 1 hr. 11 mins by Web Dev Simplified, Aug. 2022. I think I am able to understand it much better in this round as against my first round some months ago (around April 2024), and that is probably due to my CSS knowledge having improved and me having fair amount of exposure to Tailwind.

I also am finding it much easier to go through the official Bootstrap docs: https://getbootstrap.com/docs/5.3/getting-started/introduction/ . I quickly went through Layout pages, Content pages and part of Forms. I need to finish Forms and then quickly go through Components, Helpers and Utilities.

=================

Find the version of an installed npm package, https://sentry.io/answers/version-of-installed-npm-package/

I used:
npm list react
npm list bootstrap

They worked as expected.

======================

How to set the PUBLIC_URL variable in Create-React-App, https://bobbyhadz.com/blog/create-react-app-set-public-url

Create React App: Advanced Configuration, https://create-react-app.dev/docs/advanced-configuration/ : "PUBLIC_URL": "Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in package.json (homepage). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application."

----



By default, Create React App produces a build assuming your app is hosted at the server root.

To override this, specify the homepage in your package.json, for example:

  "homepage": "http://mywebsite.com/relativepath",
This will let Create React App correctly infer the root path to use in the generated HTML file.
----

Bootstrap icons home page: https://icons.getbootstrap.com/
icofont, 2400+ free, meticulously crafted icons, https://icofont.com/

React sw. dev. using templates

Article(s) on React Templates:
What Is React Template? React Template Definition, https://flatlogic.com/blog/what-is-react-template-react-template-definition/ , Dec. 2020

How React Templates Enhance Web Development Efficiency, https://www.dhiwise.com/post/how-react-templates-enhance-web-development-efficiency , Oct. 2023


How to Make Applications Faster and Easier Using Free React Templates, https://blog.wrappixel.com/how-to-use-free-react-templates/ , July 2021

Nice short video showing that the free Material UI React templates are more like individual components: React & Material UI #9: Using MUI's Templates, https://www.youtube.com/watch?v=GsSnfTKn8To , 7 min. 22 secs., Apr 2020 by Anthony Sistilli.

I understand these templates as pre-built code components with UI styling.
Seems like a very useful video: Top 7+ Best Free React.js Admin Dashboard Templates on Github You Must Use for 2021, https://www.youtube.com/watch?v=aT4hBwdoEyw, 12 min. 23 secs.

Am trying out the #1 template from above video list:
Code: https://github.com/0wczar/airframe-react  .. npm install failed. Lots of source code is available but as app does not run, don't know if it will be useful.... Further, perhaps it is better to invest time in Next.js templates instead of React templates.

Now am trying out this Next.js admin template: https://nextjstemplates.com/templates/nextadmin . The demo is quite impressive but the free download is for basic version. ... npm install succeeded but npm run dev as well as npm run build failed.

Some more React template vendors:
  1. The free components are not so impressive: https://mui.com/material-ui/getting-started/templates/ some of which are free. 
  2. https://themeforest.net/user/pixelwibes/portfolio - all paid templates.

--------------


---------------

On my PC: ...React\DaveGray\RaviAddn\CodeAlongWithVariation\cawv-1004-blog-custhooks\src\hooks\useAxiosGet.js seems to be first stable version of axios custom hook.

Notes on a useAxios custom hook provided in a React tutorial video, https://raviswdev.blogspot.com/2024/02/notes-on-useaxios-custom-hook-in-react.html seems to have the final version of my code variation of axios custom hook with signal and AbortController. But I don't think I should suggest that for usage in a live project as I don't know if it is going too far. 

Also, does it make sense to use the hook with loading info. for methods other than get like post? See the article and comments: useAxios : A simple custom hook for calling APIs using axios, https://dev.to/hey_yogini/useaxios-a-simple-custom-hook-for-calling-apis-using-axios-2dkj ... It shows an example of using it for Post. I think it does make sense to use it for Post, Patch and Delete too, as we can then give the user the message of 'processing' or equivalent ('adding'/'updating'/'deleting') instead of 'loading'.

========

SCSS seems to be same as: Sass, https://sass-lang.com/ [Sass: Syntactically Awesome Style Sheet]

=========

react-bootstrap, https://react-bootstrap.netlify.app/ , "React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery."
[In component file:]
import Alert from "react-bootstrap/Alert";
...
      <Alert dismissible variant="danger">
        <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
        <p>Change this and that and try again.</p>
      </Alert>
...
----
[In App.js:]
import "bootstrap/dist/css/bootstrap.min.css";
-------

That worked as expected.
===========================

CSS files imported into App.js or index.js seem to be available across whole React app.

----


I tried out a US states example from the above, modified for (few) Indian states, and it seems to work well for straightforward case. Related code is given below (ASDD -> Auto Suggest Drop Down):

import React, { useState } from "react";
import Form from "react-bootstrap/Form";
import { Typeahead } from "react-bootstrap-typeahead";
import "react-bootstrap-typeahead/css/Typeahead.css";
import "react-bootstrap-typeahead/css/Typeahead.bs5.css";

function StatesASDD() {
  const [singleSelections, setSingleSelections] = useState([]);
  const [multiSelections, setMultiSelections] = useState([]);
  const options = [
    "Andhra Pradesh",
    "Karnataka",
    "Kerala",
    "Maharashtra",
    "Orissa",
    "Tamil Nadu",
    "Telangana",
  ];
  return (
    <>
      <Form.Group>
        <Form.Label>Single Selection</Form.Label>
        <Typeahead
          id="basic-typeahead-single"
          labelKey="name"
          onChange={setSingleSelections}
          options={options}
          placeholder="Choose a state..."
          selected={singleSelections}
        />
      </Form.Group>
      <Form.Group className="mt-3">
        <Form.Label>Multiple Selections</Form.Label>
        <Typeahead
          id="basic-typeahead-multiple"
          labelKey="name"
          multiple
          onChange={setMultiSelections}
          options={options}
          placeholder="Choose several states..."
          selected={multiSelections}
        />
      </Form.Group>
    </>
  );
}

export default StatesASDD;
----
Usage of above component:
import StatesASDD from "../statesASDD";
...
      <StatesASDD />

========================================

How to set auto-suggest on search as drop-down in the official Bootstrap site ?, https://www.geeksforgeeks.org/how-to-set-auto-suggest-on-search-as-drop-down-in-the-official-bootstrap-site/

=========================================
29 Oct. 2024

How to Implement React Autocomplete Input in Your Next Project, https://www.dhiwise.com/post/how-to-implement-react-autocomplete-input-in-your-next-project

Simple HTML providing the "autosuggestion" feature (as far as I can understand): https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist 
Why can't the above be used instead of a React component like react-bootstrap-typeahead ? Am I missing something here.

10 Autocomplete Search Best Practices – How Predictive Search Will Generate More Revenue for Your Store, https://www.prefixbox.com/blog/autocomplete-search/
Autosuggest vs Autocomplete – What’s The Difference?, https://www.prefixbox.com/blog/autocomplete-search/#7d64fc5cef89

(HTML, CSS and lot of JS) How TO - Autocomplete, https://www.w3schools.com/howto/howto_js_autocomplete.asp

==========================
1 Nov. 2024
setAge(a => a + 1);

...


json-server --id customId testDb.json

Structure of testDb.json file: $ cat testDb.json

{
  "messages": [
    {
      "customId": 1,
      "description": "somedescription",
      "body": "sometext"
    }
  ]
}

======================

Notable differences with v0.17
id is always a string and will be generated for you if missing

======================


MySQL syntax:
CREATE TABLE Persons (
    Personid int NOT NULL AUTO_INCREMENT,
    LastName varchar(255) NOT NULL,
    FirstName varchar(255),
    Age int,
    PRIMARY KEY (Personid)
);
=========================


INSERT INTO table_name (dateColumn) VALUES ('2023-12-31');
===========================

3 Nov. 2024

To start mySQL and required other sw like Apache and PHPMyAdmin:
1) Run D:\xampp\xampp-control.exe (path on my PC) and then start Apache and MySQL in it [Ref: Section 'Step 2: Start the modules and test your server' of How to Install XAMPP and WordPress Locally on Windows PC, https://themeisle.com/blog/install-xampp-and-wordpress-locally/ .]
OR 
Run D:\xampp\xampp_start.exe
2) Go to http://127.0.0.1 or http://localhost in browser

3) In displayed dashboard page, click on phpMyAdmin link in top menu bar.

...


See answer starting with "This is the way I have used to connecting MySQL workbench to Xampp MySQL." in "Using XAMPP and Mysql Workbench together", https://stackoverflow.com/questions/57774867/using-xampp-and-mysql-workbench-together

Was able to install MySQL Workbench, connect it to mySQL server of xampp installation and generate an ER diagram for one simple database.
...

'Referential Actions' in FOREIGN KEY Constraints, https://dev.mysql.com/doc/refman/8.4/en/create-table-foreign-keys.html :
"When an UPDATE or DELETE operation affects a key value in the parent table that has matching rows in the child table, the result depends on the referential action specified by ON UPDATE and ON DELETE subclauses of the FOREIGN KEY clause."
By default, 'NO ACTION' is the referential action: "the delete or update operation for the parent table is immediately rejected if there is a related foreign key value in the referenced table."
Referential action "CASCADE: Delete or update the row from the parent table and automatically delete or update the matching rows in the child table."

--------------------

24 Nov. 2024:
How to Create Tags Input Box in HTML CSS and JavaScript ?, https://www.geeksforgeeks.org/how-to-create-tags-input-box-in-html-css-and-javascript/ : 
A tags input box is a user interface element that enables users to insert a variety of tags into an input field.
-------

React-tags is a simple tagging component ready to drop in your projects. The component is inspired by GMail's To field in the compose window.


-----------



Read a file using the FileReader API – JavaScript Tutorial, https://www.youtube.com/watch?v=u2VTtAXq1iA , around 25 mins., Sep. 2022 ... Source code: https://openjavascript.info/2022/12/15/read-a-file-into-javascript-using-filereader/ ... Excellent tutorial but its initial text file related stuff is not shown in the source code link.

...

The read-only target property of the Event interface is a reference to the object onto which the event was dispatched.
---
My understanding: As the object reference is returned, the object's properties can be changed (including its value, style.visibility etc.)

...

Promise.all(), https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all ... Modified code example to test promise rejection (failure) (catch block code should run on promise rejection):

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
  setTimeout(reject, 99, "Trial rejection")
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
}).catch((err) => {console.log(err)});
----
If reject timeout period is < resolve timeout period then catch block is executed
If reject timeout period is > resolve timeout period then 'then' block is executed

.......

The readAsDataURL() method of the FileReader interface is used to read the contents of the specified Blob or File. When the read operation is finished, the readyState property becomes DONE, and the loadend event is triggered. At that time, the result attribute contains the data as a data: URL representing the file's data as a base64 encoded string.
----

Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents.
...
Data URLs are composed of four parts: a prefix (data:), a MIME type indicating the type of data, an optional base64 token if non-textual, and the data itself:

data:[<media-type>][;base64],<data>
...
If the data is textual, you can embed the text (using the appropriate entities or escapes based on the enclosing document's type). Otherwise, you can specify base64 to embed base64-encoded binary data.
----
Base64 Encoding: What Is It? How Does It Work?, https://builtin.com/software-engineering-perspectives/base64-encoding :
Base64 is a binary to a text encoding scheme that represents binary data in an ASCII string format — essential for carrying data stored in binary across channels.
----

Generally speaking, no.
-----------
The article provides an example of why it is not safe to omit functions ...

Looong article but seems to be a solid deep dive into useEffect: A Complete Guide to useEffect, https://overreacted.io/a-complete-guide-to-useeffect/ , March 2019.

---------------------------

React: How to ensure that fetched data in a useEffect is available for rendering component in first 'proper' render?
useEffect runs **after** first render ... But data has to be fetched before first render of component? How to fix this issue?
A simple example of doing that is in the first code example "getting the first post from the /posts endpoint" in the article: How To Use Axios With React: The Definitive Guide (2021) , https://www.freecodecamp.org/news/how-to-use-axios-with-react/ :

A key line in above code is:   if (!post) return null;
That prevents first render with data which has a reference to post.title which would crash the program as post is null. Then the useEffect() will run which gets the data and sets the post state variable which results in re-render of component In this re-render post is no longer null, and so the regular render of component with data happens.
============

Amazon S3 bucket [S3 - Simple Storage Service]
https://aws.amazon.com/s3/ : "Amazon Simple Storage Service (Amazon S3) is an object storage service offering industry-leading scalability, data availability, security, and performance. Millions of customers of all sizes and industries store, manage, analyze, and protect any amount of data for virtually any use case, such as data lakes, cloud-native applications, and mobile apps."


AWS SNS Beginner's Tutorial | AWS SNS Introduction | AWS SNS Demo | AWS SNS Core Concepts, https://www.youtube.com/watch?v=UtdgHWgyy_M , around 23 mins., Mar. 2023.

AWS S3 Beginner's Tutorial | AWS S3 Introduction | AWS S3 Demo | AWS S3 Core Concepts | AWS S3 Guide, https://www.youtube.com/watch?v=63SOuQuV-RI, around 24 mins., Dec. 2022.

AWS Introduction | 50+ AWS Services Explained | AWS Beginner's Tutorial | Design eCommerce System, https://www.youtube.com/watch?v=a55GbU-bl58, around 40 mins., Nov. 2022.

How to Build Push Notifications for Web Applications, https://www.sitepoint.com/how-to-use-push-notifications-for-web-applications/ , March 2018 
Has section, "Web Push vs Web Sockets"


WebSocket Programming Practice: Real-time Notifications in Employee Monitoring Software, https://medium.com/@ambertham0211/websocket-programming-practice-real-time-notifications-in-employee-monitoring-software-73096ae7570b

how to implement a notification service ? WebSockets or push notifications ?, https://www.reddit.com/r/learnprogramming/comments/140uet8/how_to_implement_a_notification_service/


WebSockets tutorial: How to go real-time with Node and React, https://blog.logrocket.com/websocket-tutorial-real-time-node-react/

WebSockets tutorial: How to go real-time with Node and React, https://www.youtube.com/watch?v=LenNpb5zqGE, 20 mins., May 2020.
----------------

What is Amazon EC2?, "Amazon Elastic Compute Cloud (Amazon EC2) is a web service that provides secure, resizable compute capacity in the cloud."
---

Amazon Elastic Block Store (Amazon EBS) is an easy-to-use, scalable, high-performance block-storage service designed for Amazon Elastic Compute Cloud (Amazon EC2).
...
Run relational or NoSQL databases ... Deploy and scale your choice of databases, including SAP HANA, Oracle, Microsoft SQL Server, PostgreSQL, MySQL, Cassandra, and MongoDB.
---
Amazon Relational Database Service
Easy to manage relational databases optimized for total cost of ownership
---

AWS Project: Architect and Build an End-to-End AWS Web Application from Scratch, Step by Step, https://www.youtube.com/watch?v=7m_q1ldzw0U, 26 mins., Jun. 2022

============================


=========================

React Router 6: Private Routes (alias Protected Routes), https://www.robinwieruch.de/react-router-private-routes/, Feb. 2022

React Protected Routes | Role-Based Authorization | React Router v6, https://www.youtube.com/watch?v=oUZjO00NkhY, around 31 mins., Dave Gray, Jan. 2022

The app. needs a backend server. Used dummy data and json-server. See data directory of project. Also had to modify login code of app to work with dummy data. PC location of project: ...\VSCode\React\ProtectedRoutes\ravi-mod-davegray-app

In the app., index.js has:
        <Routes>
          <Route path="/*" element={<App />} />
        </Routes>
and App.js has:
    <Routes>
      <Route path="/" element={<Layout />}>
        {/* public routes */}
        <Route path="login" element={<Login />} />
        <Route path="register" element={<Register />} />
...
----

index.js '/*' path tells React Router that all paths (including / too, I guess but that's not so clear from the react router docs) match that route. Essentially all paths get rendered by App component which has its own Routes component.
Also see Splats, https://reactrouter.com/6.28.0/route/route#splats : "Also known as "catchall" and "star" segments. If a route path pattern ends with /* then it will match any characters following the /, including other / characters."

Another related ref: The Guide to Nested Routes with React Router, https://ui.dev/react-router-nested-routes
--------------

Authentication with React Router v6: A complete guide, https://blog.logrocket.com/authentication-react-router-v6/ , Nov. 2024

[Very detailed discussions:] Protected route with react router v6 [duplicate], https://stackoverflow.com/questions/62384395/protected-route-with-react-router-v6, 2020 to 2022

[Short article:] Creating Protected Routes With React Router V6, https://medium.com/@dennisivy/creating-protected-routes-with-react-router-v6-2c4bbaf7bc1c, Jun 2022

How to Create a Protected Route with react-router-dom?, https://www.geeksforgeeks.org/how-to-create-a-protected-route-with-react-router-dom/ , LU May 2024.


Comments

Post a Comment