DEV Community: Paul Ccari

Essential concepts you need to know about React

Paul Ccari — Thu, 03 Jun 2021 06:44:27 +0000

I've been using React for a couple of years now but when I started learning it I didn't pay too much attention to what React does for me, like what React abstracts through its API and why do I need to use JSX to build components, or why do we need Babel and so on. So if you're starting learning React or working with it, you might find this post helpful to know about core concepts.

JavaScript to React

Let's say we don't have any React library out there, we just have vanilla JavaScript and we need to create a simple page that only contains the text "I'm learning React Fundamentals" in a div DOM node into the div with id root created.

<html>
  <body>
    <div id="root"></div>
  </body>
</html>

Steps:

Create the div HTML element using document.createElement where we can pass as argument the div as a tagName
Add the text "I'm learning React Fundamentals". We can use textContent for it.
Insert that created element into the document using Append

<html>
  <body>
    <div id="root"></div>
        <script type="module">
          const rootElement = document.getElementById("root")
          const element = document.createElement("div")
            element.textContent = "I'm learning React Fundamentals"
          rootElement.append(element)
        </script>
  </body>
</html>

So we'll get :

<html>
  <body>
    <div id="root">
            <div>I'm learning React Fundamentals</div>
        </div>
  </body>
</html>

Behind the scenes, this is what React does to create DOM nodes, in case you want to dig into it you can take a look at the React source code. React abstracts this imperative browser API to give us a more declarative API to work with.

With that explained, we can say that for creating react applications for the web we need:

React: Help us to create react elements similar to creating an element in browser with document.createElement
React DOM: Help us to render react elements to the DOM similar to append

Using Raw React APIs

Now, let's create the same page we did before with Vanilla JavaScript but using React library. For that, we need to add external scripts so I'm gonna use unpkg which is a cdn for everything on npm, so we can add just the url and we'll load the files for React and React DOM.

Steps:

Create a React element using createElement which receives these params :
- type : It can be a type of element, can be a string like div, span, etc or a React Component(which is usually a class or a function), or can be a React Fragment type
- props : An object containing properties
- [...children] : It can be a string (will be interpreted as text), or reference to other components that will allow us to nest elements. The rest from the third param is going to be the children. Take in mind that, children is a special prop in React
Render React Element to the DOM using ReactDOM.render which receives these params:
- element : A React element
- container : DOM node where the element will be inserted into

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@17.0.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>
  <script type="module">
        const rootElement = document.getElementById('root')
    const element = React.createElement(
            'div',
            { className: "container" },
            "I'm learning React Fundamentals"
        )
    ReactDOM.render(element, rootElement)
  </script>
</body>

Now, Imagine that we want to render a list of fruit like using raw React API :

<div>
    <p>List of my favorite fruits</p>
    <ul>
      <li>Apple</li>
      <li>Orange</li>
    </ul>
</div>

That would be like:

const rootElement = document.getElementById('root')
const element = React.createElement('div', null,
  [
    React.createElement('p', null, 'List of my favorite fruits'),
    React.createElement('ul', null, 
            React.createElement('li', null, 'Apple'),
            React.createElement('li', null, 'Orange'),
        ),
  ],
})

ReactDOM.render(element, rootElement)

Does that look easier to understand to you? It might be but imagine using React in this way in large applications. It can be hard to read and maintain so that's when comes JSX which is a HTML-like syntactic sugar on top of raw React API's.

Using JSX

JSX is not JavaScript which means that the browser will not understand natively so we need to use a code compiler such as Babel that will transform into standard Javascript

You can play around here to see how babel complies JSX to JavaScript

const element = <h1 className="title">I Love React!</h1>

// ↓ ↓ ↓ ↓ compiles to ↓ ↓ ↓ ↓

const element = React.createElement(
  "h1",
  {
    className: "title"
  },
  "I Love React!"
);

