Giter Club home page Giter Club logo

freactal-starter-kit's Introduction

This is a React starter kit that goes past what most of them do. It is opinionated, and biased towards Freactal as a store (instead of Redux).

Here are the inclusions and benefits:

neutrinorc.js

This uses the Neutrino foundation for the initial structure, webpackery, and test automation. A partial list of the important sub-packages Neutrino brings in are:

  • eslint,AirBnB: there are yarn scripts for style consistentcy. if for some reason you do NOT want this, remove the first include in the .neutrinorc config file.
  • jest: The tests are separated into a test folder.
  • Modular CSS: including xxx-module.css (and using its named styles) gives you no-sweat css modularity. (including css with other names gives you NOT-modular css that names global styles)

Freactal + Freactal-seed

Freactal lets you define stores like Redux without all the bullshit. Freactal-seed lets you define stores in Freactal with one-stroke, including a default value, expected type (integer, array, object, etc) and automatic backup of store values to local storage.

Like Redux, Freactal lets you define stores at the component level. These stores will override any state in the global state (the one defined in the App component) so should be namespaced accordingly.

Also the App State is set to store state in Local Storage, and the templated page states do NOT (by default). If your states don't conflict with global state you can switch on local storage for them.

https://github.com/FormidableLabs/freactal https://github.com/bingomanatee/freactal-seed

Bottle.js for the lib

Bottle gives you injection; for those used to injection from Angular it means you can replace constants, utilities and functions in the test process without a lot of worry, and you can centralize your includes in a single container.

Currently only the lib folder and its items are bottled.

Gulp for spawning components

There is a gulp task you can execute:

gulp comp --name=Foo

This will spawn a component with:

  • a CSS module style sheet
  • its own Freactal store
  • A component
  • A view

React Router

React Router is available; working on a Gulp task to create a route. The Dom version is included in the root index file. The Route switch is in content, but as the guide outlines, you can have sub-switches in other pages in your app as well.

https://reacttraining.com/react-router/core/guides/philosophy

A basic head and scrolling content layout with nav

Almost all my sites have a fixed header and scrolling content region. If this is not your desired system adjust the App component to taste.

Auth0 for user identity

I've been using Auth0 habitually for my personal projects. It gives you social login for free (subject to their user agreement). @TODO

React-md for style

I use the React Material Design(MD) system for quick and pretty UI widgets. Its not a 360 degree solution for everything but it saves a lot of time for basic dropdowns buttons and inputs.

https://react-md.mlaursen.com/

Why?

I'm doing a lot of smaller projects (ADD programmer) and I'm doing the same boilerplate over and over. Its not useful to do this, and I want to share some of the economies I've found for quick jumpstarting of projects with others.

Also, I think that Freactal and Bottle are two great solutions that have escaped notice, and I want to do what I can to promote them.

Roadmap

Some of the things I want to do when this is all stable is:

  • Add a basic grid/REST/ table scaffolding via a wizard to let you do easy bootstrapping of admin/list displays.
  • Include internationalization.
  • Include test coverage starters for the Freactal stores.

Feedback and questions welcome in the Issues section on Github.

freactal-starter-kit's People

Contributors

bingomanatee avatar

Watchers

 avatar James Cloos 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.