How to Build a Website with React, React Router & Styled-Components Pt.3

How to Build a Website with React, React Router & Styled-Components Pt.3
Reading Time: 12 minutes

React gained a lot of popularity. We can say that it became probably the most popular JavaScript library for building user interfaces. Its flexibility allows us to create anything we want, from apps, to websites. This tutorial is about the second. Its goal is to show you how to use React, react-router and styled-components to build your own simple website. In this final part, we will create the rest of the pages and finish our React website. Let’s begin! Continue reading “How to Build a Website with React, React Router & Styled-Components Pt.3”

How to Build a Website with React, React Router & Styled-Components Pt.2

How to Build a Website with React, React Router & Styled-Components Pt.2
Reading Time: 10 minutes

Have you ever though about building a website with React, React-router and styled-components? Then, this tutorial is right for you. In this second, we will start by creating responsive navigation, playing with React state, and creating a few more React components. We will also use some handy helpers from styled-components. And, at the very end, we will create the first page for our React website. So, dust off your knowledge of React and styled-components and get ready. Our adventure into the world of React continues. Continue reading “How to Build a Website with React, React Router & Styled-Components Pt.2”

How to Build a Website with React, React Router & Styled-Components Pt.1

How to Build a Website with [React], React Router & Styled-Components
Reading Time: 11 minutes

How fast can you build a simple website with react, react-router and styled-components? The question is not whether it is doable. Everything is. The real and more important question is, how hard it is? Well, it is actually very easy. You can do this in just a few minutes, even with only a very basic knowledge! In this easy tutorial we will take a look at all the steps that are necessary to do it. So, let’s use the power of react, react-router and styled-component and build a simple website completely from scratch! Continue reading “How to Build a Website with React, React Router & Styled-Components Pt.1”

Create Flipping Card & Responsive Grid with Styled-components & React

Create Flipping Card & Responsive Grid with Styled-components & React
Reading Time: 10 minutes

Have you ever thought about using styled-components to create a simple flipping card and responsive grid layout? In this tutorial, you will get a chance to do both! First, we will use styled-components to create flexbox-based responsive grid system. Then, we will create a component for a very simple flipping card. I hope you will enjoy this very easy tutorial on styled-components and React and find it useful. And, with that, let’s begin. Continue reading “Create Flipping Card & Responsive Grid with Styled-components & React”

Styled-Components – Mastering the Fundamentals Through Practice

Styled-components - Mastering the fundamentals through practice
Reading Time: 10 minutes

Styled-components is becoming more and more popular. Many projects built with React.js use this library. This is no surprise. Styled-components make working with CSS easy and fun, even in JavaScript. However, everything requires practices, especially when what you want is mastery. This is the goal of this article. Let’s go back to the fundamentals of styled-components and practice. Continue reading “Styled-Components – Mastering the Fundamentals Through Practice”

A Simple Introduction to Styled-components – Modular CSS and Reactjs

A Simple Introduction to Styled-components - Modular CSS and Reactjs
Reading Time: 10 minutes

Have you ever heard about styled-components? Chances are that you did, at least if you have some experience with app development, or Reactjs. This is a very interesting take on modular CSS. What is this styled-components thing about? As its website says, its goal is to help developers style their apps without any stress. Let’s take a look at what it is and how we can use it. Continue reading “A Simple Introduction to Styled-components – Modular CSS and Reactjs”