As demonstrated, JSX provides us a concise and familiar syntax for defining a tree structure that doesn't require learning a templating language or leaving javascript. Although you need to be aware of JSX Gotchas like:

User-Defined Components must be capitalized: When the react element starts with a lowercase letter, it'll take as a built-in component like span, div, h1. So let's say you create a titlepage component

function titlepage({children}) {
  return <h1 className="title">{children}</h1>
}

function App(){
    return(
        <div>
            <titlepage>My first blog!</titlepage>
        </div>
    )
}

// ↓ ↓ ↓ ↓ compiles↓ ↓ ↓ ↓

function titlepage(_ref) {
  var children = _ref.children;
  return React.createElement("h1", {
    className: "title"
  }, children);
}

var element = React.createElement("div", 
    null, 
    React.createElement("**titlepage**", null, "Hello World"));

// => ⚠️ titlepage is parsed as a string and doesn't take as a component/function

Plus, you'll get an error in your console and it'll suggest you name it starting with an uppercase letter

// Error: The tag <titlepage> is unrecognized in this browser. 
// If you meant to render a React component, start its name with an uppercase letter.

Final Notes

I would encourage you to spend some time with the source code in React, play around with JSX in the online babel REPL to see the compiled version of that code, so you can be better at understanding, reading and using it. Knowing what the abstraction does, will make you more effective to use it.

Here are a few miscellaneous link related that help me to understand behind the scenes of React

13 things you need to know about React
Fun with React Elements and JSX
I would recommend to take EpicReact course by Kent C. Dodds

Hope you enjoyed it. Thanks for reading!

... As always, enjoy your process of learning 🚀

Feel free to reach out if you wanna chat about anything.

How to become a better learner as a developer

Paul Ccari — Fri, 21 May 2021 06:32:16 +0000

When I started learning how to code, I looked for many online resources such as blog posts, youtube videos, online courses, and I used to take them and do the same thing they were doing and then jumped to another resource to do the same over and over again. From my point of view at that time, I was learning a lot but actually, I got an illusion of learning, which is when you think you know more than you actually do, you overestimate what you know about a topic when you can only recognize.

So I failed plenty of times and that's OK, it's a part of the process but I decided to do research and learn more about effective learning and here's what I do to counter the illusion of learning and get the most value from it.

Note: We all have our learning style, this blog post doesn't pretend to change your way of learning. I'm only showing you what works best for me during my developer career but I would encourage you to give it a try and see what happens.

Focus on one thing

When I started learning front end development on my own, I realized that we had a bunch of technologies to learn and I didn't have an idea how to start, so I looked for a roadmap to become a front end developer which is very helpful to guide you step by step but at first, I felt very intimidating and challenging. In consequence, I planned my day to learn basics about Web development, HTML, CSS, JS, and a bit of ReactJS but that ended up making me feel overwhelming during the first 2 months. Each topic contains a lot of content and that was just basics knowledge. In addition, I had a list of several online resources about each topic and I couldn't finish all of them at the end, it was kind of overwhelming. So I would say that you should try:

Focus on one topic and take your time: You don't need to rush and ignore the fundamentals of each topic even when it seems pretty straightforward, do more research and be curious about why it works in that way.
Focus on a few learning resources: I would say choose your best top 3 resources you enjoy watching, reading, or listening to.
Create focused and productive study sessions: No distractions! I usually put away my phone and turn off all notifications and I use a Pomodoro technique to get more out of less.

Pomodoro technique is a time management system that helps to be productive and make as much progress on a task as possible in 25 minutes. You break your workday into 25-minute chunks separated by five-minute breaks. After about 4 pomodoros, you take a longer break of about 15 to 20 minutes. I usually use Forest App to make it work! Try it out!

Take a break

