DEV Community

Keys87
Keys87

Posted on • Edited on

Journey of SkyPress-Pt 1: Review

Hello, viewers! or I readers I suppose, I'm... uh, just call me Keys. I'm learning ReactJS and mastered the core front-end tech + PHP. Ok no more nonsense, let's start now

In this part, we aren't going to see any code or are we? 'Cause this is my present self which'll be my past self. Ok for real, let's start now

So why am I doing a review? Why not get into code now? What even is SkyPress?!

answers, from the first to last question:

  1. Because I want all of you to understand what I've been building prior to this post
  2. I feel I need to do a review
  3. It's like wordpress but not quite. It's more like a GUI to make a HTML page, with styles, and probably JS

I already build the landing page and now building the heaviest part, the designer using react. Problems come(as they often do)

  1. React won't display anything, solved by wrapping JSX in the return statement(yes, I'm sloppy)
  2. React don't display anything in a component, if you are intrigued by this consider checking my stackoverflow question where I explain this problem in depth, not yet solved

OH GOD! I AM SO SLOPPY! I FOUND IT, THE ANSWER TO NUMBER 2!

I forgot to pass a prop in react

<button type='button' className={'bg-primary text-white p-2 m-1 rounded'+extraClasses}>{content}</button>
Enter fullscreen mode Exit fullscreen mode

See that content props there? I forgot to pass it as a attribute in the JSX, and now I know that we also could do this

<Btn>Hello</Btn>

rather than this

<Btn content='Hello'></Btn>

The former could be done by passing the children props to the element declaration

const Btn = ({children}) => {
  return (
    <button type='button'>{children}</button>
  );
}
Enter fullscreen mode Exit fullscreen mode

and just pass the text in between the angled brackets like good 'ol HTML

anyways I must prepare for my math course and start to work on my language project

Ciao!

Top comments (2)

Collapse
 
keys87 profile image
Keys87

Well guys, uh, sorry for the weird markdown

Collapse
 
keys87 profile image
Keys87

Fixed the markdown