Attach to Process

React

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: #React

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: #React #Blog #Bookmarks

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 #React #Rust #StaticSiteGenerator

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.

Read more...