As I mentioned before, I used to spent many hours studying and even at night, I didn't want to go to sleep because of my enthusiasm and motivation of learning new things. But after a few weeks, I felt less motivated, I had a high level of stress that leaves me emotionally and physically burned out and it seems like nothing you do matters. Later, I realized that it's always good to push ourselves to the limit and do the hard work but there's a fine line between testing your limits and pushing past your breaking point. So I would recommend doing few things to avoid burnout and be more productive:

Pomodoro technique
Don't skip out on sleep to get more studying done: Getting enough sleep is essential for good health and well-being throughout your life. Take at least from 7-9 hours and make it a priority. I found so much information about why sleeping is so important here. Check it out.
Do physical activities: You can start by stretching yourself in your five-minute breaks. Or you start doing swimming, jogging, walking, dancing, etc. Physical activities regulate stress, anxiety and can be a real energy booster.

Apply what you learn

To be honest, I've watched plenty of videos since I started learning how to code and I don't quite remember all things I studied. Consequently, I ended up wasting so much time because I need to read, watch, research, and learn again and again the same topic I studied before. Why does that happen? Because I didn't build anything from it. It's just simple as that, I used to code along with courses and videos, doing the same thing and when I completed them, I jumped to another course and so on which is commonly called Tutorial Hell. In this way, I noticed that "Output is more important than input" and we can't learn just by watching, so you need to:

Be curious about certain behaviors: Break the codebase, and make some changes to test it out and see what happens and how it works, and I'm sure you'll learn more.
Build projects: After finishing watching any course or tutorial, built the project from scratch by yourself now or you can add extra features to the final project but make it challenging and you'll see what you learn. Coding along is not bad, but don't just do that because it brings you an illusion of learning like you won't get any errors while coding and that's not the real world.

Learn In Public

I've never been selfish to not teach or share something I do know about a topic to someone but I was very timid and reserved and it might be a consequence of growing in my entire life since school where I used to keep what I learned to myself and be a better student.

However, I recognize that Tech industry is not like that, we have many open source projects that are available to us to read and learn from its codebases, besides that most developers in the community give away knowledge in articles, tutorials, tweets, etc. That's incredible, right? So I would propose you to:

Share what you're learning on any social media: Not only on social media, you can tell someone what you learned and start discussing it. Or you can take advantage of social media to get some feedback and support from the community! You can start by posting a tweet, then you can create a blog post, an e-book, or produce a video, podcasts. You can try them and see what you like most.
Don't be afraid to learn in public: It's your process! if sharing in public makes you feel uncomfortable, that's totally fine. That means you're pushing yourself, so keep doing your best and don't blame yourself.

Final Notes

I strongly believe these techniques can help us to be more productive and learn more effectively anything we want and not only coding topic related. It can be cooking, playing a new instrument, anything new we want to learn in our lives. Try it out!

Here are some links related that help me to be a better learner:

About the importance of quality sleep: Joe Rogan Experience w. Matthew Walker
How to Learn Anything! For Creatives & Self Learners
Strongly recommend this book: The Coding Career Handbook by Shawn Wang

Hope you enjoyed it. Thanks for reading!
... As always, enjoy your process of learning 🚀

Feel free to reach out if you wanna chat about anything.

Everything you need to know about Styled Components

Paul Ccari — Tue, 04 May 2021 00:12:08 +0000

When I started learning CSS, it seems pretty straightforward to play with some selectors and apply styles to any elements but as bigger, as my projects get, my style sheets look more chaotic and you've probably experienced it for yourself. At some point, it gets hard to figure out a good way to organize your styles.

Then you probably jump to use some preprocessors like SASS, LESS which add a lot of useful features but they don't do much to control CSS specificity unless you start using some methodologies like BEM (Block, Element, Modifier) which allows reuse of existing code without duplications and divide UI into independent blocks.

After a couple of years, a new paradigm of CSS-in-JS appears and tries to solve these problems to construct and manage our styles in a component-specific manner to allows us to create custom, exportable components.

One of them is Styled Components, it provides us many cool features to style our React components.

