DEV Community

I'm a noob at ReactJS and made this 😅

Brayden W ⚡️ on September 30, 2020

Hi everyone! A couple days ago I made a post saying that I was dropping my side-project. I wanted to open more paths for the future. One of the go...
Collapse
 
link2twenty profile image
Andrew Bone

Very nice 4 unique components, with functions connecting them!

celebrate

If you wanted to expand on this adding an "are you sure?" modal popup on delete might be a nice touch!

Collapse
 
braydentw profile image
Brayden W ⚡️

Great idea! Thanks :D

Collapse
 
gbrantunes profile image
Gabriel Antunes

Nice UI! Testing your app i found two things:

  1. the customer panel can't handle long names
  2. I was able to add a empty customer name by adding an space

UI test

Collapse
 
braydentw profile image
Brayden W ⚡️

Responsiveness. Can't believe I forgot about that 😅

Thanks for pointing it out!

Collapse
 
valentinbcn profile image
Valentin

Looks really neat and clear ! congrats :D

It feels like it's mobile oriented so maybe you could try to make it more 'dektop oriented' aka fullscreen (media-queries and so ?) , hmmm and maybe you could look into animations too (?)

Have a nice journey by learning React ! :D

Collapse
 
braydentw profile image
Brayden W ⚡️

Thanks!

Collapse
 
vberen profile image
Nicklas Wessel • Edited

Looks great :)
Is there any reason you don't use functional components instead?

My suggestion would be to focus on that -
Personally when I made the switch from class components to functional components, was such a huge difference for me. I suddenly felt productive writing components.

States and lifecycle methods suddenly became very easy to master and very fast to write.

The same component can suddenly be halv the amounts of code line.

Collapse
 
braydentw profile image
Brayden W ⚡️

Thanks!

Simply for what I’ve mainly learned has been class components. I’ll try using functional components mainly in my next project.

Thanks for the suggestion!

Collapse
 
daxdax89 profile image
DaX

Got repo?

Collapse
 
braydentw profile image
Brayden W ⚡️
Collapse
 
daxdax89 profile image
DaX

Any particular reason why are you not using arrow functions?

Thread Thread
 
braydentw profile image
Brayden W ⚡️

Not sure, I was just using the rfce VScode snippet and it generates one without arrow functions. Do you know of a shortcut that generates a stateless functional component with an arrow function?

Thread Thread
 
daxdax89 profile image
DaX

I wish. I type them manually. Installed bazillion extensions just to see nije of them work 😂

Thread Thread
 
braydentw profile image
Brayden W ⚡️

Okay no problem then. I can handle it 😅

Collapse
 
braydentw profile image
Brayden W ⚡️

Not yet, I'll let you know when I do :)

Collapse
 
louislow profile image
Louis Low • Edited

Looking good... Since you have started this, should you continue to work on the noob project into a pro full-fledged CRM? Just give yourself a few months. If you don't like it, you can always do $ rm -rfv * and see them gone.

Collapse
 
braydentw profile image
Brayden W ⚡️ • Edited

This was just a way of me practicing my skills from the past 24 hours. I'm planning to learn Redux and Styled Components.

Collapse
 
arunmurugan78 profile image
Arun Murugan

Nice UI

Collapse
 
braydentw profile image
Brayden W ⚡️

Thanks :-)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Cool nice start.

Collapse
 
polluterofminds profile image
Justin Hunter

Welcome to the wonderful world of React! Great start!

Collapse
 
braydentw profile image
Brayden W ⚡️

Thank you Justin!

Collapse
 
vic0de profile image
Vishnu Dileesh

Looks neat, keep making progress

Collapse
 
braydentw profile image
Brayden W ⚡️

Thanks Vishnu!

Collapse
 
djuric profile image
Žarko Đurić

It's beautiful!

Collapse
 
braydentw profile image
Brayden W ⚡️

Thank you so much!

Collapse
 
jimcmorrison profile image
JimCMorrison

I'd be happy to check out your repo! React is a great library to learn in this current climate. Good luck on your adventure Brayden!

Collapse
 
braydentw profile image
Brayden W ⚡️

The repo link is here: github.com/BraydenTW/simple-react-crm

Collapse
 
jimcmorrison profile image
JimCMorrison

Thanks! Be sure to update your Readme.md to personalize it with the project goals, tools used, and a brief author bio!

Thread Thread
 
braydentw profile image
Brayden W ⚡️

Good idea! I’ll be sure to do that :D

Collapse
 
mis0u profile image
Mickaël • Edited

Nice work bro. For the security, you should put a required in JS and HTML because if I inspect the element and I delete required I can still submit it

Collapse
 
sriduh profile image
Sridhar

Mickael, I am just curious about how to do that. I am also a beginner in Web development.

Collapse
 
mis0u profile image
Mickaël

Hi Sridhar, I'm a php developer, I don't know React sorry

Collapse
 
braydentw profile image
Brayden W ⚡️

Thanks. I'll work on that :)

Collapse
 
hnrq profile image
Henrique Ramos

Congrats, man! it looks really nice on mobile! Good luck on learning React :D

Collapse
 
braydentw profile image
Brayden W ⚡️

Thanks so much!

Collapse
 
imshines profile image
Mohan Kumar

That's a pretty neat UI ❤❤❤
I've been trying to make one as well once It's done I'll share here.

Try using the useRef hook and try implementing localStorage 👍

Collapse
 
braydentw profile image
Brayden W ⚡️

Cool! I'll check those out for the next time :D

Collapse
 
marhime profile image
Marhime • Edited

Well done and good looking UI !

But you should use react refs to refer dom elements

en.reactjs.org/docs/refs-and-the-d...

Collapse
 
braydentw profile image
Brayden W ⚡️

Thanks! I'll try that out :)

Collapse
 
georgeoffley profile image
George Offley

Nice work!

Collapse
 
braydentw profile image
Brayden W ⚡️

Thanks!

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

The one and only defect I could find.

Long names.
dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
braydentw profile image
Brayden W ⚡️

Yep, got to work on that 😅

Collapse
 
sashank__r profile image
Sashank Rampalli

Awesome bro!!! Keep going

Collapse
 
braydentw profile image
Brayden W ⚡️

Thank you!! :D

Collapse
 
jonatasoc profile image
Jonatas de Oliveira Coêlho

Very nice, Brayden!

Collapse
 
braydentw profile image
Brayden W ⚡️

Thanks!

Collapse
 
romelmahmud profile image
romelmahmud

great job man. I am entering React world.. which CSS framework you use?

Collapse
 
braydentw profile image
Brayden W ⚡️

At the moment I just use plain CSS. Thinking of Tailwind :P

Collapse
 
abhisheknaiidu profile image
Abhishek Naidu

Is that Material-UI , you've used?

Collapse
 
braydentw profile image
Brayden W ⚡️

Nope, all styles made by myself :)

Collapse
 
richardstark profile image
RichardStark

Great job man!It's so quick to accomplish such a demo. Welcome to React!

Collapse
 
braydentw profile image
Brayden W ⚡️

Thanks!

Collapse
 
hanna profile image
Hanna

Looks nice. Good luck on the journey.

Collapse
 
braydentw profile image
Brayden W ⚡️

Thanks for the support :D

Collapse
 
braydentw profile image
Brayden W ⚡️

Yeah, I didn’t really work on that.

I kind of skipped over it since it was my first project. I’ll be implementing them in my next web app I’m working on 🙃