Topcoder Collection Of Generic ReactJS Components and Utils

Topcoder Collection Of Generic ReactJS Components and Utils

The Topcoder collection of generic ReactJS configurations, components and utilities to be shared between all internal and external ReactJS projects developed by the Topcoder community.

Topcoder React Utils

The Topcoder collection of generic ReactJS configurations, components and utilities to be shared between all internal and external ReactJS projects developed by the Topcoder community.

Installation

Install the package as

$ npm install --save topcoder-react-utils
$ ./node_modules/.bin/topcoder-lib-setup

Then import the global stylesheet into the root ReactJS component of your app:

/* eslint-disable global-require */
if (process.env.NODE_ENV === 'production') {
  require('topcoder-react-utils/dist/prod/style.css');
} else {
  require('topcoder-react-utils/dist/dev/style.css');
}
/* eslint-enable global-require */

To upgrade this library to the latest version just execute again

$ ./node_modules/.bin/topcoder-lib-setup

Reference

Configurations

Components

  • Avatar – The standard component for user avatars;
  • Button – Handles buttons and button-like links (components that look like regular buttons, but behave as links) in the same uniform manner;
  • Link and NavLink – Auxiliary wrappers around React Router's <Link> and <NavLink> components; they help to handle external and internal links in the same uniform manner;
  • Modal – Themeable modal component;
  • ScalableRect – Container that keeps the specified aspect ratio regardless the width you set.

NodeJS Scripts

  • topcoder-lib-setup – Helps to install and upgrade topcoder-react-utils and other similar libraries.

Redux Templates

  • Item – An async piece of data in Redux store.

Utilities

  • Client – Client-side initialization code.
  • Config – Isomorphic app config;
  • Global Styles – Global styles necessary for a generic application;
  • Isomorphy – Collection of helpers to deal with isomorphic aspects of the code;
  • Jest utils – Collection of helpers to be used in Jest tests code;
  • Redux utilsTO BE DOCUMENTED
  • SCSS Mixins – Collection of useful style mixins;
  • Server – Easy creation and launch of web-server with standard configuration, that serves a ReactJS application with or without server-side rendering, supports development tools (Hop Module Reloading), and can be further configured for the needs of specific projects.
  • Webpack – Various utils related to the Webpack bundling process.

Development

For convenient development you can link this package into your host package:

  1. Clone topcoder-react-utils to your machine, and checkout the branch you are going to work with;
  2. Inside topcoder-react-utils folder:
    • Install dependencies with $ npm install;
    • Locate node_modules/extract-css-chunks-webpack-plugin/index.js and inside the isChunk(..) function (line #358) add return true; statement, so that this function always returns true. This step is necessary at the moment, because the check chunk instanceof Chunk check inside this function does not work as expected when Webpack config is spread across multiple inter-linked packages.
    • Run the dev build $ npm run build:dev. It will compile the package, and also will watch for the file changes to automatically re-compile it as necessary.
  3. Inside the host package execute $ npm link PATH_TO_TOPCODER_REACT_UTILS_FOLDER. It will create a symlink from HOST_PACKAGE/node_modules/topcoder-react-utils to your local copy of the topcoder-react-utils package, so that any changes you do there become automatically available to the host package.

CI/CD is set up with CircleCI 2.0 for this repo. A commit to any branch, beside master will trigger testing of the commited code (it will run $ npm test and ensures that it does not fail). A commit to the protected master branch (only organization members and repo admins can commit to master) will trigger the testing, and, if successful, release of the updated package to the NPM registry.

For successful release to NPM you should bump the package version in the package.json. To do it conveniently you can use $ npm version UPDATE_TYPE command, where UPDATE_TYPE stays for one of patch/minor/major to bump up 2, 1, or 0 in a sample version number v0.1.2. This command will update package.json and package-lock.json, and create a new commit and tag in the checked-out Git branch. Mind that patch updates should not introduce any breaking changes into the codebase! Breaking changes should be done via minor or major update, and they should be documented in the CHANGELOG.

Download Details:

Author: topcoder-platform

Source Code: https://github.com/topcoder-platform/topcoder-react-utils

react reactjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

ReactJS: The Javascript Developer’s Guide

This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.