ReactJS &mdash; Attach to Process https://devblog.dinobansigan.com/tag:ReactJS Thoughts and Notes on Software Development Mon, 13 Apr 2026 21:59:32 +0000 https://i.snap.as/4wmUdb6N.png ReactJS &mdash; Attach to Process https://devblog.dinobansigan.com/tag:ReactJS DevNotes - 005 https://devblog.dinobansigan.com/devnotes-005?pk_campaign=rss-feed <![CDATA[Fire and forget template for C#/.NET to run something that you don't need to wait on and don't care about the results. Task.Run(() = { //code goes here }); --- In ReactJS, if ESLint says you cannot use inline arrow functions to pass in props in JSX, a solution is to wrap them with the useCallback hook. Reference: https://stackoverflow.com/a/36677798/5041911 --- Modals -- can be used to add dialog or popup info boxes on your ReactJS app. --- So using this library actually helped me solve my Azure Application Insights logging issue. The issue being, since I had a dateOfBirth object in my formData object, app insights would save it as an object, as opposed to something like dateOfBirth: 2024-04-16. The solution was to flatten the formData object so it will get logged properly in Azure App Insights. --- Rendering the HTML string in React -- short tutorial on how to render an HTML string in ReactJS/Gatsby. --- Series: #DevNotes Tags: #CSharp #DotNet #Template #ReactJS #Azure #ApplicationInsights #Gatsby !--emailsub-- a href="https://remark.as/p/devblog.dinobansigan.com/devnotes-005"Discuss.../a or leave a comment below.]]> Fire and forget template for C#/.NET to run something that you don't need to wait on and don't care about the results.

Task.Run(() =>
{
	//code goes here
});

In ReactJS, if ESLint says you cannot use inline arrow functions to pass in props in JSX, a solution is to wrap them with the useCallback hook.

Reference: https://stackoverflow.com/a/36677798/5041911

Modals — can be used to add dialog or popup info boxes on your ReactJS app.

So using this library actually helped me solve my Azure Application Insights logging issue. The issue being, since I had a dateOfBirth object in my formData object, app insights would save it as an object, as opposed to something like dateOfBirth: 2024-04-16. The solution was to flatten the formData object so it will get logged properly in Azure App Insights.

Rendering the HTML string in React — short tutorial on how to render an HTML string in ReactJS/Gatsby.

Series: #DevNotes Tags: #CSharp #DotNet #Template #ReactJS #Azure #ApplicationInsights #Gatsby

Discuss... or leave a comment below.

]]> https://devblog.dinobansigan.com/devnotes-005 Tue, 23 Apr 2024 17:18:27 +0000 DevNotes - 003 https://devblog.dinobansigan.com/devnotes-003?pk_campaign=rss-feed <![CDATA[Cache Implementations in C# .NET -- good blog post on implementing caching with .NET. --- You're using HttpClient wrong and it is destabilizing your software -- great blog post that told me that we should avoid the use of the "using statement" when working with an HttpClient instance. And that's because disposing it after say a one time use, like doing one API call and then immediately disposing, will leave open/pending socket connections. Do this often enough and you'll accumulate a number of those open/pending socket connections and that will slow down your app. The better approach is to use a single static HttpClient instance in your app. --- The always-recent guide to creating a development environment for Node and React (with Babel and Webpack) -- good guide to setting up a full-stack JavaScript development environment on your local, with an eye toward ReactJS.!--more-- --- Good blog posts on how to create Windows Services using .NET Core: Creating Windows Services In .NET Core – Part 1 – The “Microsoft” Way Creating Windows Services In .NET Core – Part 2 – The “Topshelf” Way --- Combining multiple changes into one commit is a bad idea, because then you cannot revert the single change that you want to revert, without reverting all the other changes that came along with it. --- Inadvertently discovered a way to find out who is running a specific process on a server. This is useful if you cannot remote into the server, like say because the connections are full. Using Visual Studio, you can do "Attach to Process" on a server. Assuming that server is setup with remote debugging, doing so will get you a listing of the apps/processes running on that server, plus which user are running those apps/processes. And now you know where I got the name for this blog as well. --- Tags: #DevNotes #Bookmarks #DotNet #Caching #HttpClient #ReactJS #WindowsServices #SourceControlBestPractices #TroubleshootingWindowsProcesses a href="https://remark.as/p/devblog.dinobansigan.com/devnotes-003"Discuss.../a or leave a comment below.]]> Cache Implementations in C# .NET — good blog post on implementing caching with .NET.

