Fragments in React – Jhey Tompkins – Medium

Introducing the new Fragment component in #reactjs 👋  #javascript #js

  • Think of any time that you’ve needed to wrap component content in a wrapper element.For example, you could do not the following before React@16class MyAwesomeComponent extends Component { render () { return ( liItem One/li liItem Two/li liItem Three/li ) }}You would have to wrap those elements.
  • 🤦‍class MyAwesomeComponent extends Component { render () { return ( span liItem One/li liItem Two/li liItem Three/li /span ) }}This is a simple example but there could be many scenarios where you need to wrap your content.
  • But if you prefer the idea of returning an Array go right ahead 👍class MyAwesomeComponent extends Component { render () { return [ liItem One/li, liItem Two/li, liItem Three/li, ] }}Fragment is a solution allowing you to return many elements from a component.
  • Great!Next, you can either import the Fragment component,import React, { Component, Fragment } from ‘react’or use it through the React object directly with React.Fragment.Now, whenever you need to wrap the content of a component and you don’t want to add an extra div or other wrapping element to the DOM,…
  • The content of the component will render as expected but without the wrapping 🎉 🎉import React, { Component, Fragment } from ‘react’class MyAwesomeComponent extends Component { render () { return ( Fragment liItem One/li liItem Two/li liItem Three/li /Fragment ) }}producesliItem One/liliItem Two/liliItem Three/liwith no unnecessary wrapping 😎That’s the basics…

Ever inspected the DOM in a React app? Ever greeted with what seems like a constant nesting of

s? Had to wrap the content of a component yourself? Even though it didn’t feel semantically correct…
Continue reading “Fragments in React – Jhey Tompkins – Medium”

Rendering FrintJS Apps with React.js in the Browser and Server

Rendering FrintJS Apps with React.js in the Browser and Server

  • Rendering FrintJS Apps with React.js in the Browser and ServerI spent more time on this image than writing this post =DPreviously, I wrote about dependency injection and how providers are set up in FrintJS Apps.
  • Today, we will be using the same APIs and render a FrintJS App with React in the browser and server.Rendering with react-domIn the most basic and simple example, we can render a React component like this using ReactDOM:import React from ‘react’;import { render } from ‘react-dom’;function MyComponent() { return pHello…
  • /p;}const App = createApp({ name: ‘MyApp’, providers: [ { name: ‘component’, useValue: MyComponent, }, ],});It is by convention that we set the React component as a provider by giving it the name component.The same convention applies for our Vue.js, React Native, and Preact integrations too, as they can be found…
  • Only difference is that instead of receiving a Component as its first argument, it receives our App’s instance.What about server-side rendering?We have it covered already with our frint-react-server package:import { renderToString } from ‘frint-react-server’const App = createApp({ … });const app = new App();const html = renderToString(app);This also follows similar API…
  • Think of it similar to how Redux does it with their Provider / component and connect higher-order component.This gives developers a lot of flexibility when they need to access certain providers for example, without having to keep passing them as props everywhere.I will follow up by writing another post soon…

Previously, I wrote about dependency injection and how providers are set up in FrintJS Apps. Today, we will be using the same APIs and render a FrintJS App with React in the browser and server. We…
Continue reading “Rendering FrintJS Apps with React.js in the Browser and Server”

Testing in React Native — Jest & Detox –

Testing in React Native  with  Jest & Detox

#ReactJS #Jest

  • Testing can help identify bugs introduced during the development phase of the app and addressing these bugs before release means that your users will always get to use a reliable product.What kind of tests can we use?Unit tests are used to test small modular pieces of code (aka units) independently.Integration tests…
  • One of my favorite things about Jest is a feature called Snapshot testing.Snapshot tests are a very useful tool whenever you want to make sure the UI for a component or the object from an redux action or reducer does not change unexpectedly.Here’s a good explanation of what a snapshot…
  • Here’s a simple example on how to set this up.Jest tests for Pillow Pro appE2E tests: DetoxAn end-to-end test emulates a user by finding and interacting with pieces of UI in your app in a production/release environment.Detox is a gray box E2E Tests and Automation Library for Mobile Apps built by WixWe…
  • Here’s how we handle them in Detox:LoginHere’s a simple example of what a detox test for logging into the app might look like:DemoAnd finally, here’s a part of our E2E test suite in action.
  • Also, automating the tests on Bitrise CI has helped us streamline our release pipeline by preceding every release with the tests workflow.Hopefully, this post details how easy it is to test a React Native app and automate the testing process as well.

At Pillow, we release an update to our Pillow Pro app (iOS & Android) every 2 weeks or so. Most releases are over-the-air (OTA) updates that are done using CodePush, and are fully automated with…
Continue reading “Testing in React Native — Jest & Detox –”

