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”

Getting out of a .bind() – Frontend Weekly – Medium

Getting out of a .bind()  #babeljs #react #javascript #reactjs

  • bind()Thanks to class properties, never bind “this” to methods in class constructors again. 🎉The ShortInstead of this:class MyClass extends React.PureComponent { constructor() { this.myFunction = this.myFunction.bind(this); } myFunction() { const { myVar } = this.props; } … etc}With class properties enabled in Babel, bound class methods are simple:class MyClass extends React.PureComponent…
  • However, after clicking the “increment” button you’ll see the increment method throw an error:Cannot read property ‘state’ of undefinedWeird, why could ‘render’ access state but not ‘increment’?
  • React’s lifecycle methods are automatically bound to the current component instance, so render can access this.state.count.
  • The problem is any component method we create is not automatically bound.To fix the problem, we write this unintuitive line of code:constructor() { super(); this.state = { count: 0, } this.increment = Fields / Properties to the RescueClass Fields are a stage 3 proposal that you can use right now with…
  • With this proposal, these two class variables are declared in the context of the class instance, aka this.Thus, the this.state = {} inside of the constructor method is analogous to state = {} outside of the method.In the case of increment, we set an arrow function which inherits the lexical…

Everything renders correctly on load and render is referencing this.state.count as expected. However, after clicking the “increment” button you’ll see the increment method throw an error: React’s…
Continue reading “Getting out of a .bind() – Frontend Weekly – Medium”

Writing Server-rendered React Apps with Next.js — SitePoint

Writing Server-rendered #ReactJS Apps with Next.js:  by @sitepointdotcom #JavaScript

  • This gets you all the dependencies you need for starting: – $ npm install next react react-dom –save – – Create a directory for your app, and inside that create a directory called pages.
  • js inside your project with these contents: – export default () = ( – divHello, Next!
  • So, you just have a style component inside your React Component render function: – export default () = ( – div – Hello world – pThese colors are scoped!
  • So, you can write code like this that dynamically loads a React component after initial load: – import dynamic from ‘next/dynamic’ – – const = dynamic( – { – loading: () = pThe component is loading…/p – } – ) – – export default () = – div – Header…
  • Next renders pages on the server, and they can be loaded just like good old rendered web pages when JavaScript is disabled.

Jatin Shridhar pushes through JS framework fatigue to introduce Next.js, a simple yet customizable solution to building production-ready SPAs.
Continue reading “Writing Server-rendered React Apps with Next.js — SitePoint”

Sharing React Components Easily with Bit — SitePoint

  • Bit is an open-source project that enables us to instantly share components from our existing source code with our team, and use them across our different projects without changing our source code, file structure or the tools we work with.
  • Sharing Components with Bit – If you haven’t heard of Bit’s latest release, it’s an open-source project that allows us to share components from our existing source code with our team and across projects.
  • By decoupling the representation of components from our actual file structure, Bit tracks the components within our source code and enables us to quickly turn any file or subset of files into a reusable component.
  • js – #Tracked 24 new components – – – – The next thing we want to do is to commit our changes: – bit commit -am ‘committed my first tracked code components’ – – – – The next step is exporting our components into a remote organized collection (Scope), sharing…
  • To organize your own components into shared collections, feel free to get started with Bit or visit the project on GitHub.

Jonathan explains how to share React components with a team and across different projects — without changing source code, file structure or tooling.
Continue reading “Sharing React Components Easily with Bit — SitePoint”

JavaScript: A Basic Guide to Scope – codeburst

  • Anything written in the global scope is accessible anywhere in your JavaScript codevar cat = ‘Jerry’;function localScopeExample(){ // LOCAL SCOPE console.log(cat); // Jerry}// GLOBAL SCOPEconsole.log(cat); // JerryLocal ScopeLocal scope is a little more complex.
  • However, calling cat outside of the function will result in an Uncaught ReferenceError:function localScopeExample(){ // LOCAL SCOPE var cat = ‘Jerry’; console.log(cat); // Jerry}// GLOBAL SCOPEconsole.log(cat); // Uncaught ReferenceError: cat is not definedSince local variables are only accessible within their functions, you can use the same variable name across different…
  • Because of lexical scoping, you can access everything in the global scope and in scope 1 within scope 2:// GLOBAL SCOPEvar dog = ‘Lewis’;function func1(){ // SCOPE 1 var cat = ‘Jerry’; var func2 = function(){ // SCOPE 2 console.log(cat); // Jerry console.log(dog); // Lewis }}Block ScopeWith var, a variable…
  • Let’s look at an example:let x = 1;{ let x = 2; console.log(x); // 2}console.log(x); // 1As you can see above, simply using brackets to create a code block will locally scope any variable declared within that block.
  • If you accidentally redeclare the same variable with the same block scope you will get an error:{ let x = 1; let x = 2;}Uncaught SyntaxError: Identifier ‘x’ has already been declaredKey TakeawaysGlobal Scope lasts as long as your application.Local variables are created when a function starts, and deleted when…

Scope is an important aspect of JavaScript and programming in general. Scope is what limits the visibility and therefor usability of variables, functions, and objects throughout your code. When you…
Continue reading “JavaScript: A Basic Guide to Scope – codeburst”

Writing Server-rendered React Apps with Next.js — SitePoint

  • This gets you all the dependencies you need for starting: – $ npm install next react react-dom –save – – Create a directory for your app, and inside that create a directory called pages.
  • js inside your project with these contents: – export default () = ( – divHello, Next!
  • So, you just have a style component inside your React Component render function: – export default () = ( – div – Hello world – pThese colors are scoped!
  • So, you can write code like this that dynamically loads a React component after initial load: – import dynamic from ‘next/dynamic’ – – const = dynamic( – { – loading: () = pThe component is loading…/p – } – ) – – export default () = – div – Header…
  • Next renders pages on the server, and they can be loaded just like good old rendered web pages when JavaScript is disabled.

Jatin Shridhar pushes through JS framework fatigue to introduce Next.js, a simple yet customizable solution to building production-ready SPAs.
Continue reading “Writing Server-rendered React Apps with Next.js — SitePoint”

React Progressive Web Apps — Part 1 – Progressive Web Apps – Medium

#ReactJS Progressive #Web Apps:  by @GethylK #JavaScript

  • How to create your first PWA app and/or convert your existing app into PWA.In this example I created new React app with PWA in mind, but the idea should be quite similar if you have to convert your existing app into PWA.You need to understand the lifecycle of a SW, which are listed below, and you can read more about it in this link.Register the Service Worker(SW)If a browser supports SW, then the service worker will be registered.
  • Here is the code snippet from index.htmlRegister SW if browser supportsIf the above registration step was successful, then the SW file will be downloaded.
  • Well that is because SW can intercept the fetch event, and this will help if you want to cache something from the network.Updating Cache / Making network calls — Fetch eventSW listens to fetch event, and in our example since we handle only the basic case of caching only the static files, you can see below, when there is a fetch event within the SW’s scope (Refer the registration step to see the scope),it is intercepted, and we checked if request has a response already in the cache, then we return the response from cache.
  • Adding your app to the Home Screen.Perfect!Step 1 above showed you the importance of SW and how it helps to make your app to be offline first.Step 2, tells you how you can run it from your virtual device.And now let us make it feel a bit more like an app, but letting you add this to your homepage, so that you can launch it anytime later without the need to remember the url or bookmark it.This is where you need to under about web manifest json file, which was one of the topic I mentioned would be good to know.
  • I would highly recommend you to use it to generate a report of you webpage.Here is an example of this github example.Webpack run on dev mode yarn startWebpack dev server with prod build yarn start:PRODWhen I first ran the report, the scores where much worse, and I went through the suggestions provided against the areas the app scored bad and did some fine tuning.

Progressive Web Apps(PWA) are gaining a lot of popularity these day, and with one of the updates this year (2017), the Create React App creates your project by default as PWA. If you haven’t heard of…
Continue reading “React Progressive Web Apps — Part 1 – Progressive Web Apps – Medium”