Styling in React – codeburst

  • A style rule will have been inlined ğŸ‘� – Before digging into third party CSS in JS, let’s roll back to creating it ourself to understand the core benefits.
  • ğŸ‘� – A major benefit of defining CSS in JS is to be able to conditionally generate styles.
  • You’re also inlining everything 😭 – Third party packages exampleLuckily, there are some great third party packages to aid with handling CSS in JS 😌 – I don’t have experience with them all so I will be using styled-components for these examples.
  • If you’d rather take a quick look at styled-components before going any further, check it out here ğŸ‘� Don’t worry though, I will keep any examples intuitive and simple.
  • But consider that our CSS will have to contain styling for when the nav is open and closed ğŸ‘� – Using styled-components we could create something more along the lines of – That is so much clearer ğŸ˜� Any styling declaration via classNames are extracted and we are left with…

Styling is a huge part of the user experience for your apps. You’ve got a new design and you’re going to build your new awesome app in React. But how do you go about implementing that design? It…
Continue reading “Styling in React – codeburst”

Stop Managing CSS – Charlie Hulcher – Medium

Stop Managing CSS  #cssinjs #react #styledcomponents #css #http2 #reactjs

  • Stop Managing CSSA response to Managing CSS JS in a HTTP/2 WorldThis article on getting great performance out of HTTP/2 would have excited me hugely before.
  • Sane structure and tooling around SCSS that allows for the best loading benefits with HTTP/2 is definitely the future when your styles are separate from everything else.I believed in separating styles, behavior, and structure for a long time.
  • Keep style alongside behavior and structure.Coming from that context, reading about the right way to manage CSS felt like watching exciting evolution for a dated paradigm.
  • A cleaner design for a horse harness is a beautiful thing but doesn’t beat the engine.Solving the problem of chunked CSS delivery in order to get performance benefits from HTTP/2 sounds to me like reinventing the wheel from what you’re probably already doing.
  • Why rebuild that process in parallel for CSS?The core problem comes down to managing CSS inclusion/exclusion from the project through a human process.

This article on getting great performance out of HTTP/2 would have excited me hugely before. Sane structure and tooling around SCSS that allows for the best loading benefits with HTTP/2 is definitely…
Continue reading “Stop Managing CSS – Charlie Hulcher – Medium”

Animate React Native UI Elements

Animate React Native UI Elements course by @browniefed #react

  • In this course we will learn and demonstrate the basic concepts of the React Native Animated API.
  • We’ll use Animated calls like and to animate style properties, and learn how to combine animations to create more complex effects.
  • We’ll learn about more advanced interactions like animations with touch events, interpolation, and flip animations.
  • The ultimate goal is to gain an understanding of how to animate React Native Views, how you can apply them to many different types of styles, and how to enhance the experience in your application.

In this course we will learn and demonstrate the basic concepts of the React Native Animated API. We’ll use Animated calls like timing and spring to animate style properties, and learn how to combine animations to create more complex effects. We’ll learn about more advanced interactions like animations with touch events, interpolation, and flip animations. The ultimate goal is to gain an understanding of how to animate React Native Views, how you can apply them to many different types of styles, and how to enhance the experience in your application.

Continue reading “Animate React Native UI Elements”

New on @eggheadio Convert a @reactjs app from using traditional CSS loaded from a file to “styled-components”.

  • In this lesson, we see how we can apply styles globally with the “injectGlobal” helper method in styled-components.
  • This method allows us to apply styles on the body element, which cannot be wrapped in a styled-component.

These lessons cover converting a React app from using traditional CSS loaded from a file to styled components.

Continue reading “New on @eggheadio Convert a @reactjs app from using traditional CSS loaded from a file to “styled-components”.”

A library for building cross-platform apps

ReactXP: A library for building cross-platform apps on #ReactJS or #ReactNative |

  • With React and React Native, your web app can share most its logic with your iOS and Android apps, but the view layer needs to be implemented separately for each platform.
  • We have taken this a step further and developed a thin cross-platform layer we call ReactXP.
  • If you write your app to this abstraction, you can share your view definitions, styles and animations across multiple target platforms.
  • In general, it exposes APIs, components, props, styles and animation parameters that are implemented in a consistent way across React JS (HTML) and React Native for iOS and Android.
  • A few platform-specific props and style attributes have been exposed, but we have tried to keep these to a minimum.


