How To Open Source Parts Of Your Private Project With Bit

  • Using Bit, you can isolate these sets of files (we call code components) from your project and share them with the open source community, while keeping their source project private and intact.
  • js – │ └── index.js – └── utils – └── noop.jsBefore Bit, we would have to create a new GitHub project for this component, remove hello-world from your private project and make all its dependancies (packages as well as other files from the project) available for the new project.
  • With Bit, you can keep this component as part of your private project and still make it available to the community to discover, use and collaborate on.
  • Open source parts of your project to the communityTo make sure your components are truly executable outside of the project’s context, Bit will build an isolated component environment and apply all configured extensions to test, compile or perform any other defined task.
  • You can also use bit import to bring the component’s source code into other projects, develop them and merge changes between different projects.

How to make parts of your private projects open source and make their components available to the community without having to split your repositories or create new projects on GitHub. Learn more.
Continue reading “How To Open Source Parts Of Your Private Project With Bit”

Destructuring and Function Arguments

  • The JavaScript language has benefitted from some really awesome new features over the past few years, including arrow functions, the spread operator, and default function argument values.
  • One of my favorite new(ish) JavaScript features is object destructuring.
  • If you aren’t familiar with JavaScript destructuring, it basically provides a shorter syntax for extracting an object key’s value without the dot notation mess: – – The basic syntax for destructuring is fairly simple but using destructuring with function arguments can be a bit more difficult when those argument values…
  • The following is a function with arguments having default values: – – Regardless of language, if a function takes more than ~3 parameters, it’s probably best to pass in an object name  or  that contains possible key/values; the equivalent would look like: – – What if you want to use…
  • The following function signature would become: – – If you want to define defaults in the function configuration, you’d use the following: – – Setting a default with is important; with no default the following example would error: – – Destructuring is an awesome language feature but can lead to…

Continue reading “Destructuring and Function Arguments”

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”

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”