Jest and the Component Driven Development (CDD) – Comunidad JS – Medium

#Jest and the Component Driven Development (CDD):  #ReactJS #JavaScript

  • Jest and the Component Driven Development (CDD)Testing React and React Native applications.We all knows about TDD right ?
  • I recently discovered other flow/flavor around React Components and Jest snapshot testing that makes me more happy and encourage me to write more tests.This approach makes the dev process a bit more fun that the other way around.
  • Then, when you´re confortable with your component code base and you have applied all the good practices out there, write the actual test, passing the required props to the component being tested and expect it to match the snapshot.Snapshot testingSnapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly.The above statement, is from the Jest documentation, and it´s 100% true.
  • I’ve found snapshot testing to be a quick and fun way to test Components and make sure your UI does not change unexpectedly, which is a good thing.The test will fail if the two images do not match: either the change is unexpected, or the screenshot needs to be updated to the new version of the UI component.That means we are not passing the expected props to our component in some parts of our application or we have adjusted the component (because we´ve refactored it).
  • So either one or the other possibility, we need to update the test snapshot (If we´ve refactored it) executing in the terminal yarn test -u or go and fix the part in the application where we´re not using the component as we expect.Having a test coverage between 80 and 100% make us more confidents when we need to deploy to any environment and allows applications to be more robust and easy to scale.In closing, I really encourage React developers to use Jest for testing applications.

We all knows about TDD right ? Test Driven Development.
The philosophy behind it, is to start the development cycle with first writing a failing test and then writing the actual function, to make it…
Continue reading “Jest and the Component Driven Development (CDD) – Comunidad JS – Medium”

React and React Native [Book]

Adam Boduch's

  • Use React and React Native to build applications for desktop browsers, mobile browsers, and even as native mobile apps

    Who This Book Is For

    This book is written for any JavaScript developer—beginner or expert—who wants to start learning how to put both of Facebook’s UI libraries to work.

  • What You Will Learn

    React and React Native allow you to build cross-platform desktop and mobile applications using Facebook’s innovative UI libraries.

  • The first part shows you how to start crafting composable UIs using React, from rendering with JSX and creating reusable components through to routing and creating isomorphic applications that run on Node.
  • We then move on to showing you how to take the concepts of React and apply them to building Native UIs using React Native.
  • Split into three major sections to help organize your learning, this hands-on, code-first book will help you get up to speed with React and React Native—the UI framework that powers Netflix, Yahoo, and Facebook.

Use React and React Native to build applications for desktop browsers, mobile browsers, and even as native mobile apps About This Book Build React and React Native applications using familiar … – Selection from React and React Native [Book]
Continue reading “React and React Native [Book]”

Firekit concepts to sync Firebase and redux – Tarik Huber – Medium

Firekit concepts to sync Firebase and redux  #react #firebase #javascript #redux #reactjs

  • That is one of the main concepts firekit uses to manage the sync of the firebase realtime database and the redux store.
  • Firekit allows you to make your firebase reference with all the native firebase query and filtering functions and just send the resulting reference to firekit and it will listen to all changes and sync them to the redux store.Saving only simple jsonIf using instances of classes in your library you get into the situation to save to the redux store complicated objects and functions.
  • By saving only simple json in your redux store persistence can be done however you want and with every tool and concept you wish.Persistent listenersThe main reason I choose to create firekit is that all other libraries link the whole listening cycle to a single component.
  • You can leave the listening cycle in a component, page, application or any other level you want.This approach is the same no matter if you are listening to lists or simple paths in the firebase realtime database.ConclusionFirebase is made to make our developer lives easier.
  • The main goals are to give the user maximal flexibility for using firebase and just providing easy and simple tools to sync data to the redux store.I you are interested on how the library works or want to try a real world project visit the github repo with the source code or the demo page.If you like how this library works you could put a star on the github repo đ

Firekit is a library that helps you sync your Firebase realtime database with the redux store of your react application. It uses some new approaches witch we will try to present in this article. If…
Continue reading “Firekit concepts to sync Firebase and redux – Tarik Huber – Medium”

Scaling your Redux App with ducks – freeCodeCamp

Scaling your Redux App with ducks:  by @alexnmoldovan #ReactJS #Redux #JavaScript

  • A single flow through your app will probably require files from all folders.
  • Selector functions take a slice of the application state and return some data based on that.
  • The file specifies what gets exported from the duck folder.
  • You end up with a folder common or shared, because you want to reuse code across many features in your app.
  • The solution was to split each feature into a duck folder.

How does your front-end application scale? How do you make sure that the code you’re writing is maintainable 6 months from now? Redux took the world of front-end development by storm in 2015 and…
Continue reading “Scaling your Redux App with ducks – freeCodeCamp”

React Native animations revisited — Part I – Blog @ Callstack.io

#ReactJS Native animations revisited — Part I:  by @michal_chudziak #JavaScript

  • The function takes one argument which is config object.
  • { duration: 700 , create: { type: ‘linear’, property: ‘opacity’, }, update: { type: ‘spring’, springDamping: 0.4 , property: ‘scaleXY’, }, delete: { type: ‘linear’, property: ‘opacity’, }, }
  • You customize things like duration, or differences between create and update animations within your config object.
  • Never miss a story from Blog @ Callstack.io , when you sign up for Medium.
  • It allows us to customize duration, and behaviour of create, update, and delete animations.

Almost every modern app contains dynamic UI elements. When it comes to animating React Native components, platform gives us many useful APIs. Animations are something what can be quite confusing for…
Continue reading “React Native animations revisited — Part I – Blog @ Callstack.io”

Betting on React Native // Speaker Deck

Betting on #React Native
via @cball_    
#ReactJS #UX #UserExperience #NativeApps

  • The future of mobile apps most includes Progressive Web Applications.
  • We’ll learn why by comparing cross-platform apps in React Native against Cordova, Progressive Web Apps, and their fully native counterparts.
  • But the reality of the present and the near term future is that native apps will continue to provide the best cross-platform user experience.
  • All slide content and descriptions are owned by their creators.
  • React Native is a new approach building native apps in JavaScript with a lot of excitement behind it, even from iOS and Android developers.

We believe in the web. The future of mobile apps most certainly includes Progressive Web Applications. But the reality of the present and the near term future is that native apps will continue to provide the best cross-platform user experience.
Continue reading “Betting on React Native // Speaker Deck”

React.createClass vs React.Component – Dhaval Nagar – Medium

React.createClass vs React.Component  #react #reactjs #javascript

  • Each component receives the properties from parent components and may also have some local state.
  • Never miss a story from Dhaval Nagar , when you sign up for Medium.
  • The React.createClass by default binds the object context to methods, whereas for the Component, we will have to bind it explicitly.
  • You can access the props same way in both the conditions, the only difference is how you define the default properties.
  • For state also, you can access it same way in both the approaches there is a minor difference while initialising them.

While learning React you will quickly realise that different tutorials follow different writing styles, while some uses React.createClass other extend the React.Component. I have just put some basic…
Continue reading “React.createClass vs React.Component – Dhaval Nagar – Medium”