You're using HttpClient wrong and it is destabilizing your software — great blog post that told me that we should avoid the use of the “using statement” when working with an HttpClient instance. And that's because disposing it after say a one time use, like doing one API call and then immediately disposing, will leave open/pending socket connections. Do this often enough and you'll accumulate a number of those open/pending socket connections and that will slow down your app. The better approach is to use a single static HttpClient instance in your app.

The always-recent guide to creating a development environment for Node and React (with Babel and Webpack) — good guide to setting up a full-stack JavaScript development environment on your local, with an eye toward ReactJS.

Good blog posts on how to create Windows Services using .NET Core:

Combining multiple changes into one commit is a bad idea, because then you cannot revert the single change that you want to revert, without reverting all the other changes that came along with it.

Inadvertently discovered a way to find out who is running a specific process on a server. This is useful if you cannot remote into the server, like say because the connections are full. Using Visual Studio, you can do “Attach to Process” on a server. Assuming that server is setup with remote debugging, doing so will get you a listing of the apps/processes running on that server, plus which user are running those apps/processes.

And now you know where I got the name for this blog as well.

Tags: #DevNotes #Bookmarks #DotNet #Caching #HttpClient #ReactJS #WindowsServices #SourceControlBestPractices #TroubleshootingWindowsProcesses

Discuss... or leave a comment below.

]]> https://devblog.dinobansigan.com/devnotes-003 Mon, 26 Sep 2022 02:41:14 +0000 DevNotes - 002 https://devblog.dinobansigan.com/devnotes-002?pk_campaign=rss-feed <![CDATA[What is a react helmet? React helmet is a helper component that allows you to add data to the head section of a document or HTML page. It basically allows you to add link tags, scripts and other tags that goes into the head section of an HTML page. Source: What is react helmet? So react-helmet library didn't work for me, but this one did. --- The equivalent of the npm install command in yarn is yarn without any parameters. --- Was trying to help out someone on discuss.write.as get a logo to show up beside their blog title. I learned that you can actually set the size of the background image using something like background-size: 150px;. Cool stuff. Reference: Resizing background images with background-size --- So last time I decided to just not show a header image for my Now Listening to... website on mobile screens. It was because I didn't know how to handle it. Well my easy solution turned out to be getting a smaller sized image to use as a header image. Then I was able to just add a css media screen entry that uses the smaller sized image. --- Co-worker was running into Gatsby/Kentico/Grahpql errors with one of our projects. We pretty much had the same .env file and code base. Deleting the folder and downloading again didn't fix it. What worked for him was running the command npm cache clean --force. Note: This is probably a dangerous command to run. Please research what it does before you try it out. I'm only sharing what worked for me and my team. But this was a last resort type of attempt to fix our errors. --- To create a repository from an existing folder or files using Github Desktop, first you have to create the repository on the app itself. This is so that the app can create and initialize the folder on your drive. Then you can copy over the files into the folder that the app created. And then you're set. --- To copy the redirects file (or any other file for that matter) to the Output folder in Wyam, you can use the pipeline code below: Pipelines.Add( // Copy redirect file to the output folder CopyFiles("_redirects") ); --- Tags: #DevNotes #CSS #Gatsby #Github #NodeJS #ReactJS #Wyam #Yarn a href="https://remark.as/p/devblog.dinobansigan.com/devnotes-002"Discuss.../a or leave a comment below.]]> What is a react helmet?

  • React helmet is a helper component that allows you to add data to the <head> section of a document or HTML page. It basically allows you to add <link> tags, <scripts> and other tags that goes into the <head> section of an HTML page.

Source: What is react helmet?

So react-helmet library didn't work for me, but this one did.

The equivalent of the npm install command in yarn is yarn without any parameters.

Was trying to help out someone on discuss.write.as get a logo to show up beside their blog title. I learned that you can actually set the size of the background image using something like background-size: 150px;. Cool stuff.

Reference: Resizing background images with background-size

So last time I decided to just not show a header image for my Now Listening to... website on mobile screens. It was because I didn't know how to handle it. Well my easy solution turned out to be getting a smaller sized image to use as a header image. Then I was able to just add a css media screen entry that uses the smaller sized image.

Co-worker was running into Gatsby/Kentico/Grahpql errors with one of our projects. We pretty much had the same .env file and code base. Deleting the folder and downloading again didn't fix it. What worked for him was running the command npm cache clean --force.

Note: This is probably a dangerous command to run. Please research what it does before you try it out. I'm only sharing what worked for me and my team. But this was a last resort type of attempt to fix our errors.

To create a repository from an existing folder or files using Github Desktop, first you have to create the repository on the app itself. This is so that the app can create and initialize the folder on your drive. Then you can copy over the files into the folder that the app created. And then you're set.

