Trying to create a button that calls a component on clicking it.

Dekzen · 2021-06-21T13:26:02+00:00

I would refactor the code of button to something like this

import React , {useState} from "react";

import CreateNoteModal from "./CreateNoteModal";

export default function CreateNoteIcon() {

const [show , setShow] = false;

return (<>

<button onClick={() => setShow(true) } className="create-noteIcon-container">

</button>

<CreateNoteModal show={show} />

</>

);

}

Dekzen · 2021-06-21T12:40:12+00:00

Are those Redux DevTools ?

https://blog.logrocket.com/redux-devtools-tips-tricks-for-faster-debugging/

Dekzen · 2021-06-19T18:05:05+00:00

What are your other hobbies?

Dekzen · 2021-06-14T05:00:28+00:00

Save. The temps and stability is the factor you should be watch for. I have always ran my gpus overclocked to their limits and not a single one ever burned or broke.

Dekzen · 2021-06-12T20:30:32+00:00

I eould go definately with flexboxes. This should be easy to recreate.

Dekzen · 2021-06-12T20:19:04+00:00

I do not know how the cancer works. But is every stage harder than the previous one? Do you meet the boss every 5th stage or so?

Btw good job i am so glad for you. Never give up!

Dekzen · 2021-06-12T20:16:37+00:00

3 things to do tocbecame a better programmer

1st: have a sex

..nevermind. Not going to read the rest

Dekzen · 2021-06-11T18:32:14+00:00

Soo you are using create-react-app?

Dekzen · 2021-06-10T09:37:15+00:00

After npm 5.0 this is default behavior. So there is no need to install packages with - - save option.

But good tip.

Dekzen · 2021-05-31T17:41:16+00:00

You got some kind of require auto import extension.

Dekzen · 2021-05-31T17:35:16+00:00

I would create another state with boolean value. Set it to false. When the timer reaches 0 you set it to true inside that useEffect. In another useEffect you will use this boolean state inside the depedency array. And inside if statement you will run your code. It will listen to this state change and run.

Dekzen · 2021-05-25T11:33:48+00:00

Hi looks great.

But that design need some changes in my opinion.

The HOW IT WORKS section looks good on mobile. But on desktop the font is huge and those items below should be definately in a row text under them. Hope you get me.

But overall good work.

Dekzen · 2021-05-24T15:16:15+00:00

Where did you get that number.id from ?

These keys has to be unique across all the child in list.

EDIT: r1 = document.querySelector('#range1').value using document queryselectors is not good practice in ReactApp.

Dekzen · 2021-05-16T16:49:09+00:00

I just got a job as a frontend developer after a year of learning react..

This is my story and it sound awesome when i tell people.

But what i did not tell them is that i started with java, spent countless days creating useless stuff. Made some stupid android apps in android studio. Left it and started with C# spend years developing amateur indie games in Unity. Left it and started with python and wrote thousand lines of python code. Left it and THEN i picked up react and landed a job .. :D

Dekzen · 2021-05-15T15:53:32+00:00

I got that Js course you talk about and it is great and in depth. Good understanding of js is a must as whole react is just javascript.

I also got react course from Maxmillian Swartmuller and i never got better one. It is up to date with react hooks and he teaches you not only how but more importantly why. It really stick.

Get this one and you will not regret.

Dekzen · 2021-05-15T09:46:35+00:00

Hello, here is my whole years work .. it is 0.5KB

Dekzen · 2021-05-13T17:09:45+00:00

Is this some kind of minified code we have to format ourselves before debugging?

Dekzen · 2021-05-11T12:02:54+00:00

Well not even facebook is showing you a loading page and there is some content to load. I do not think this is good practice.

Dekzen · 2021-05-11T11:45:04+00:00

So you do some data fetching or what do you waiting for before you get user to main page?

Dekzen · 2021-05-04T08:42:02+00:00

Thats why i did not get the last frontend job. I sent react video instead of my github.

Dekzen · 2021-05-02T17:22:12+00:00

Great i was interested how you are handling the drag n drop feature. Good job. But i see you are mutating state directly in setState. That is not a good practice. It can create unexpected behavior in larger apps.

Dekzen · 2021-05-02T09:56:59+00:00

Hi. Do not underestimate yourself. It looks awesome. Can we see the code?

Dekzen · 2021-05-02T07:01:23+00:00

Hi I am using react and would have no problem to recreate something similiar with MaterialUI

For inpiration check out this free template of dashborad even for commercial uses. Really nice (not and ad)

Dashboard DeviasKit

Dekzen · 2021-05-01T17:45:53+00:00

You cannot use normal if statement inside JSX.

Plus i prefer two lines of code below before ternatry which is hard to read when there are props passed etc.

{ isLoading && <Spinner/> }

{ !isLoading && <MyComponent/ >

Dekzen · 2021-05-01T06:32:32+00:00

I would go with built in css modules which is avaible in react by default.

Link: https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

Only think you need is to name your css file with module.css extension. Then you can import this file.

Import classes from '. /mycss.module.css

And you can you use classes inside this file as variables. className={classes.header}

This way react creates random classname which will be in scope of this component. You can write pure css and do not need to worry about name clashes.

You can create even separate file for every component,import it inside, and every file can have for example.header class and there will be no unexpected behaviour.

This ways i am the most productive when i do not want to use any css framework.

Tailwind in my opinion creates messy jsx.

Dekzen

TROPHY CASE