Giter Club home page Giter Club logo

hierarchical-list's Introduction

Hierarchical List

Implementation of a hierarchical list structure in React & Redux.

Check it out!

Functionality Overview

Features

  • Transform recursive input Json into flat immutable data structure
  • Expand and collapse subhierarchies
  • Reset data

Technologies used

scaffolding

The project was bootstrapped with create-react-app.

unit tests

Unit tests are executed with jest. For testing the react components, enzyme is used. For testing with redux, redux-mock-store is used.

static type checking

Static type checking is provided by flow.

state management

State management is provided by redux. For organizing the state, the redux ducks proposal was followed. Immutable data structures courtesy of immutable.js are used in the store.

side effect model

For side effect management redux-saga is used. Strictly speaking, this is not required for the project (as the input json is not required to change, we could just import the json through webpack), but I figured loading the json asynchronously makes the project a bit more exciting.

css preprocessor

Sass is used as a CSS preprocessor.

isolated component development

Storybook is used for isolated component development, though this would not have been strictly necessary, as there are very few components in the App.

Usage

Nothing out of the ordinary here:

Running

yarn install
yarn start

Executing Unit tests

yarn test

hierarchical-list's People

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.