DEV Community: Tiago Brito

How to create a teaser with styled-components and react

Tiago Brito — Mon, 07 Mar 2022 08:21:18 +0000

In my last article, I showed how to extend a button, modify it and use it anywhere on your app. In case you missed it, use the menu above and go to the previous article.

In this article, I will show you how to build a teaser from scratch, let's go!

Create the files

To give more structure to our code, we'll create two folders inside of each other:
components -> teaser
Inside the teaser folder, create a subfolder called teaser.js file.

Creating a basic component.

Inside the teaser.js create a basic component and export it.

import React from "react";

function Teaser() {
  return <div>teaser</div>;
}

export default Teaser;

Inside the file index.js, import the teaser and display it.

import styled from "styled-components";
import Teaser from "../src/components/teaser/teaser";

export const Box = styled.div`
  display: grid;
  grid-template-columns: 1fr;
  width: 500px;
  gap: 20px;
  margin-top: 100px;
  align-items: center;
`;

export default function Home() {
  return (
    <Box>
      <Teaser />
    </Box>
  );
}

If you run the website you should see the word "teaser" on the home page in your browser.

Open the VScode terminal and type yarn dev and go to the following URL "http://localhost:3000" on your browser.

Building the teaser

To improve the readability of the code we will have our components separated from the styles files.
Inside the styles.js file import styled from style-components import styled from "styled-components";

Create two style components, called TeaserContainer and TextContainer.
Import both of them into the teaser.js file.

export const TeaserContainer = styled.div``;

and

export const TextContainer = styled.div``;

Instead of importing each styled component separately from the styles file, we can import all the components simultaneously with a single import.

import {TeaserContainer,TextContainer} from "./styles";

Call the styled components TeaserContainer and TextContainer inside our component change the basic component we created earlier to the code below.

function Teaser() {
  return (
    <TeaserContainer>
      <TextContainer>
       Placeholder text
      </TextContainer>
    </TeaserContainer>
  );
}

We won't see any changes yet as we just created the shell for our components, let's start styling it.

We will be using Grid (How to use grid) to positioning. The TeaserContainer will have this CSS

  display: grid;
  grid-template-columns: 1fr;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;

While in the TextContainer will have this CSS:

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;

Now you should see something like this on your browser.

Our teaser will have a title and descriptions as well, let's add it!

In the styles.js file creates another two styled components, one called "Title" that will extend an h2 and the other called "Description" that will extend a p tag.

Inside each new styled component, you can add the following styles.

export const Title = styled.h2`
  margin: 0;
  color: #5cc9e2;
`;

We won't add any styles in the description now, it will change later when we make it responsive.

export const Description = styled.p``;

Import the 2 newly created components above to the index.js file.

import {
  TeaserContainer,
  TextContainer,
  Title,
  Description,
} from "./styles";

Call each one inside our main component, as seen below, and change the title and the description for something that you want.

return (
    <TeaserContainer>
      <TextContainer>
        <Title>This is my first Teaser</Title>
        <Description>
          I just built this nice teaser dor the first time ;)
        </Description>
      </TextContainer>
    </TeaserContainer>
  );

Now we just need to add the image.

Adding Image

For the image, we will use the Image component from next.js, first we will import it.

import Image from "next/image";

Find an image that you would like to use and add it to the public folder, import it in the teaser.js file. I called my image city.jpeg.

import city from "../../../public/city.jpeg";

Next we call the component just above the TextContainer component.
<Image alt="city" src={city} layout="intrinsic" responsive />
What it is:
intrinsic: Scale down to fit width of container, up to image size.
Responsive: Scale to fit the width of the container

You can check out other next.js image properties here

That is it, we have our teaser.

Making the teaser responsive.

We are going to use media queries to work with the responsiveness of our teaser.

To make our teaser 50% image and 50% text we need to make the grid two columns and also add a gap so it does not stick together.