To copy the _redirects file (or any other file for that matter) to the Output folder in Wyam, you can use the pipeline code below:

Pipelines.Add(
    // Copy redirect file to the output folder
    CopyFiles("_redirects")
);

Tags: #DevNotes #CSS #Gatsby #Github #NodeJS #ReactJS #Wyam #Yarn

Discuss... or leave a comment below.

]]> https://devblog.dinobansigan.com/devnotes-002 Thu, 04 Aug 2022 00:00:00 +0000 Passing Functions to Child Component in React https://devblog.dinobansigan.com/passing-functions-to-child-component-in-react?pk_campaign=rss-feed <![CDATA[In the parent React class component, you can declare a function, that you can then pass into one of its child components. So say you had a Form / child component and a addNewProfile function. You can pass the function to the child component like so: Form onSubmit={this.addNewProfile} / Then in the code for the Form component, you can get to the passed in function via the props object, like so: this.props.onSubmit(/parameters go in here/) Note how React is smart enough to know that there would be an onSubmit property available in this.props. That's one of the cool things with React props. So anyway, passing functions into child components is basically like passing a reference to a function. It's similar to how delegates work in C# and .NET. Tags: #ReactJS a href="https://remark.as/p/devblog.dinobansigan.com/passing-functions-to-child-component-in-react"Discuss.../a or leave a comment below.]]> In the parent React class component, you can declare a function, that you can then pass into one of its child components.

So say you had a <Form /> child component and a addNewProfile function. You can pass the function to the child component like so:

<Form onSubmit={this.addNewProfile} />

Then in the code for the Form component, you can get to the passed in function via the props object, like so:

 this.props.onSubmit(/*parameters go in here*/)

Note how React is smart enough to know that there would be an onSubmit property available in this.props. That's one of the cool things with React props.

So anyway, passing functions into child components is basically like passing a reference to a function. It's similar to how delegates work in C# and .NET.

Tags: #ReactJS

Discuss... or leave a comment below.

]]> https://devblog.dinobansigan.com/passing-functions-to-child-component-in-react Thu, 09 Sep 2021 17:49:03 +0000 Build your first blog using React | Sanity.io https://devblog.dinobansigan.com/build-your-first-blog-using-react-sanity-io?pk_campaign=rss-feed <![CDATA[This is a pretty good guide to building a blog using ReactJS and Sanity. That said, I did run into a number of issues while trying to follow it. This post is about the issues I ran into and the solutions for them. --- When I got to the part where it says to run sanity init, I got errors in Visual Studio Code saying the PowerShell script is not digitally signed, so it's not allowed to run. The fix for this was to run: Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Bypass -Force in the VS Code terminal. --- Then I got the error Error: self signed certificate in certificate chain. Looked it up online and found that it seems to be caused by my VPN connection. I disconnected from my work VPN and it did resolve my issue. --- I got all the way to the part of the guide where I was Building the page for all the blog posts. After following the instructions and copying the provided code into src/components/AllPosts.js , I kept running into a post.mainImage undefined error. It turns out, the provided code is expecting all posts I created in Sanity to have a main image. I had one for my first post, but didn't add one to my second post. The fix for the issue above was to replace img src={post.mainImage.asset.url} alt="" / with {typeof post.mainImage !== 'undefined' && img src={post.mainImage.asset.url} alt="" /}. What that new line of code does, is check if post.mainImage is NOT undefined, and if so, render the img tag. If it was undefined, as is the case with my second post, it wouldn't render the tag, thereby avoiding the error. --- After finishing the guide, I needed to figure out how to deploy the React app to Netlify. Posts online say it is as easy as dropping a Build folder into Netlify. However, there's no Build folder in sight in VS Code. Turns out, I had to run npm run build to generate the Build folder and its contents. After that, it was as easy as dropping the folder into the Netlify's deploy folder. You can find the live site on here. Initially the site would load, but the blog posts wouldn't show up. The fix for this was to add the site url, https://laughing-lamarr-50f7df.netlify.app, as a CORS Origins entry in my Sanity account's API settings. Tags: #ReactJS #Blog #Bookmarks a href="https://remark.as/p/devblog.dinobansigan.com/build-your-first-blog-using-react-sanity-io"Discuss.../a or leave a comment below.]]> This is a pretty good guide to building a blog using ReactJS and Sanity. That said, I did run into a number of issues while trying to follow it. This post is about the issues I ran into and the solutions for them.