TypeScript + Webpack: Super Pursuit Mode – webpack – Medium

  • Add fork-ts-checker-webpack-plugin as a devDependency of your project and then amend the webpack.config.js to set ts-loader into transpileOnly mode and drop the plugin into the mix:var ForkTsCheckerWebpackPlugin = webpackConfig = { // other config… context: __dirname, // to automatically find tsconfig.json module: { rules: [ { test: /\.
  • $/, loader: ‘ts-loader’, options: { // disable type checker – we will use it in fork plugin transpileOnly: true } } ] }, plugins: [ new ForkTsCheckerWebpackPlugin() ]};If you’d like to see an example of how to use the plugin then take a look at a simple example and a more involved one.HappyPackNot so long ago I didn’t know what HappyPack was.
  • Isn’t multi-threading great?ts-loader did not initially play nicely with HappyPack; essentially this is because ts-loader touches parts of webpack’s API that HappyPack replaces.
  • id=ts’ } ] }, plugins: [ new HappyPack({ id: ‘ts’, threads: 2, loaders: [ { path: ‘ts-loader’, query: { happyPackMode: true } } ] }), new ForkTsCheckerWebpackPlugin({ checkSyntacticErrors: true }) ]};Note that the ts-loader options are now configured via the HappyPack query and that we’re setting ts-loader with the happyPackMode option set.There’s one other thing to note which is important; we’re now passing the checkSyntacticErrorsoption to the fork plugin.
  • Do note that, as with HappyPack, the thread-loader is highly configurable.If you’d like to see an example of how to use thread-loader and cache-loader then once again we have a simple example and a more involved one.All This Could Be Yours…In this post we’re improving build speeds with TypeScript and webpack in 3 this plugin in play ts-loader only performs transpilation.

If you’re like me then you’ll like TypeScript and you’ll like module bundling with webpack. You may also like speedy builds. That’s completely understandable. The fact of the matter is, you sacrifice…
Continue reading “TypeScript + Webpack: Super Pursuit Mode – webpack – Medium”

Simple tutorial to understand props vs state in React.js by @jjude

Simple tutorial to understand #props vs #state in #ReactJS - @jjude

  • Like parameters in functions, you can pass properties into react.js component.
  • If you want to understand the basics of React.js component, read Create React.js component with Typescript.
  • The property will be an input from the invoking component with the inital value for the Timer.
  • Let us see how to invoke this Timer component with an initial value.
  • Whenver a component calls , React.js calls its corresponding function.

Use props to send information to a component. Use state to manage information created and updated by a component.
Continue reading “Simple tutorial to understand props vs state in React.js by @jjude”

Techniques for decomposing React components – DailyJS – Medium

Techniques for decomposing #ReactJS components:  by @Dvtng #JavaScript

  • Here are three techniques to get you started, from the simplest to most advanced.Split the render() methodThis is the most obvious technique to apply: when a component renders too many elements, splitting those elements into logical sub-components is an easy way to simplify.A common and quick way to split the render() method is to create additional “sub-render” methods on the same class:While this can have its place, it is not a true decomposition of the component itself.
  • As a bonus, when React’s new Fiber architecture arrives, the smaller units will allow it to perform incremental rendering more effectively.Templatize components by passing React elements as propsIf a component is becoming too complex due to multiple variations or configurations, consider turning the component into a simple “template” component with one or more open “slots”.
  • Utilise the ability of React to pass elements, not just data, as props, to create a flexible template component.Another component can then have the sole responsibility of figuring out what to fill the metadata and actions slots with.Keep in mind that in JSX, anything that’s between the opening and closing tags of a component is passed as the special children prop.
  • In the comments example, this would likely be the text of the comment itself.Extract common aspects into higher-order componentsComponents can often become polluted by cross-cutting concerns that aren’t directly related to its main purpose.Suppose you wanted to send analytics data whenever a link in a Document component is clicked.
  • The obvious solution might be to add code to Document’s componentDidMount and componentWillUnmount lifecycle methods, like so:There are a few problems with this:The component now has an extra concern that obscures its main purpose: displaying a document.If the component has additional logic in those lifecycle methods, the analytics code also becomes obscured.The analytics code is not reusable.Refactoring the component is made harder, as you’d have to work around the analytics code.Decomposition of aspects such as this one can be done using higher-order components (HOCs).

React components have a lot of power and flexibility. With so many tools at your disposal, it is incredibly easy for components to grow over time, become bloated and do too much. As with any other…
Continue reading “Techniques for decomposing React components – DailyJS – Medium”

What is Reactive Programming? – Qlik Branch

What is Reactive Programming?  #ReactJS #JavaScript

  • While an interaction like this one seems simple at first, as more and more dynamic pieces are added to an app, the logic for defining state and mapping to rendering can become twisted and convoluted.This dependency nest can produce code that’s difficult to reason about, code, and maintain overtime with imperative coding.Enter reactive programming.Reactive programming is an approach that models data that changes over time.
  • It is a value that changes over time, based on its source changing over time, rather than a value declared once.Now chances are, you already have done reactive programming like the previous example.
  • It turns out, Microsoft Excel is a reactive programming interface!b = a + 1, in ExcelThe value in this type of programming is that you can write logical code to define the relationships between changing entities over time.
  • These relationships are compose-able and can be defined synchronously, making it easy to interpret, support, and expand the logic over time.Visualizing with MarblesIn order to reason about the logic defining these changing values over time, reactive programmers often use what are called marble diagrams to show how a value changes over time based on other values.
  • Our b = a + 1 example in a marble diagram might look like so:Marble diagram for b = a + 1A more practical example is event listeners, another way in which you have probably already used reactive programming concepts.

When building interactive web applications, the complexity of an app’s logic can grow unwieldy as the app grows in scope. A lot of this complexity is owed to a continuously morphing state. When we…
Continue reading “What is Reactive Programming? – Qlik Branch”