It generates unique class names for your styles which means that you won't have any issues with duplication, overlap, or misspellings.
You can adapt styles of a component based on its props which makes dynamic styling.
Easier to maintain styles no matter how big is your application while still writing CSS you know

Styled components are available both for React and React Native

Installation

You can install it running a single command and you're ready to roll:

npm install --save styled-components

Getting Started

Style an HTML element

We are going to create a Title component based in an HTML element like h1 to give some styles like giving a purple color and align it to center to use is it in Blog Page.

import styled from 'styled-components'
import * as React from 'react'

const Title = styled.h1`
    color: purple;
    text-align: center;
`

const BlogPage = () => {
    return(
        <div>
            <Title> Personal Blog </Title>
            ...
        </div>
    )
}

export default BlogPage;

Style a React Component

What if we already have a set of custom React components and we want to extend styles? It's almost similar, when you want to style an HTML element, you put a dot. If you want to style the components, you put parentheses and pass the actual component. In this case, we are gonna style a button from material-ui and adjust his size with css.

import Button from '@material-ui/core/Button';

const FullWidthButton = styled(Button)`
    width: 300px;
`

Keep in mind that you can style pseudo-selectors and classes inside of the styled component if needed.

const Button = styled.button`
    ...

    :hover {
        color: blue;
    }

    ::before {
        content: ' ';
        ...
    }
`

Note: Styled components works with Tagged template literal under the hood. If you don't know much about it, you can find more info here FreeCodeCamp.

Creating Global Styles

To give global style, we need to use createGlobalStyle and create a constant from it and anything inside of here will be styled in our entire application. This will be a component that needs to be called at the Root component and make sure it starts with an uppercase.

import {createGlobalStyle} from 'styled-component'

const GlobalStyles = createGlobalStyle`
    body {
        font-family: Roboto;
    }
`

export default function App(){
    return(
        <>
            <GlobalStyles/>
            ...
        </>
    )
}

Adjust Style based on props

We can set dynamic styles according to props that can be either true or false based on conditionals.

A simple case would be to give some styles to stand out recent blog posts we published from all the list. I'm gonna give a gradient color to the background of card.

const BlogCard = styled(Card)`
    ...
    ${props => 
            props.isNewPost &&
            `
                background: linear-gradient(to right, red, orange);
            `
        }
`

export default function BlogList(){
    return(
        <>
            <BlogCard 
                isNewPost
                title="Everything you need to know about Styled Components"
                ...
            />
            <BlogCard 
                title="Learning Tips from my experience as developer"
                ...
            />
        </>
    )
}

Style a component based on complex props

In some scenarios, we will have a prop that can be a string and not only a boolean value which means we will have more conditionals.

Eg. I have a list of blog post cards and I would love to change the color of its category according to its value. If it's personal we'll set it to purple color, if it's react should be orange and if it's git let's change it to red.

const CategoryName = styled.span`
    font-size: 0.875rem;
    color: ${({ topic }) => {
        if(topic === 'personal') return 'purple';
        if(topic === 'react') return 'blue';
        if(topic === 'git') return 'red';
        return 'black'
    }}
`

export default function BlogCard(){
    return(
        <Card>
            ...
            <CategoryName category={category}>{category}</CategoryName>
            ...
        </Card>
    )
}

Animations

To create animations in styled components, we need to import keyframes and start writing our css animation code. Then we need to reuse that variable where we needed.

In this case, we'll animate the position of an h1 to go from left ro right.

import {keyframes} from 'styled-components'

const move = keyframes`
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%)
    }
`

const Heading = styled.h1`
    animation: ${move} 2s ease infinite;
`

Create and use a Theme

To ingrate a theme on our application, we need to use the ThemeProvider and pass an object to it's theme prop. We will use this theme to set colors and fonts.

import {ThemeProvider} from 'styled-components'

