Erna  Herzog

Erna Herzog

1626660120

Level Up Your React Designs with Styled Components + JavaScript Switch Statements

Learn how to create flexible components in React for your design system using Styled Components–a CSS in JS library.

Styled Components help make components more readable and keep the headache of styling and element architecture separated.

The pros and cons are often debated, but we’re big fans at Skillthrive. If you want to learn more about the pros and cons so you can make the decision for yourself, check out this article: https://webdesign.tutsplus.com/articles/an-introduction-to-css-in-js-examples-pros-and-cons--cms-33574

👀 LIVE DEMO 👀

https://zealous-morse-4e0f08.netlify.com/

🗂 DOWNLOADS 🗂

https://gum.co/wHdBq

⏰ TIMESTAMPS ⏰

Setup a Gatsby Site with Styled Components: 1:37

Create the Styled Components: 4:51

Install Google Fonts on Gatsby: 7:28

How to Use a JavaScript Switch Statement with Styled Components: 7:57

How to Use Your New Styled Component: 14:22

#WebDev #WebDesign #WebDevelopment

#javascript #webdev #react #javascript switch statements #styled components

What is GEEK

Buddha Community

Level Up Your React Designs with Styled Components + JavaScript Switch Statements
Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Erna  Herzog

Erna Herzog

1626660120

Level Up Your React Designs with Styled Components + JavaScript Switch Statements

Learn how to create flexible components in React for your design system using Styled Components–a CSS in JS library.

Styled Components help make components more readable and keep the headache of styling and element architecture separated.

The pros and cons are often debated, but we’re big fans at Skillthrive. If you want to learn more about the pros and cons so you can make the decision for yourself, check out this article: https://webdesign.tutsplus.com/articles/an-introduction-to-css-in-js-examples-pros-and-cons--cms-33574

👀 LIVE DEMO 👀

https://zealous-morse-4e0f08.netlify.com/

🗂 DOWNLOADS 🗂

https://gum.co/wHdBq

⏰ TIMESTAMPS ⏰

Setup a Gatsby Site with Styled Components: 1:37

Create the Styled Components: 4:51

Install Google Fonts on Gatsby: 7:28

How to Use a JavaScript Switch Statement with Styled Components: 7:57

How to Use Your New Styled Component: 14:22

#WebDev #WebDesign #WebDevelopment

#javascript #webdev #react #javascript switch statements #styled components

Neal  Bode

Neal Bode

1603975620

How to Build a Great Style Guide with React & styled-components Pt.1

How hard could it be to create a style guide for your website, app, or any other project? And, what if you want to build it with React and styled-components? So, will you accept this challenge? Great! This tutorial will take you through the whole process and show you how you, too, can build a great style guide from scratch! Now, let’s start and have some fun!

How to Build a Great Style Guide with React & styled-components part 2.

How to Build a Great Style Guide with React & styled-components part 3.

Project setup

Let’s start with the first step. This step is about putting together the dependencies we will need to develop our style guide. We will need to install four of them-reactreact-domreact-scripts and styled-componentsreactreact-dom probably need no explanation. react-scripts is a bundle of scripts and configuration used and provided by Create React App project.

We will use these scripts and configs to make our work faster an easier. We will not have to deal with any bundler such as Webpack or Parcel. This all will be taken care of by react-scripts. Finally, we will use styled-components to take care about styling. We will not work with any CSS or Sass files. All styling will be done in JavaScript.

If this is the first time you will be using styled-components, you may want to take a look at its documentation. Then, you can also go through two tutorials focused on this library. First is A Simple Introduction to Styled-components. Second is Styled-Components – Mastering the Fundamentals Through Practice. This will help you understand how styled-components works.

Next, we will create scripts to run the style guide on dev server and also to build it when we are done. As I mentioned, we will use scripts from Create React App project. Now, the only thing we need to do is to “wire” together specific scripts with npm scripts. We will create four scripts-startbuildtest and eject. However, today, we will only use the first two. And, that is all. This is how our package.json looks like.

Note: you will need either npm or yarn package managers installed on your computer in order to install dependencies and work on this style guide. Npm is distributed with node. You can get the installer for your system on nodejs website. If you prefer yarn, that is actually really much better option, you can download the installer here.

// package.json

{
  "name": "ui-style-guide",
  "version": "1.0.0",
  "description": "",
  "keywords": [
    "design",
    "react",
    "reactjs",
    "styled-components",
    "style guide",
    "web design"
  ],
  "main": "src/index.js",
  "dependencies": {
    "react": "16.4.2",
    "react-dom": "16.4.2",
    "react-scripts": "1.1.4",
    "styled-components": "3.4.5"
  },
  "devDependencies": {},
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

#react #styled-components #javascript #design development

Olen  Predovic

Olen Predovic

1598433120

Designing Tokens — What Makes Great Design Tokens, and How to Build Them (Part 2)

This is a three-part series where I present what I believe is a great way to consume and maintain design tokens. Examples are written in React and styled-components but the ideas in this article could be adapted to any frameworks.

Introduction

In Part 1 of this series, we came up with a set of desired interfaces for consuming design tokens. In this article, we implement the tokens to fit those interfaces. In Part 3, we will look at how to make the tokens more maintainable.


The Process

There will not be a lot of reading/reasoning in this article. I will follow through each iteration, as defined in the last article, and show you what the design tokens might look like at each stage. To see the reasoning behind each iteration please see Part 1.

We start by assuming that our tokens are initially defined like so:

const tokens = {
  orange: "#ff9b00",
  purple: "#5f259f",
  blue: "#0096e6",
  red: "#ff0000",
  white: "#ffffff",
  lighter: "#e8e8e8",
  lightest: "#b2b2b2",
  dark: "#999999",
  darker: "#666666",
  darkest: "#333333",
  black: "#000000",
};

Iteration 1

In this iteration, we want to group the tokens together by type; whether they are text color or background colors or icon color.

Desired interface:

const MyBanner = styled.div`
  color: ${tokens.text.darkGray}; //color: #333333  
  background-color: ${tokens.background.purple};
`;

New token definition:

const tokens = {
  text: {
    orange: "#ff9b00",
    purple: "#5f259f",
    blue: "#0096e6",
    red: "#ff0000",
    white: "#ffffff",
    grayDarkest: "#333333",
  },
  background: {
    orange: "#ff9b00",
    purple: "#5f259f",
    blue: "#0096e6",
    white: "#ffffff",
    grayLightest: "#b2b2b2",
    black: "#000000",
  },
  icon: {
    white: "#ffffff",
    grayDark: "#999999",
  },
};

Iteration 2

Next, we introduce other token categories such as sizes (font sizes, line heights)and layouts (media queries, z-indices).

Desired interface:

const MyBanner = styled.div`
  color: ${tokens.color.text.darkGray}; //color: #333333   
  background-color: ${tokens.color.background.purple};
  font-size: ${tokens.size.font.sm1};
  line-height: ${tokens.size.lineHeight.small};
  @media (min-width: ${tokens.layout.media.tablet}) {
    font-size: ${tokens.size.font.lg1};
    z-index: ${tokens.layout.zIndex.bottomlessPit};
  }
`;

#token-design #react #javascript #styled-components #typescript-with-react

Mark Mara

Mark Mara

1610801700

Build Reusable React Components with styled-components

I first used styled-components when I starting working on my first large application, and I really like how it works. It allows you to build reusable components that are easy to grow and adapt to new situations as you build different layouts.

I’m going to go over some ways you can use styled-components to make reusable components that abstract the CSS and HTML, creating your own custom component library.

#react #styled-components #javascript #reactjs