Lessons learned testing React & Redux apps with Jest and Enzyme

Lessons learned #testing #reactjs  & #Redux #apps with #Jest and #Enzyme  #javascript

  • It makes things much easier, and you can pattern match (hit p then type part of your file/folder name) to make sure you’re not running a ton of things every save.Make sure you don’t close off your test() statements early.Parentheses man… 😢Is perfectly valid Javascript, but your test (while it…
  • I only noticed that I had this copy and pasted for one section of my unit tests when I made an error and realized the test didn’t fail.Which leads me to…Make sure your tests failIf you’re awesome and use TDD, then props to you you’re already doing this 🎉For the rest…
  • Time to move on.”However this leads to errors like the aforementioned one, and it’s surprisingly easy to grab and test the wrong element or mocked function — especially if you’re copy pasting from a similar test.It’s not hard to just comment out an essential section of a test and make sure it…
  • It’s also easy to copy to another component with a similar need for testing.In fact all of the little conventions I’m following here (beforeEach mounting a wrapper, what I name things, spreading a props object) are great to have defined somewhere so people can easily understand and copy test functionality…
  • It also makes testing quite simple and separates rendering vs data concernsI try to extract any complex data manipulation to pure functions and test thoseI use end to end (Selenium) and integration tests to check on sections of my app to make sure it all fits together.It’s not perfect, I’m…

If you don’t work at a primarily tech company, it can be a bit difficult to convince managers of the importance of things like unit testing. After being a enthusiastic supporter for quite a while, I…
Continue reading “Lessons learned testing React & Redux apps with Jest and Enzyme”

Create a React app with zero configuration using Parcel

Create a React app with zero configuration using Parcel  #ReactJS

  • Create React App was created to make it easier and quicker to get started.
  • The problem with creat react app is that it hides the webpack config.
  • When your app grows and you need something a bit more advanced, you have to eject and then you get a huge webpack config.
  • I tried it on a large code base, and it worked out-of-the-box!
  • Parcel looks like a decent alternative to Create React App.

We have all experienced the pain of getting started with React. You spend hours to configure webpack before you can start actual coding.
Continue reading “Create a React app with zero configuration using Parcel”

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”

Introduction to React.js Redux Basics Tickets, Thu, Sep 21, 2017 at 6:15 PM

Hop on the waitlist for our #ReactJS meetup this Thursday!

  • In this workshop, we’ll go over the most popular state management tool, Redux.
  • With middleware, we’ll be able to handle asynchronous actions like AJAX requests and use the Redux debug tools.
  • Lecture will start around 6:30pm.
  • If you want to sharpen your skills or review a few programming topics before the meetup, go ahead and use Rithm’s Free Online Courses to prepare .
  • If you have any questions or concerns prior to this meetup, please reach out to the Rithm Team by emailing info@rithmschool.com.

Eventbrite – Rithm School presents Introduction to React.js Redux Basics – Thursday, September 21, 2017 at Rithm School, San Francisco, CA. Find event and ticket information.
Continue reading “Introduction to React.js Redux Basics Tickets, Thu, Sep 21, 2017 at 6:15 PM”

It’s time to remove PropTypes and just use Flow for React

It’s time to remove PropTypes and just use Flow for React  #react #flow #proptypes #reactjs

  • And it actually does a great type-checking job so far.However, based on several reasons I’ve decided to retire PropTypes from the projects.Flow now has better support for React and React NativeFlow 0.53+ made a bunch of improvements to better work with React Components.
  • The article wrote by Caleb Meredith was impressive and thorough, if you want to know more about the improvements Flow did on React, please read it through.PropTypes is not able to enforce more strict type-checking rulesA developer from Product Hunt named Radoslave Stankov wrote an article about why they decided to replace PropTypes with Flow.
  • And this means the following cases should all be warned.User weight={80} height={180} BMI={24.7} /User height={180} BMI={24.7} /User weight={80} /However, PropTypes is not able to pull off something like this.
  • But it’s possible for Flow, a bit tricky though:type Props = { weight: number, height: number, BMI?
  • So if we drop PropTypes, the size reduction can be a little benefit from doing so.DownsideIMO, Flow has done a pretty awesome job, except some of their error message are really confusing.

We were kind of encouraged using PropTypes from the beginning since we start learning to work with React. And it actually does a great type-checking job so far. Flow 0.53+ made a bunch of…
Continue reading “It’s time to remove PropTypes and just use Flow for React”

Lightweight Progress Circles in React Native

#reactNative Countdown and Percentage Circles  #javascript #es6 #react

  • It does not depend on or ART, it’s done purely in CSS.
  • It uses two circles and two half-circles and positions them in a smart way such that they look like the progress circles you see above.
  • Now just put a smaller white circle in the center:

    Two half-circles are enough to cover all percentages from 0 to 100, however you need to be a bit smart about it:

    This is the easy case.

  • The first half-circle will always have a rotation value of , spanning the right side of the circle.
  • The second one is computed easily by converting the percent to degrees:

    We do the same rotation conversion here, but the problem is that we display the full half-circle instead of only the part on the right circle side.

React Native Progress Circles I decided to create my own React Native component to display progress circles. It’s called react-native-progress-circle and you can easily use it in your React Native…
Continue reading “Lightweight Progress Circles in React Native”

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

  • I hope that makes all the stuff related to animations a bit easier for you.
  • If we want to respond to screen gestures, and apply some animation as well (ie.
  • Now we only need to clear responder when unmounting component, and attach animation styles (which we already know!
  • First two functions are just used to ask to be responder, onPanResponderGrant() is invoked when responder is granted to our component, onPanResponderMove() is called every time component moves, and in onPanResponderRelease() you can tell what to do after finger is released.
  • React Native animations revisited – Part III

Animations are really important part of modern applications. But sometimes animation is not enough. If we want to respond to screen gestures, and apply some animation as well (ie. create drag and…
Continue reading “React Native animations revisited — Part III – Blog @ Callstack.io”