Ninja Space Content Tech Blog

Showing Tag: " react" (Show all posts)

Integrating Google Adsense in a React App

Posted by Ninja Space Content on Tuesday, August 17, 2021, In : Google Adsense 
For several years, I've been embedding Google Adsense on my websites to earn revenue. Part of the process is when I'm adding ads to a new site that I've just launched, I would need to add that site under settings for my Google Adsense account and wait for a review.

My Steps
  1. Go to your Google Adsense account and on the left side, select "Sites." 
  2. Go ahead and add a site here. Embed your code with your publisher ID in the head section of your website.
  3. Then, request Google Adsense to review it. 
  4. You ...

Continue reading ...

Bootstrap and React Update

Posted by Ninja Space Content on Monday, August 9, 2021, In : react 
I'm looking up documentation on React-Bootstrap this morning and I noticed there's an addition in the npm install command. 
It is now:  npm install react-bootstrap@next bootstrap@5.0.2

Before, the documentation didn't mention the "@next part" nor the "@5.0.2". Then, in my main index.js file, I still imported the following at the top:
import 'bootstrap/dist/css/bootstrap.min.css';

It works the same. I am a big fan of the accordian component from bootstrap. So to use that, I just need to import t...
Continue reading ...

create-react-app and Redux for React Apps Plus Safari Blank Issue

Posted by Ninja Space Content on Wednesday, July 21, 2021, In : react 
I've been creating react apps since October 2020 so it's only 9 months and I've only worked with redux for one of my projects so far and I want to work on another project with redux. For this blog post, I'll be highlighting on creating my new react app with create-react-app and redux implementation.

Through the coding bootcamp, I would just "npm install react react-dom react-scripts" in my command line, and "mkdir" my src and public folders and corresponding files to start my react projects. I...
Continue reading ...

Adding a Sitemap to Godaddy Shared Hosting

Posted by Ninja Space Content on Saturday, May 22, 2021, In : react 
On May 9th, 2021, I added a sitemap.txt file to one of my React apps so that it can get properly indexed in the search engine and I can start seeing stats on Google's search console. I am current hosting this app on Godaddy's shared hosting. 

Today, a couple of weeks later, I noticed that I am not showing hits on certain pages; just on the homepage. So, I went on my app and utilized real time tracking and I realized Google Analytics doesn't pick it up even in real-time. I figured this may have...
Continue reading ...

Week Six of Learning Angular

Posted by Ninja Space Content on Wednesday, April 21, 2021, In : angular 
This week, I am going to be taking notes on reactive forms in Angular. Reactive forms is where you explicitly create the forms that's more complex, like implementing async validation.

Reactive Forms
In order to use formControlName, you'll need to import ReactiveFormsModule to the array on imports in the app.module.ts file. Then, it'll automatically add it as an import to the top of that page like so: 
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
There was a bug that I ...
Continue reading ...

Deploying React App with AWS Amplify

Posted by Ninja Space Content on Thursday, April 15, 2021, In : AWS 
I created an AWS account 3 months ago but hadn't deployed anything on any of their services until last evening! A few months ago, I was having trouble with AWS Elastic Beanstalk and decided to put it in the back burner to learn Angular and TypeScript. Now, I'm ready to dig into AWS again. Instead of using AWS Elastic Beanstalk this time, which was what I originally had in mind, I decided to try out AWS Amplify to see if deploying my React app this way would be easier. It definitely is.

Here we...
Continue reading ...

Using Multer to Upload Photos for Node and React

Posted by Ninja Space Content on Sunday, February 28, 2021, In : node 
This month, I learned to used Multer for a react project that I've been working on. It took me close to 6 days to get both the back-end and front end to work for Multer. There were times when I really struggled but in the end, I didn't give up and it's so rewarding to finally figured it out. Being able to upload a file successfully, especially a photo, and have it save to the database was something I was thinking about learning to do since December. 

Many of the errors I had at the beginning w...
Continue reading ...

Utilizing React Bootstrap Library and What I Found Out for my First Time

Posted by Ninja Space Content on Saturday, February 20, 2021, In : react 
I started learning JavaScript in July 2020 and had been using strictly CSS to style my own apps but I've decided to take a stab at bootstrap with React Bootstrap. There's a learning curve and at first, I thought, it'd just be faster if I style all of this myself with CSS. However, I know that in a lot of job descriptions, bootstrap comes up in the tech stack as a preferred skill to have. After working with it, I realized, it could save me a lot of time making sure everything is formatted corr...
Continue reading ...

Deploying React App on AWS Beanstalk

Posted by Ninja Space Content on Sunday, January 24, 2021, In : AWS 
Here are the steps that I took to deploy my React App today: 
  1. First sign up for a free AWS account
  2. Create a new app in AWS Beanstalk
  3. Use git to bundle my source according to instructions here: $ git archive -v -o --format=zip HEAD
  4. One thing that I noticed that AWS Beanstalk looks for to run the files in there server.js (back-end) and client folder (front-end). So I'll need to make some changes. Example: my server file should be named server.js and not "index.js" like I have now. Also, t...

Continue reading ...

Hosting React App on Godaddy Hosting via cpanel

Posted by Ninja Space Content on Sunday, January 24, 2021, In : hosting 
Through GoDaddy, I pay shared hosting for one of my React apps. It was quite easy. After I run a build, I just drag over some files and then it was done.

Steps to use Cpanel from Godaddy's Shared Hosting to host a React App

Here are the steps I took to complete the entire hosting process:
  1. After you've logged into Godaddy with your account information, go to the cpanel File Manager part of Godaddy for your hosting account. Go to 'settings' to check the box next to "Show Hidden Files" or you won't...

Continue reading ...

Pushing existing react files on GitHub with issues and solving them

Posted by Ninja Space Content on Sunday, January 3, 2021, In : tech issues 
Happy New Year, guys!

I had a couple more GitHub issues today when I tried to get my local files on GitHub, but finally solved them.

Today, I'm ready to deploy my first week's work on my current project on Heroku but before I do that, I needed to put my local files onto git and GitHub. I had issues with my React project not rendering onto my localhost properly earlier this week after I had tried to 'git init' it. I had to keep creating new files so to not delay my dev process, I have been worki...
Continue reading ...

Working with Nodemailer and Express to create a Contact Us form

Posted by Ninja Space Content on Thursday, December 31, 2020, In : nodemailer 
For the last 24 hours, I have been working on my Contact Us form and I have it up and running now. However, no surprise here, I didn't do it without some errors at the beginning. I found some sources that I want to document here to look back on for the future for the next Nodemailer implementation.

Here are the three resources on Nodemailer that I looked at:
Continue reading ...

About Ninja Space Content

Ninja Space Content I have been building simple websites on my own since 2008 and currently run several websites at the moment, including this one. I used to be an account manager for an affiliate/e-commerce company, helping affiliates grow their sales so I have some knowledge on the business side and client side of affiliate marketing. Most recently, I decided to complete a JavaScript coding bootcamp and graduated in Dec 2020.
Note: links to resources and promoting special deals may allow me to earn a small commission from each sale.