Learning React with Ben Awad — 01

Photo by Ian Beckley from Pexels

This article originally posted on my blog site.

I thought that I need to learn React. To do that I chose Ben Awad’s Fullstack React GraphQL TypeScript Tutorial. This is a super long tutorial that he made. It is almost 14 hours long.

A HUGE shout-out for creating this tutorial. Here are this Twitter and Youtube links. I highly encourage you to go and check it out.

https://twitter.com/benawad

Ben Awad

I am adding my notes in here. I think it will also help you and hope you feel this is meaningful somehow. Okay, let’s start.

First, initiate a package.json file using npm init -y . This -y stand for yes for all default configurations.

Then we are building this application using TypeScript. Add those packages as dev dependencies. (We are using yarn as a package manager)

yarn add -D @types/node typescript

Because we are using typescript we need to transpile into JavaScript. Lets and watch command to project.json file. It will watch the changes and transpile it into JavaScript.

Also, we are adding nodemon in the development environment.

package.json the file structure is like above.

Run yarn dev to start the application. Once in every change, this will automatically run the application.

Add Prastgresql related packages.

yarn add @mikro-orm/cli @mikro-orm/core @mikro-orm/migrations @mikro-orm/postgresql pg

If you don’t have Postgresql, you can install into your local machine.

VS Code tip: if you create a file like this entities/Post.js it will automatically create a folder.

Go to Mikro ORM documentation and grab a class base entity.

Here is the like for it.

Defining Entities | MikroORM

We can use catch function after calling main() because it returns a Promise object.

To create tables from mikro orm add this config to package.json file. Then create this file under src folder.

Another point that needs to add in here.

if you export something as like this

Now, TypeScript is unhappy. Because microOrmConfig.dbName is a string.

We can overturn it by as below. See, there is as const end of the code lines.

But, even TypeScript gives you an error. Also, in the above example, we can’t use autocompletion suggestions.

Then add the data types in the Post Modal. Next, run the migrate command.

npx mikro-orm migration:create

If you got below error, most probably it can be fixed by adding the password to mikro-orm.config.ts file.

Check this link about the above error.

db:setup TypeError [ERR_INVALID_ARG_TYPE]: The "key" argument must be of type string or an instance…

Right now you will have a working project with database connected. I will wrap up this post from here. Let’s meet from 2nd post from this series.

Up to here, you can find my code from here.

rasikag/reddit-clone

I will wrap-up this note from here. Soon I will publish next part of this note.

If you have anything to ask regarding this please leave a comment here. Also, I wrote this according to my understanding. So if any point is wrong, don’t hesitate to correct me. I really appreciate you.

That’s for today friends. See you soon. Thank you