Your Choice JavaScript News

React News Monday, February 19

React News TLDR / Table of Contents

  • krasimir/kuker
    • kuker – Kick-ass browser extension to debug your apps
    • Codepen example, import, application state, app state mutates, import { createStore
  • Reuse reviewed – YLD –
    • The idea of software reuse has been recycled many times. At a NATO conference in 1968, “mass produced software components” were already being touted as the answer to the software crisis of the time…
    • reuse, software reuse, code reuse, components, internal reuse practices
  • Selectors in Redux are a MUST – Riccardo Odone –
    • Avoiding structural coupling by colocating selectors with reducers
    • selectors, flat state, initial nested shape, high cohesive code, crazy search page
  • Clean React Toggle
    • Working on some tight, clean, minimal interaction….
    • Pen, CSS, popular choices, file extension, true dependency
    • Sometimes you can get into a situation when you’re choosing between Redux and React’s setState(). When I’m doing such choice, I often use the following rule of thumb.
    • Redux, state, different decision, left column, specific piece
  • Minimal React.js Without A Build Step (Updated) | Shing’s Blog
    • Back in 2016, I wrote a post about how to write a React.js page without a build step. If I remember correctly, at that time the official React.js site have very little information about running React.js without [Webpack][webpack], [in-browser Babel transpiler][babel] is not very stable and they are deprecating JSXTransformer.js….
    • official minimal HTML, HTML template, ready-made React components, simple React component, official HTML template
  • YouTube
    • This talk looks at the techniques used by Glimmer.js, Ember.js, React, and more to render and update DOM elements in Javascript Applications.
    • DOM elements, Javascript Applications, React, ,
    • Loading,
  • The following screenshot demonstrate how the extension works with React emitter and Redux emitter plugged in: – – To make the extension work you have to instrument your application.
  • In the beginning there was a guard in the emitters that makes sure that events are sent only if the extension is installed.
  • However, this technique involves the content script of the extension to inject some stuff on the page which was fragile and buggy.
  • So, for the time being you have to guard the emitters.
  • Once you load the app the integrated emitters start calling .

Tags: Codepen example, import, application state, app state mutates, import { createStore

  • Why?Now lets listen to Donald Knuth, who might have a bone to pick with Seneca:Youll never convince me that reusable code isnt mostly a menaceSoftware reuse is a bottomless topic, with research groupsdedicated to it, and a fat volume released every year by the International Conference on Software Reuse.
  • Finally, if the assumption is that each application will be defining its own arbitrary data types, it is very unlikely that the library of components reusable between projects will grow over time.The solution we are settling on (still up for discussion) is a modularised SQL schema.
  • Modifications to schema component dependencies should be fine as long as primary keys are not modified, since these constitute, as it were, the components API: these are what other components will depend on explicitly.
  • We hope this need will not arise, but it might!If you have a better way to do it, answer this stackoverflow question, why dont you?Adapting and integrating a reusable componentAdapting, integrating and keeping a reusable component updated obviously takes time.
  • Code reuse between microservices should be minimized, otherwise bugs will propogate through the system and a fleet of microservices will behave more like an unusually expensive and complicated monolith.Factory syndromeOne aspect of reusing a component that is perhaps less talked about is the potent

Tags: reuse, software reuse, code reuse, components, internal reuse practices

  • In this journey, selectors have saved my ass and become my best friend.What follows is a story from the project on how I got to know selectors and why they are so awesome.Keeping stateflatAt the beginning I had a store shape similar to thiswhere locations could beDoes it look bad…
  • In fact, the initial nested shape is much easier for components to deal with:Well, I could add some logic to the component to handle the flat state.
  • As a matter of fact, having the initialState, write side and read side in the same place is right on spot:Lets see how some the selector works with an examplewith ready to be passed to the Component from the previous section.In other words, on one side the application works with…
  • Which is more convenient for the UI.More importantly, they can evolve independently since selectors work as an anti-corruption layer and prevent leaking structural coupling.Bubbling up aselectorIn the previous section Ive worked top to bottom by refactoring the state first and worked my way down to the component.Lets see how the…
  • With selectors you get dumber components: they just destructure props and render them without any additional logic.OutroIn general, the shape of the state is something only reducers should know about.

Tags: selectors, flat state, initial nested shape, high cohesive code, crazy search page

  • You can apply CSS to your Pen from any stylesheet on the web.
  • Just put a URL to it here and we’ll apply it, in the order you have them, before the CSS in the Pen itself.
  • If the stylesheet you link to has the file extension of a preprocessor, we’ll attempt to process it before applying.
  • You can also link to another Pen here, and we’ll pull the CSS from that Pen and include it.
  • If it’s using a matching preprocessor, we’ll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Tags: Pen, CSS, popular choices, file extension, true dependency

  • Use Redux if youd prefer to restore this specific piece of state.
  • Use setState() if dont have this need – – Basically, this is about the importance of a piece of state.
  • This criterion is not universal i.e. sometimes you might need to put the dropdown is open state into the store because you change another components styles based on this.
  • Another (and probably more common, as Im realizing after receiving the feedback) criterion for choosing between Redux and setState() is how global the state is.
  • So heres another approach: – – Use Redux if your state is shared across multiple components.

Tags: Redux, state, different decision, left column, specific piece

  • The most crucial bit is the importing of scripts: – – If you want better error message, you might want to add the attribute to the tags, as suggested in the official document.
  • In the official HTML template, they show how to write script directly in HTML like: – – But for real-word projects we usually dont want to throw everything into one big HTML file.
  • So you can put everything between and in to a separate JavaScript file, lets name it and load it in the original HTML like so: – – The pitfall here is that you must keep the attribute if you wants to use JSX.
  • Otherwise the js script will fail when it first reaches a JSX tag, resulting an error like this: – – You can find tons of ready-made React components on NPM, but the quality varies.
  • Of course it also works without JSX: – – For modules without explicit browser support, you can still try to expose it to the browser with Browserify, as described in this post.

Tags: official minimal HTML, HTML template, ready-made React components, simple React component, official HTML template

    Tags: DOM elements, Javascript Applications, React, ,

      Tags: Loading,

      Top React Courses

      Modern React with Redux (86,762 students enrolled)

      By Stephen Grider
      • Build amazing single page applications with React JS and Redux
      • Master fundamental concepts behind structuring Redux applications
      • Realize the power of building composable components
      • Be the engineer who explains how Redux works to everyone else, because you know the fundamentals so well
      • Become fluent in the toolchain supporting React, including NPM, Webpack, Babel, and ES6/ES2015 Javascript syntax

      Learn more.


      The Complete React Native and Redux Course (53,888 students enrolled)

      By Stephen Grider
      • Create real-world native apps using React Native
      • Make truly reusable components that look great
      • Understand the terminology and concepts of Redux
      • Prototype and deploy your own applications to the Apple and Google Play Stores
      • Get up to speed with React design principles and methodologies
      • Discover mobile design patterns used by experienced engineers

      Learn more.


      Advanced React and Redux (35,016 students enrolled)

      By Stephen Grider
      • Build a scaleable API with authentication using Express, Mongo, and Passport
      • Learn the differences between cookie-based and token-based authentication
      • Figure out what a Higher Order Component and how to use it to write dramatically less code
      • Write Redux middleware from scratch to uncover what is happening behind the scenes with Redux
      • Set up your own testing environment with Mocha and Chai
      • Realize the power of building composable components

      Learn more.


      React Redux React-Router: From Beginner to Paid Professional (11,715 students enrolled)

      By Leonardo Daniel
      • Building your amazing web applications with React JS and Redux
      • Getting a high-paying job as a front-end developer
      • Getting experience through doing many exercises. Re-enforcing your knowledge of ES6, advanced JavaScript, Redux, React through attempting a lot of quizzes. Practice makes perfect.
      • Becoming familiar with the technologies supporting React, including NPM, Webpack, Babel, and ES6/ES2015.

      Learn more.


      React Native: Advanced Concepts (16,058 students enrolled)

      By Stephen Grider
      • Make compelling applications using expert-level features of React Native
      • Create amazingly smooth and performant animations
      • Build new React Native apps with Expo
      • Understand the latest Navigation options for new React Native apps
      • Add logic to your Firebase backend with Google Cloud Functions
      • Update your users with cross platform Push Notifications
      • Handle your users going offline with Redux Persist

      Learn more.


      React JS and Redux - Mastering Web Apps (54,299 students enrolled)

      By David Katz
      • Develop entire React JS and Redux applications from scratch.
      • Build applications that deal with APIs and web requests.
      • Discuss ES6 and advanced JavaScript.
      • Create web apps with full authentication, and real-time database.

      Learn more.


      React basic in just 1 hour (22,331 students enrolled)

      By Leo Trieu
      • Taste of how to build your very first React component.
      • How to handle event in components.
      • Understand two key concepts of React: State and Props.
      • How to reuse and nest components.
      • How to transfer data between Parent, Child components.
      • How to work with Array, Form

      Learn more.


      Meteor and React for Realtime Apps (7,889 students enrolled)

      By Stephen Grider
      • Create interactive web apps amazingly fast
      • Build amazing single page applications with Meteor and React JS
      • Master fundamental concepts behind structuring Meteor applications
      • Learn the true purpose of Meteor in a modern application
      • Be the engineer who explains how Meteor works to everyone else, because you know the fundamentals so well
      • Build and prototype interesting personal projects in a weekend

      Learn more.


      GraphQL with React: The Complete Developers Guide (14,683 students enrolled)

      By Stephen Grider
      • Build amazing single page applications with React JS and GraphQL
      • Master fundamental concepts behind structuring GraphQL servers
      • Realize the power of building flexible data schemas
      • Be the engineer who explains how GraphQL works to everyone else, because you know the fundamentals so well
      • Become fluent in the ecosystem supporting GraphQL, including the differences between Apollo and Relay

      Learn more.


      Essentials in JavaScript ES6 - A Fun and Clear Introduction (40,155 students enrolled)

      By David Katz
      • Create ES6 applications from the ground up.
      • Use the terminal/command-line application and a code editor to code.
      • Look at ES6 code and understand keyword and concepts.
      • Create live development servers with Webpack.

      Learn more.


      The Full JavaScript & ES6 Tutorial - (including ES7 & React) (55,808 students enrolled)

      By David Katz
      • Code in JavaScript like a pro.
      • Code in es6 comfortably, using all the new features.
      • Build es6 projects from the ground up using tools like webpack and babel.
      • Create a basic ReactJS application from scratch.

      Learn more.