In the styled component TeaserContainer add the following just below the background: #fff;

 @media (min-width: 700px) {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

We are saying to the browser to render those two properties when the screen has a minimum width of 700px, so the browser will ignore those previous styles for the same two properties(If there is any) and will use the new ones set inside the media query.

You should see your image on the left-hand side and the text on the right-hand side.

And we are all done, we have a Teaser responsive for 2 breakpoints, one from 0 to 700px and another from 701px to infinite.

There are some tweaks we can do to make it better, like adding more breakpoints and adding a maximum height to the image, the latter is not recommended as it could break the teaser, for instance, if you have a long description.
There are some other technics that we can use to prevent this issue from happening but it is out of the scope of this article.

Tip:

I hope these articles can help you build your next app.

"This" is my teaser 😁

Have a great day 😉

Using props on styled-component and next.js

Tiago Brito — Thu, 24 Feb 2022 10:58:18 +0000

If you landed here and don't know how to install and use style component you can start with this articles here.

In today's article, we'll talk a little bit about props.
Props is a React special keyword that stands for properties and it is used to pass data between components.

The styled-component lets you use props and change the CSS with it, as well as do other things that are out of the scope for today.

For instance, if props are "primary" change these colours, so you can dynamically change your button based on anything that you want.

How do we use those Props?

For instance, create a button that will have the following CSS:

export const Button = styled.button`
 cursor: pointer;
 padding: 15px 22px;
 border-radius: 24px;
 border: none;
 font-weight: 500;
 color: #fff;
 background: #0096c7;
`;

Remember to import the styled from the styled component at the top of your file, like this. 👇

import styled from "styled-components";

But we want another button that will have the same CSS as the previous one but with a different background colour.

To achieve this we can use props, passing a prop called "secondary" to the second button.

<Button secondary>Secondary</Button>

In the CSS for that button we need to add the code below,

background: ${(props) => (props.secondary ? "#f00" : "#00a8ff")};

The code above has a function that gets props, we can target that secondary prop, like this props.secondary.

Secondary on this instance is a boolean, and if this exists, so the secondary is true, it will return the first value "#f00" otherwise will use the second value "#00a8ff" 🤯

In the end, our file will look something like this 👇

This is useful if you want to change only one or 2 props, but what happens when you need to change half of the styles?

It can be a bit too repetitive to type that whole thing over and over for each of the CSS properties that you want to change.

For that, we can use props and change everything at once, even add new CSS to it if we wish.
To achieve that we can add the code below 👇

 ${(props) =>
 props.secondary &&
 `
 background: #f00;
 color: #00a8; 
 border-radius: 0
 `};

Your code should look like this

Some people will find this a bit too hard to read, but if you have the correct format or styles in your code editor it will become easy to read.

In the end, your code will look like this

Yes I did add a Box there to centre everything, but it is not important for our example here.

That is Props folks

What is next?

In the next article, we will explore how to build a teaser that can be used across the website.

Stay tuned 👋

How to add Style-components to Next.js and start using it 🤪

Tiago Brito — Tue, 15 Feb 2022 22:09:27 +0000

In this tutorial, I'll show you how to add Styled-component to Next.js. If you don't know how to create a basic app with Next.js I'll suggest to you first read this post here

For this tutorial, I'll use:

I'll use VSCode for our example here, but you can use any other code editor that you prefer.

How to instal Styled Component? 🤔

On your terminal go to your folder project.
if you are using npm run:

npm install --save styled-components

if you are using yar run:

yarn add styled-components

PS: If you use yarn it is recommended that you go to your package.json file and add the following.

  "resolutions": {
    "styled-components": "^5"
  }

This is to avoid many problems that can happen from multiple versions of styled components being used on your project.

Congratulations 👏 🎉 you add Styled-component to your project, easy right?

Well, how do I use it now?🤔

Styled components use tagged templates literal to style your components. So you can give names to H1, p, button tags and so on, it helps to debug and make your code much cleaner to read in my opinion.

So instead of having a component like this👇

You can have it like this👇

But how do we do it?🤔

Simple, first we need to import the style from the styled component like so 👇

import styled from "styled-components";

and then export a const with the name you choose with the styled template literal like below 👇

So your file will look like this 👇

Then styled components will generate the tags and add unique classes to your tags.

But it also makes it super hard to debug later, as you just have an h1 or div and trying to find which one is not working will be crazy.

To solve this issue we can run in our terminal the following:
If you use yarn

yarn add babel-plugin-styled-components --dev

If you use npm

npm install --save-dev babel-plugin-styled-components

We will need to create a file called .babelrc at the root of our project.
and add the following code:

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true, "displayName": true }]]
}

and voila 💃

Now the const name we created Title will be added to our tags as part of the class names, making our lives so much easier

Now for the real congratulations 👏 🎉 👏 🎉
We just added styled components to our project and learned how to start using them.

We are the champions

What next?

Well, this is just the tip of the iceberg, Styled components have so much more to be explored that I'll have new posts about it soon.

Until next time 👋

How to create a basic app with Next.js

Tiago Brito — Tue, 15 Feb 2022 12:59:08 +0000

Hello dev 👋

In this article, I'll show you how to create a basic APP with next.js

What is Next.js? 🤔

Next.js is an open-source framework built by the Vercel team on top of Node.js, it does enable React applications to server-side render and generate static websites.
React does endorse Next.js as one of the "Recommended Toolchains" in their official documentation for developers that are looking for solutions when "Building a server-rendered website with Node.js", so I guess we are on the right track here.

How to install Next.js?🤔

I'll use Visual Studio Code (AKA VSCode) for our sample here, but you can use any other code editor that you prefer.

Open VSCode and open the explorer panel on the left-hand side.
Click open folder and create a new folder where you will have your project.

Create a new folder and open it, your VSCode may "refresh", this is normal.

Open VSCode terminal, this terminal is the same as you have on your computer but it already put you in the correct folder for your project.😉

To open the terminal on VSCode
PS: You can use the shortcut you can see on the right-hand side.

Rrun the following command (Choose one)
PS: if you don't know the difference don't worry I'll have an article explaining the difference soon.



npx create-next-app@latest



yarn create next-app

you can use any of the codes above to install Next.js

Once you run the command above you will have to give a name to your project, you can choose anything, is better to give a proper name from the start, but don't worry too much, for now, this one is just for fun.

After the installation is done, navigate to the folder created by Next.js with the name you gave to your app with the command below, changing myAppName for your app name.



cd myAppName

After you can run the following command to start the server and see your site.

If you choose npx creat .... above 👆 is better to use the code below.



npm run dev

If you choose yarn creat .... above 👆 us this code:



yarn dev

On your browser go to http://localhost:3000 to view your application.

And to edit what you see you can edit the code inside the file pages/index.js.

Once you save it you can see the changes on your browser.🎉

Congratulations 👏🎉

you just made your first app

You are The Best

What next?

Next.js has many samples and boilerplates, I'll cover a few of them soon, so we can have some fun learning how to build a blog, how to use Styled-Component and how to use a Content management system (CMS).

See you next time 😉