4. Four ways to style react components – codeburst

  • All depend on your personal preferences and the specific complexity of your application.If you want to add just a few style properties, then inline styling is the best option.When you want to reuse your style properties in the same file then style-component are perfect.When your application is more complex I…
  • Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style’s value, usually a string.We can create a variable that stores style properties and then pass it to the element like style={nameOfvariable}We can also pass the styling directly…
  • CSS ModulesA CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
  • Great article about css modules here.Similar to css we import css file import styles ‘.
  • Styled-components 💅Styled-components is a library for React and React Native that allows you to use component-level styles in your application that are written with a mixture of JavaScript and CSSFirst we need to install styled-components librarynpm install styled-components –saveNow we can create a variable by selecting a particular html element…

There are four different options to style React components. All depend on your personal preferences and the specific complexity of your application. In React, inline styles are not specified as a…
Continue reading “4. Four ways to style react components – codeburst”

With styled-components into the future – 💅 styled-components – Medium

With styled-components into the future  #styledcomponents #react #cssinjs #css #reactjs

  • Those remain the same and intact.While this sounds like no more can be achieved from a library that was mostly about best practices and common patterns in CSS, we are still in a position to drive change in the community.And this is because of the ecosystem that people have created…
  • Even more so with our new docs that we’ve published a few months ago.But the real question is, what makes it the library you know and love?There’s a lot of great content and talks from both Max and Glen, so if you’re new to what the ideas of the library are,…
  • [1]Then we have to transform the CSS to be able to inject it [2], and finally inject your CSS into the stylesheet, at the position that we’ve marked earlier.In v2 and onwards we’ve focused a lot on optimising all of the different steps involved here for performance, but one step…
  • The idea that becomes increasingly important here is, that we can’t build a library that works for some special use cases, but what we can build is a CSS infrastructure that allows you to change the CSS yourself.Let’s see how we could approach this.The interesting thing is that with v1…
  • We can run our transformations during Babel’s transpilation, or during build-time in general.We can build a CSS-in-JS pipeline!This would result in nothing being shipped to the runtime, and as long as we can provide an “opt-in” system, you would still be able to decide whether you’d like to ship the…

styled-components has changed a lot in its past. And we are not even done yet!
Continue reading “With styled-components into the future – 💅 styled-components – Medium”

React’s Ecosystem as a flexible Framework

React's Ecosystem as a flexible Framework - RWieruch  #reactjs #javascript

  • But in the end, when implementing a larger application, you need a couple of more libraries to have a sophisticated web application with React as its core.
  • The following article will give you an opinionated approach to select from these libraries to build a sophisticated React application.
  • In plain JavaScript, it would be possible to create a React class attribute with conditionals:

    But it is so much easier with the classnames library:

    It works perfectly with CSS modules too.

  • Basically a fetch looks like the following, for instance in a React lifecycle method when a component mounts:

    Basically you wouldn’t have to add any other library to do the job.

  • However, there are common use cases for React’s higher order components that are already solved in a library called recompose.

React’s ecosystem is a flexible framework. The article gives you an opinionated ideal React setup choosing essential libraries…
Continue reading “React’s Ecosystem as a flexible Framework”

React’s Ecosystem as a flexible Framework

  • But in the end, when implementing a larger application, you need a couple of more libraries to have a sophisticated web application with React as its core.
  • The following article will give you an opinionated approach to select from these libraries to build a sophisticated React application.
  • In plain JavaScript, it would be possible to create a React class attribute with conditionals:

    But it is so much easier with the classnames library:

    It works perfectly with CSS modules too.

  • Basically a fetch looks like the following, for instance in a React lifecycle method when a component mounts:

    Basically you wouldn’t have to add any other library to do the job.

  • However, there are common use cases for React’s higher order components that are already solved in a library called recompose.

React’s ecosystem is a flexible framework. The article gives you an opinionated ideal React setup choosing essential libraries…
Continue reading “React’s Ecosystem as a flexible Framework”

No KISS for CSS-in-JS – Ivn Cote – Medium

No KISS for CSS-in-JS  #javascript #frontenddevelopment #css #react #reactjs

  • On top of that, CIJ tangles and confuses the many aspects of frontend development, thus contradicting the KISS principle and the UNIX design principle of making single purpose tools (programs).
  • Even more: despite the fact that CIJ is only a subset/superset of CSS, CIJ advocates like Mark Dalgleish tell us that the approach will solve problems across platforms, not only in web.
  • CIJ combines this concept with inline style paradigm of putting all the CSS rules along with their logic right into javascript file.
  • When Glen tells us that the critical CSS issue is magically solved by CIJ, I start thinking that this specific problem is only a small piece of the huge puzzle called web performance.
  • Of course, CIJ could be a substitution for CSS on non-web platforms, but it underlines mainly the problem of these specific systems.

Disclaimer: This article is very opinionated. Please use whatever you want. I highly advise you to employ different techniques for different applications, so you can compare them on real use cases…
Continue reading “No KISS for CSS-in-JS – Ivn Cote – Medium”

Rewriting Transmission UI with React – Hacker Noon

Rewriting Transmission UI with #reactjs – Hacker Noon

  • This forces you to always work with the same mentality not allowing you to test new approaches to solve problems.Following our desire to learn new stuff to make our life easier, we wanted to experiment with new technology to build a side project with a complete new stack that fits better with the app requirements.In that same week, a friend of mine was talking about a bug that was affecting him in the web client of Transmission.
  • We decided to start building a new interface from scratch to understand new patterns, new approaches and discover what would be the next challenges for the ultimate interface.Our experimental stackReviewing all of the features in the current Transmission web client, the stack we chose was React for the user interface, Mobx for the state management and CSS modules for all the stuff related with the application styles, with a new build process managed by Webpack.On the other hand, and with the above stack in mind, we decided to use some best practices for the long term quality of this project.
  • New tools have appeared during the last 5 years to improve our life like SASS, LESS or CSS Modules.If you are used to code big sets of components you can make the common mistake of reuse style classes for different components.
  • This is important because most of the components contain several paths and we need to ensure that each one is covered.Integrating this new set of tests to some CI we can be more confident about future changes that we apply to the application.As we can see in this example we are rendering the Progress bar component with mocked torrent data.Then with the snapshot technique we can ensure that the rendered result is what we expect comparing with previous snapshot.
  • So we decided to follow the current design, we just wanted to propose a new code architecture.We didn’t want to impact the end users in case that this code were considered for inclusion in the main Transmission repository.Lastly, even if the project dies out, for whatever reason, we’re happy anyway, because we learnt a lot of things and had a really fun time during its development.

I remember it was about two months ago when I was talking with Eduardo Lanchares about the best stack for the next webapp. Sometimes you are at work and you are stuck with the current set-up of…
Continue reading “Rewriting Transmission UI with React – Hacker Noon”

Issues · cassiozen/ReactCasts · GitHub

  • React Native over-the-air updates Request a Screencast
  • Performance Tuning Request a Screencast
  • Redux Middleware API Request a Screencast
  • Test Driven Development Request a Screencast
  • Idiomatic Endless Scroll Request a Screencast

Source code for ReactCasts
Continue reading “Issues · cassiozen/ReactCasts · GitHub”