9 React Tools To Master Your Component Workflow – Bits and Pieces

  • Basically, this project lets you define styled-components that posses their own encapsulated styles so that styling becomes an actual part of your components while avoiding the use of CSS classes as a mediator layer.
  • This project is growing in popularity to become the go-to choice for styling React components, and is defiantly worth checking out for your next app.
  • This project “scans” your app for React components and lets you render components with different states and props while mocking external dependencies, so you can see your app’s state in real-time.
  • React Sketch.appFor the UI designer / dev among you, React-sketchapp is Airbnb’s open source project built for design system which enables the rendering of React components using Sketch.
  • From sharing components between apps with Bit to styling with styled-components or using storybook to render and play with components in isolation, and all the way to less familiar projects like UiZoo and others, the React ecosystem is growing rapidly to help you build an amazing UI.

Best 9 React component tools and libraries that can make all the difference for mastering your work with React components for developing a beautiful UI for your React application. Check out the list.
Continue reading “9 React Tools To Master Your Component Workflow – Bits and Pieces”

Content Swiper for React Native is released

Check out our content swiper component for #reactnative

  • When we were implementing the Cheapp application we were looking for nice component for viewing images.
  • In our app we had upload indicator etc. built into our image viewer, so this component we released is pretty much built from the scratch to make it bit simpler and also to make it bit more customizable so it hopefully fits better for other peoples needs too.
  • Package includes Slide, SlideZoom, RotateY and Stack animations.
  • index=0 means that image is active and you can use those parameters to define enter/exit animations for your items as you like.
  • Here’s example of normal slide animation, but other animations are pretty much the same too.

Content Swiper component for React Native is out now
Continue reading “Content Swiper for React Native is released”

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”