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

Last updated on 3 Nov. 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.
...

From my log of 2 Nov. 2024

I am trying it with .Net 6.0 (Long Term Support) as I don't have .Net 8.0 (Long Term Support)
Using NuGet for 'Microsoft.EntityFrameworkCore.InMemory' failed with error message:\Severity Code Description Project File Line Suppression State
Error NU1202 Package Microsoft.EntityFrameworkCore.InMemory 8.0.10 is not compatible with net6.0 (.NETCoreApp,Version=v6.0). Package Microsoft.EntityFrameworkCore.InMemory 8.0.10 supports: net8.0 (.NETCoreApp,Version=v8.0) TodoApi ...\source\repos\TodoApi\TodoApi.csproj 1
-----------

So I need to install/upgrade to .Net 8.0.


For that I need to update Visual Studio 2022 to 17.8+ (mine currently, IFIRC, is 17.7).

VS Installer on my PC said that I have to "Resume" my paused Setup! The Update button was not shown. So I first clicked on "Resume". That seems to first update VS Installer.
Once that got done, it moved to next step of downloading 1.96 GB! (Perhaps VS 2022).

After some amount of download of above 1.96 GB (don't know how much), an error was shown along with a message about low-bandwidth install (I think this is related page for that: Create an offline installation package of Visual Studio for local installation, https://learn.microsoft.com/en-us/visualstudio/install/create-an-offline-installation-of-visual-studio?view=vs-2022).

Acknowledging the error took me back to main window where Update was now available. So I clicked on Update to essentially retry the install. Now it is downloading 4.44 GB!

I got to the stage of "Downloaded" (all of the install was downloaded, I presume). I used all of Airtel and Jio daily data, used a bonus 2 GB pack on Airtel (100 MB left it says), and used a 2 GB data addon on Jio (675 MB remaining it says). [All this was done on 2 Nov. 2024]

Now it is installing (83%).

Installation got done - version installed is 17.11.5 [Around 11.30 PM on 2 Nov. 2024]

Launched VS Studio 2022, confirmed that is above version number. Then tried to pick up tutorial program creation (Tutorial: Create a web API with ASP.NET Core, https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-8.0&tabs=visual-studio) from where it had failed. But it failed again. Probably due to project creation using .Net 6.0.

Created a new project for the tutorial, confirmed that it is using .Net 8.0, and this time the step of Using NuGet for 'Microsoft.EntityFrameworkCore.InMemory' succeeded.
I could build and run the wizard created API successfully. I could also test the API with Swagger (generated by wizard) and directly on browser with the API working as expected. [11.57 PM, 2 Nov. 2024]

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

As the .NET Core API wizard created program I am going through uses C#, I have to do some catching up with C# language features as it is now.

C# Tutorial, https://www.w3schools.com/cs/index.php served as a good refresher of what I already knew of C#. I think it had limited or no additional coverage of C# features that are newer (like lamba expression or LINQ).

Roadmap for JavaScript and TypeScript developers learning C#, https://learn.microsoft.com/en-us/dotnet/csharp/tour-of-csharp/tips-for-javascript-developers was very useful to understand new features of C# in the context of what I know in JavaScript and TypeScript. Two of new features related overview articles seem to be very useful:

As needed, I can dig deeper into above articles and references it provides.
===========================

Comments

Post a Comment