When I got to the part where it says to run sanity init, I got errors in Visual Studio Code saying the PowerShell script is not digitally signed, so it's not allowed to run. The fix for this was to run: Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Bypass -Force in the VS Code terminal.

Then I got the error Error: self signed certificate in certificate chain. Looked it up online and found that it seems to be caused by my VPN connection. I disconnected from my work VPN and it did resolve my issue.

I got all the way to the part of the guide where I was Building the page for all the blog posts. After following the instructions and copying the provided code into src/components/AllPosts.js , I kept running into a post.mainImage undefined error. It turns out, the provided code is expecting all posts I created in Sanity to have a main image. I had one for my first post, but didn't add one to my second post.

The fix for the issue above was to replace <img src={post.mainImage.asset.url} alt="" /> with {typeof post.mainImage !== 'undefined' && <img src={post.mainImage.asset.url} alt="" />}.

What that new line of code does, is check if post.mainImage is NOT undefined, and if so, render the img tag. If it was undefined, as is the case with my second post, it wouldn't render the tag, thereby avoiding the error.

After finishing the guide, I needed to figure out how to deploy the React app to Netlify. Posts online say it is as easy as dropping a Build folder into Netlify. However, there's no Build folder in sight in VS Code. Turns out, I had to run npm run build to generate the Build folder and its contents. After that, it was as easy as dropping the folder into the Netlify's deploy folder. You can find the live site on here.

Initially the site would load, but the blog posts wouldn't show up. The fix for this was to add the site url, https://laughing-lamarr-50f7df.netlify.app, as a CORS Origins entry in my Sanity account's API settings.

Tags: #ReactJS #Blog #Bookmarks

Discuss... or leave a comment below.

]]> https://devblog.dinobansigan.com/build-your-first-blog-using-react-sanity-io Sun, 30 May 2021 04:54:28 +0000 DevNotes - 001 https://devblog.dinobansigan.com/devnotes-001?pk_campaign=rss-feed <![CDATA[Starting a new DevNotes series. This is a spin-off from my Weeknotes series. This one focuses on software development content only. This one won't exactly be a weekly thing. I'll only publish a DevNotes post when I have a number of notes to share. Otherwise I'll bundle them up into a bigger post and publish then. And with that out of the way, let's get started... I'm starting to notice a trend with the Rust programming language. It seems to be the next big thing. Microsoft even joined the Rust Foundation. It probably should be the next language I should learn after React. hr class="sb"/ I just realized, after installing the React Browser Dev Tools Extension, that Microsoft's Azure DevOps site was built using React. If Microsoft, who created C# and ASP.NET, uses React on their core products, it is just one more reason for me to really dig into React. hr class="sb"/ React components can be thought of as building blocks for your website. Instead of creating a button then styling it with the primary-button CSS class, you create a PrimaryButton component then use it wherever you want. Reference: Get to Know Gatsby Building Blocks hr class="sb"/ I was building a very basic Gatsby website, the one from their tutorial. It was taking too long to build the output for a static site. Too long compared to building sites using Wyam. I don't have anything against Gatsby. In fact I'm trying to learn Gatsby. I'm just pointing out that it seems slow compared to Wyam. hr class="sb"/ While going through the Gatsby tutorial, I found another alternative to Netlify for hosting static sites: Surge. Tags: #DevNotes #Gatsby #ReactJS #Rust #StaticSiteGenerator a href="https://remark.as/p/devblog.dinobansigan.com/devnotes-001"Discuss.../a or leave a comment below.]]> Starting a new DevNotes series. This is a spin-off from my Weeknotes series. This one focuses on software development content only. This one won't exactly be a weekly thing. I'll only publish a DevNotes post when I have a number of notes to share. Otherwise I'll bundle them up into a bigger post and publish then. And with that out of the way, let's get started...

I'm starting to notice a trend with the Rust programming language. It seems to be the next big thing. Microsoft even joined the Rust Foundation. It probably should be the next language I should learn after React.

I just realized, after installing the React Browser Dev Tools Extension, that Microsoft's Azure DevOps site was built using React. If Microsoft, who created C# and ASP.NET, uses React on their core products, it is just one more reason for me to really dig into React.

React components can be thought of as building blocks for your website. Instead of creating a button then styling it with the primary-button CSS class, you create a PrimaryButton component then use it wherever you want.

Reference: Get to Know Gatsby Building Blocks

I was building a very basic Gatsby website, the one from their tutorial. It was taking too long to build the output for a static site. Too long compared to building sites using Wyam. I don't have anything against Gatsby. In fact I'm trying to learn Gatsby. I'm just pointing out that it seems slow compared to Wyam.

