DEV Community: Abdallah hamouda

How I learned React in one Week as a vue developer

Abdallah hamouda — Fri, 16 Sep 2022 15:56:06 +0000

first to get a bit of understanding to my background I worked with Vue for more than 3 years so I got bored of it a little bit and I wanna made a new portfolio so I decided to pick react, react router and react material

1- Change your mindset Vue is separated to

HTML, Style Script
but React or JSX is HTML inside JavaScript you literally code inside JavaScript Function with a return () like this
you can write methods or the equivalent is normal arrow function above the return
you can bind data {} single bracket and v-model is the same and
the props is passed on the functions
in the end you should export default the function

`import {useState, useEffect} from 'react'
const MyFunction = ({myProp})=>{
const myMethod = ()=>{
console.log("working react method")
}
return(
<div>
<h1>working {myPorp}</h1>
</div>
)
}
export default MyFunction

2- Learn Hooks

I just used useState and useEffect basically useEffect is the same as mounted in vue
useState is to change the value of the variable this is way more different than anything in vue
useState
first you have to declare a variable but not the normal way you declare
let [variableName, ChangeFunction] = useState('your Value')

then you can change it by ChangeFunction(variableName = 'my new Value')

that's it is react from a vue developer perspective I am still learning it and I really love it I will follow this roadmap
https://roadmap.sh/react

if you wanna see my project I developed in react
www.hamouda.tk
still have room to work and improvement but I like to share my progress with you
thanks for reading please tell me if there is something I missed

How to Make Full-Stack Project with Nuxt and ExpressJs

Abdallah hamouda — Sat, 03 Apr 2021 16:00:47 +0000

Introduction

Before I knew this I was making the backend and the front-end separately and the cors handle all the cross-origin requests,
But here is the problem cause I am broke I can't afford to pay for a good server then I went with Heroku,
and the free plan has a sleeping time when the server isn't used they shut it down and rerun it when somebody uses it then the whole npm run this is a lot of time to wait for the user,
so I decided to go with the same origin to cut this downtime to half then I made my research and I didn't found a lot so I decided to make one for me and the people beginners like me
let's start
If you wanna make the backend and the frontend of the same origin you can do it in two ways

From Nuxt Docs

here basically you write a regular express app

const app = require('express')()

then identify your port the server will run on

const port = process.env.PORT || 3000

then you load nuxt and write a line of code to check are you in development or not

const { loadNuxt, build } = require('nuxt');
const isDev = process.env.NODE_ENV !== 'production'

then we make async function then use nuxt.render middleware

async function start(){

 // Render every route with Nuxt.js
 const nuxt = await loadNuxt(isDev ? 'dev' : 'start')

 //render Routes with nuxt render
 app.use(nuxt.render)

//build on dev mode because of hot reloading (reload the page when any change happens)
 if(isDev){
 build(nuxt)
 }

 //listen to port
 app.listen(port, '0.0.0.0')
 console.log("loading on "+ port)
}
start();

then go to nuxt.config.js

middleware:['name of your middleware']

if you are interested to use this method
you can read more on
Nuxt Docs

Server Middleware

this is the simpler way to do it you have to do three things
1- Make api file and put all your express code on it
2- add this to the end of your index.js code

module.exports = app

// Start standalone server if directly running

if (require.main === module) {

const port = process.env.PORT || 3001

app.listen(port, () => {

// eslint-disable-next-line no-console

console.log(`API server listening on port ${port}`)

})

}

3- add serverMiddleware to nuxt.config.js

serverMiddleware: {

'/api': '~/api'

},

if you wanna use it directly without doing anything there is a ready to use the template on GitHub

in the last thanks for reading, I hope you found this helpful for you,
if you want me for work you can DM me on any of my social media on my profile

Check my new Startup Dremor

How I developed my Blog

Abdallah hamouda — Tue, 05 Jan 2021 15:19:01 +0000

I wanted to start my blog to learn about content marketing how the thing is done and working but I failed a lot of times today I will share how I did it.

my Back experience

this part I will separate it into two part which are cms I tried and did not work for me and my back experience in programming

programming experience

I am a self-taught programmer, I learned very slow and at the first, it was very hard to figure things out at the beginnings,
I didn't know what do I want to be, what should I learn or do so it ended up with me learning web development I tried angular, react, and Vue but I liked Vue in the end,
I developed some portfolio projects

blogging

I tried three cms (content management systems)

#### Wordpress
I tried wordpress.com and .org,
the problem with the first one that I wanted to start for free and incrementally add more stuff gain a little bit of money to buy a domain, etc,
but I did not like it all free UI are suck I actually hate it the block editing in you WordPress I did not understand it.
with .org version of WordPress things was a little bit harder for me because I am a frontend/ javascript developer so it was hard I gave up immediately

#### Nuxt Content With Nuxt content. I didn't like the idea of markdown blogging, I have to git commit every time I add a blog post, but the good part with it you don't need any backend, and the content loads very fast no API calls everything is pretty dope
#### Strapi I heard about headless cms, I google it and Strapi first thing I found, you can consider Strapi as a prebuilt backend for your project, it is highly customizable, it was simple to make a blog and customize API calls, you can use Graphql too it was great and I learned a lot about backend using it, especially for nodeJS, I made two websites with it but the dark side was deployment first time I deploy it supports SQL lite, but you can't deploy it with it, you have to integrate another database like MongoDB or PostgreSQL, when I integrate it with MongoDB, I met a lot of problems in the Heroku console ### What I want I began to develop everything by myself using mevn stack MongoDB, ExpressJs, VueJs, NodeJs, and NuxtJs
- #### Html Blogging I think HTML is the perfect use for my case, for blogging because it's very simple to learn and use at the same time it's highly customizable. you can add inline styles to anything you want, Change specific part put margins, make margins padding, put affiliates, you can add inline javascript too, and many more
- #### scale incrementally and be Simple at the same time My blog system started small and increased incrementally as my knowledge increase, For example, the first time I made it, it was only a plain blog, just some words in a website via API calls, then I learned about SEO, so I added keywords for every post, sitemap, dynamic title, and description. then I added a tool called AddThis, and the list goes on. separate by making the backend separate from the frontend the development was easier than normal, and I can focus better on what are the different features I can add in the frontend and backend
- #### develop with familiar programming language for me I developed by what I already know which is javascript in the form of vue or nuxt and nodejs. that made development much easier and prevented mind shift from programming language to another
- #### don't have to git commit every time I want to post

unlike Nuxt Content now I git commit when I just add a new feature or code
that separate commits for adding features and commit for adding a new blog post

#### Free hosting and I can earn money from different sources anytime I want this is done by Heroku but unlike the other points this point has a lot of cons Nuxt is SSG and SSR 1-subdomain .herokuapp but it is acceptable for free service like Heroku 2- HTTP, not HTTPS Netlify provide HTTPS with each project you make, and because of that PWA is not working because it requires HTTPS 3-addons needs a credit card to add 4-sometimes I met a problem with CDN in Heroku 5-website sleep if your website is not used Heroku will turn it off till someone visit your website and reactivated after all of these points, Heroku is not bad but on the contrary, Heroku is good free cloud hosting for your full-stack projects
#### easy relevant database I can work with I don't know that much about back-end programming, in general, I worked before with few technologies like JWT and nodemailer, but what I don't know for most is a relational database so I need a hosted database easy to integrate and use and maintain so I chose MongoDB it is very easy to use just make schema and schema. save for inserting to the database schema. find and findOne to get ### what are my upcoming plans 1-complete my website and improve it 2- make a Hosted CMS like wordpress.com that target frontend developer (freedom frontend developer) ## Check out my blog

Byhamouda

Articles I wrote may help you

6 tips that will help you find the passion of your life

5 Tips to get free mentors
7 Tips to finish more Books