// create Theme object
const theme = {
    colors: {
        purple: "#123123",
        blue: "#2563eb"
    },
    fonts: {
        heading: "Roboto, sans-serif",
        body: "Montserrat"
    }
}

// how to use it in a styled component
const Heading = styled.h1`
    text-align: center;
    color: ${props => props.theme.colors.purple}
    font-family: ${({ theme }) => theme.fonts.body} // destructuring props
`

// Call ThemeProvider in your Root Component
export default function App(){
    return(
        <ThemeProvider theme={theme}>
            <Heading>Hello its from the theme</Heading>
        </ThemeProvider>
    )
}

Using `css` prop to define styles

Sometimes we don't want to create an extra component to just apply a bit of styling and there it comes css prop. It works on HTML tags as well as components and supports everything styled components support including props, theme and custom components.

To enable support for the css prop you have to use a babel plugin or macro.

Usage with the babel plugin

// Babel plugin does that automatically!

// HTML element
<div
  css={`
    background: papayawhip;
    color: ${props => props.theme.colors.text};
  `}
/>

// Custom component
<Title
  css="padding: 0.5em 1em;"
/>

Usage with Babel macro

// You need to import it manually
import styled from 'styled-components/macro'

// Custom component
<div
  css={`
    background: papayawhip;
    color: ${props => props.theme.colors.text};
  `}
/>

Note that Babel plugin or macro turns any elements with a css prop into a styled components.

Using `as` prop to reassign the HTML tag

In some instances, we want to keep all styling we've applied to a component but just change what element/component is rendering.

I usually use it when it comes about anchor tags and buttons. We don't need to rewrite the css rules and create a component for our anchor tag when it has the same look and feel with our buttons. Instead, we can use as and then pass the attributes the anchor needs.

const Button = styled.button`
    ...
`

<Button as="a" href="https://www.google.com.pe"> Go to Google.com </Button>

Using `attrs` method to add HTML attributes

It allows us to change and add attributes to our styled elements. The attrs object accepts either any type of attributes that belongs to HTML tags or a function that receives props to finally merged them into existing component props.


// In this case, type `button` is going to override whatever is in component
const Button = styled.button.attrs({
    type: "button"
})`
    display: inline-block;
    ...
`

// We can use props
const Button = styled.button.attrs(props => ({
    type: props.type || "button"
}))`
    display: inline-block;
    ...
`

<Button type="submit">Submit</Button>

Use Styled Components with the Object Syntax

There is also another way that we can style components, we can use object-based styling. Let's see how different that is. At the end, both ways do exactly the same thing and they are just different ways of writing styled components

const Title = styled.h1(props => ({
    color: red,
    fontSize: props.small ? 16 : 24,  // by default its pixel
    fontFamily: 'sans-serif',
}))

Final Notes

As you can see, it's actually pretty easy to understand and start using styled-components in your React applications. There are cool features that can help us to custom our component the way we want, make some dynamic styling using props, creating a theme and so on. So I would encourage you to dive into the documentation and try it out on your projects.

Here are a few miscellaneous link related that help me to understand more about styled components

Hope you enjoyed it. Thanks for reading!

... As always, enjoy your own process of learning 🚀

Feel free to reach out if you wanna chat about anything.

DEV Community: Paul Ccari

Essential concepts you need to know about React

JavaScript to React

Using Raw React APIs

Using JSX

Final Notes

How to become a better learner as a developer

Focus on one thing

Take a break

Apply what you learn

Learn In Public

Final Notes

Everything you need to know about Styled Components

Installation

Getting Started

Style an HTML element

Style a React Component

Creating Global Styles

Adjust Style based on props

Style a component based on complex props

Animations

Create and use a Theme

Using css prop to define styles

Using as prop to reassign the HTML tag

Using attrs method to add HTML attributes

Use Styled Components with the Object Syntax

Final Notes

Using `css` prop to define styles

Using `as` prop to reassign the HTML tag

Using `attrs` method to add HTML attributes