While going through the Gatsby tutorial, I found another alternative to Netlify for hosting static sites: Surge.

Tags: #DevNotes #Gatsby #ReactJS #Rust #StaticSiteGenerator

Discuss... or leave a comment below.

]]> https://devblog.dinobansigan.com/devnotes-001 Mon, 15 Feb 2021 04:07:13 +0000 On Learning React https://devblog.dinobansigan.com/on-learning-react?pk_campaign=rss-feed <![CDATA[My first attempt at learning the React JavaScript library was by reading the ASP.NET Core 3 and React book. I started reading that book a few months ago. I've gone through the first six chapters, which mostly covers how to build a web app front-end using React. While I did learn a lot reading those chapters, I was barely keeping up. There's so many new concepts, new libraries, new methods, new syntax to learn. It felt overwhelming at times. It didn't help that I kept getting distracted at the JSX syntax -- which looked insane to me at times. I found myself simply typing what was in the book. But I actually couldn't tell you why the code worked. I was honestly struggling to keep up. But more importantly, I was confused and frustrated at it all. Why would you even want to go through all this trouble of writing a React app? I didn't get it. And consequently, I wasn't too excited to learn more. But I had to. !--more-- So, after having gone through the first six chapters of the book, today I decided to take a stab at this React: Getting Started pluralsight course. And my God, what a change! I'm actually now excited to learn more about what I can do with React. I've only gone through the first two chapters, which are basically an introduction to React. But man what a blessing! It explained really well so much of the key concepts that I've struggled to grasp. A lot of the confusion I had while reading the book, is now slowly starting to make sense. It's almost like this course is required reading, before actually reading the book. I now better understand props. I now better understand state management between components. I now better understand components, which is crucial if I ever want to master React. Even the JSX syntax is now starting to make sense. I get it now. I get why you would want to build a web app using React. I get why you would want to learn React. And now I'm excited to learn more. I feel like if you want to start learning React, you should give this pluralsight course a try first. This is not to say that the book, ASP.NET Core 3 and React, is a bad book. It's not. It's actually very detailed and covers a lot of topics that will definitely be useful at work. It's just that I think it's too advanced for a React beginner like me. I need to get a better handle on the basics and key concepts of React, before I can fully appreciate the book. P.S. Apologies if this post is not as polished as other posts. I'm trying to follow Joel's advice on caring less and writing more. Tags: #JavaScript #ReactJS a href="https://remark.as/p/devblog.dinobansigan.com/on-learning-react"Discuss.../a or leave a comment below.]]> My first attempt at learning the React JavaScript library was by reading the ASP.NET Core 3 and React book. I started reading that book a few months ago. I've gone through the first six chapters, which mostly covers how to build a web app front-end using React. While I did learn a lot reading those chapters, I was barely keeping up.

There's so many new concepts, new libraries, new methods, new syntax to learn. It felt overwhelming at times. It didn't help that I kept getting distracted at the JSX syntax — which looked insane to me at times.

I found myself simply typing what was in the book. But I actually couldn't tell you why the code worked. I was honestly struggling to keep up. But more importantly, I was confused and frustrated at it all. Why would you even want to go through all this trouble of writing a React app? I didn't get it. And consequently, I wasn't too excited to learn more. But I had to.

So, after having gone through the first six chapters of the book, today I decided to take a stab at this React: Getting Started pluralsight course. And my God, what a change!

I'm actually now excited to learn more about what I can do with React. I've only gone through the first two chapters, which are basically an introduction to React. But man what a blessing! It explained really well so much of the key concepts that I've struggled to grasp. A lot of the confusion I had while reading the book, is now slowly starting to make sense.

It's almost like this course is required reading, before actually reading the book.

I now better understand props. I now better understand state management between components. I now better understand components, which is crucial if I ever want to master React. Even the JSX syntax is now starting to make sense.

I get it now. I get why you would want to build a web app using React. I get why you would want to learn React. And now I'm excited to learn more. I feel like if you want to start learning React, you should give this pluralsight course a try first.

This is not to say that the book, ASP.NET Core 3 and React, is a bad book. It's not. It's actually very detailed and covers a lot of topics that will definitely be useful at work. It's just that I think it's too advanced for a React beginner like me. I need to get a better handle on the basics and key concepts of React, before I can fully appreciate the book.

P.S. Apologies if this post is not as polished as other posts. I'm trying to follow Joel's advice on caring less and writing more.

Tags: #JavaScript #ReactJS

Discuss... or leave a comment below.

]]> https://devblog.dinobansigan.com/on-learning-react Fri, 05 Feb 2021 06:38:15 +0000