The authors of React use the phrase “learn once, write anywhere”. With React and React
Native, your web app can share most its logic with your iOS and Android apps, but the view
layer needs to be implemented separately for each platform. We have taken this a step further
and developed a thin cross-platform layer we call ReactXP. If you write your app to this
abstraction, you can share your view definitions, styles and animations across multiple target
platforms. Of course, you can still provide platform-specific UI variants, but this can be done
selectively where desired.

Continue reading “A library for building cross-platform apps”

Animate React Native UI Elements

Animate React Native UI Elements course by @browniefed #react

  • In this course we will learn and demonstrate the basic concepts of the React Native Animated API.
  • We’ll use Animated calls like and to animate style properties, and learn how to combine animations to create more complex effects.
  • We’ll learn about more advanced interactions like animations with touch events, interpolation, and flip animations.
  • The ultimate goal is to gain an understanding of how to animate React Native Views, how you can apply them to many different types of styles, and how to enhance the experience in your application.

In this course we will learn and demonstrate the basic concepts of the React Native Animated API. We’ll use Animated calls like `timing` and `spring` to animate style properties, and learn how to combine animations to create more complex effects. We’ll learn about more advanced interactions like animations with touch events, interpolation, and flip animations. The ultimate goal is to gain an understanding of how to animate React Native Views, how you can apply them to many different types of styles, and how to enhance the experience in your application.

Continue reading “Animate React Native UI Elements”

A library for building cross-platform apps

  • With React and React Native, your web app can share most its logic with your iOS and Android apps, but the view layer needs to be implemented separately for each platform.
  • We have taken this a step further and developed a thin cross-platform layer we call ReactXP.
  • If you write your app to this abstraction, you can share your view definitions, styles and animations across multiple target platforms.
  • In general, it exposes APIs, components, props, styles and animation parameters that are implemented in a consistent way across React JS (HTML) and React Native for iOS and Android.
  • A few platform-specific props and style attributes have been exposed, but we have tried to keep these to a minimum.


The authors of React use the phrase “learn once, write anywhere”. With React and React
Native, your web app can share most its logic with your iOS and Android apps, but the view
layer needs to be implemented separately for each platform. We have taken this a step further
and developed a thin cross-platform layer we call ReactXP. If you write your app to this
abstraction, you can share your view definitions, styles and animations across multiple target
platforms. Of course, you can still provide platform-specific UI variants, but this can be done
selectively where desired.

Continue reading “A library for building cross-platform apps”

React.js components formodular charting and data visualization

Victory: #ReactJS components for modular charting and data visualization

  • Victory is a trademark of Formidable Labs, Inc.
  • Extend the Victory experience on Android and iOS platforms with an identical API. npm install victory-native
  • We deploy a mixture of consulting, staff augmentation, and training to level up teams and solve engineering problems.
  • Formidable is a Seattle-based consultancy and open-source shop, with an emphasis on Node.js and React.js.
  • Get in touch or view our Careers Page .

A collection of composable React components for building interactive data visualizations.
Continue reading “React.js components formodular charting and data visualization”

Blueprint – A React UI toolkit for the Web

Blueprint - A @reactjs toolkit for the web by @PalantirTech

  • TypeScript makes developing with Blueprint faster and more predictable with static types.
  • React components and TypeScript interfaces are easy to compose together.
  • Go to documentation View GitHub repository
  • Universal design concepts and modifiers are applicable across components.
  • Blueprint is an open source project developed at Palantir.

A React UI toolkit for the Web
Continue reading “Blueprint – A React UI toolkit for the Web”

Build a simple component to handle media queries in ReactJS — Boyney

Build a simple component to handle media queries in #ReactJS:

  • The component behaves as a wrapper component for child components.
  • Using media queries and a wrapper component to handle media queries in ReactJS
  • So I explored using CSS and Wrapper Components to do something similar.
  • Now lets use our component in action.
  • You can add any media query you like, just make sure you match the class name up to your propTypes in your MediaQuery component.

I have been exploring a quick and easy way to add Media queries in React using styles and a simple wrapper component. Together we will quickly explore and create a simple to use MediaQuery component.
Continue reading “Build a simple component to handle media queries in ReactJS — Boyney”