Extension React
Extension React is a library that build on top of React, helping you build data-intensive, cross-platform web apps for desktops, tablets, and smartphones.
Quick Start
Use npm
or yarn
to install following dependencies:
babel-polyfill
babel-preset-env
babel-preset-react
d3
react
react-dom
rxjs
ext-react
To launch your app, add the following to your app.js
file
// ./app.js;;;; @ { return <Viewport /> }
Core Concepts
Full documentation: https://huytrongnguyen.github.io/extension-react
Components
A component in Extension React is the combination of a React Component and a component class that controls a portion of the screen. Here is an example of a component that display a simple string:
;; { return <h1>thisprops$viewtitle</h1>; } @ { thistitle = 'Dashboard'; }
Every component begins with an @Component
decorator function that takes a metadata object. The metadata object describes how the React Component and component class work together. That's mean you can access any property or method of component class via this.props.$view
.
Actually, with the above example, it can be implemented like this:
; @ { thistitle = 'Dashboard'; }
Data Package
Stores load data via a Proxy
. Creating a Store
is easy - we just tell it the Proxy
to use for loading and saving its data:
; storeId: 'UserStore' proxy: url: '/api/user/search' ;
In the example above we configured an AJAX proxy to load data from the url /api/user/search
.
Now, just bind a store to the Component
:
;; { superprops; this this; } { CardStore; CardStore; CardStore; } { const records = CardStore; return <section> <section className="rx-grid-header"> <div className="d-flex flex-row rx-grid-header-container"> <div className="rx-grid-column-header text-sm-center" style=width:'20%'>ID</div> <div className="rx-grid-column-header text-sm-center" style=width:'20%'>Name</div> <div className="rx-grid-column-header text-sm-center" style=width:'20%'>Type</div> <div className="rx-grid-column-header text-sm-center" style=width:'20%'>Armor</div> <div className="rx-grid-column-header text-sm-center" style=width:'20%'>Weapon</div> </div> </section> <section className="rx-grid-body" style=overflow:'visible'> <section className="rx-grid-view"> records </section> </section> </section>; }
In this above example, we use subscribe
to update the component whenever data's changed. Because Store convert data to Model then you need to use get
to access data.
Screen Navigation
Route
decorator is most basic responsibility is to render UI when a location matches the route’s path.
Link
provides declarative, accessible navigation around your application.
HashRouter
uses the hash portion of the URL (i.e. window.location.hash) to keep your UI in sync with the URL.
// ./app.js;;;; @ { return <Viewport /> } // ./components/viewport/viewport.js;; { return <section> <Link to="/">Dashboard</Link> <Link to="/search">Search</Link> <Link to="/details/huynguyen">Details</Link> <HashRouter /> </section>; } // ./components/search/search.js;; @@ // /components/search/detail.js;; @@ // ./components/notfound/notfound.js;; @ { return <h1>'{this.props.params.route}' doesn't exist</h1> }}
Built-in Components
Extension React has several build-in components to support for building responsive web. For example:
Grid
are an excellent way of showing large amounts of tabular data on the client side. Essentially a supercharged,
Grid
iss an incredibly versatile component that provides an easy way to display and edit data.
// ./app.js;;; @ { return <Viewport /> } // ./stores/card; storeId: 'CardStore' fields: 'Name' proxy: url: '/data/card.json' // ./components/cards.js; @@ @bind { thisstoresCardStore; } @bind { thisstoresCardStore; } // ./components/cards.view.jsx;; { thispropsstoresCardStore; } { const CardStore = thispropsstores; return <Grid store=CardStore> <div header="Id" dataIndex="Id" /> <div header="Name" dataIndex="Name" editable /> <div header="Type" dataIndex="Type" /> </Grid> }
Release Notes
[2.1.1]
- Using
@Application
to launch the app instead ofRext.application
Ajax
should support to useasync
/await
[2.0.1]
- Change
Rext.launch
toRext.application
with new configuration - Apply
rxjs
- Update scss
[1.8.0]
- Refactor
Rext
core- Changed in
Ext
,Rext
is extended fromExt
- Replaced
core/component
withcore/dom
, all the functions like jquery - A little bit change in
core/list
,core/string
- Replaced
core/map
withcore/dictionary
- Changed in
- Replace
Component
withPureComponent
inLink
,HashRouter
- Refactor
Model
- Refactor
Store
- Separate to multiple class, derived from List:
List
>AbstractStore
>ProxyStore
>Store
- Provide StoreManager to initial all stores on first load, support to lookup by store id
- Separate to multiple class, derived from List:
- Using function component instead of class component in
core/container
,core/form
- Update scss
[1.7.1]
- Change default component alias to
$view
- Add function
Rext.initialState
- Update documentation
[1.6.2]
- Provide
Dropdown
component - Support
editable
forGrid
- Add function
Rext.generateSetter
to handlesetState
for each field in state - Fix issue in routes
- Update documentation for API
[1.5.0]
React.launch
now works with promise function (andasync/await
syntax)- Remove
Rext.application
function - Small refactor in
List
(List([1,2,3])
instead ofList.of([1,2,3])
) andMap
(Map({a:1})
instead ofMap.of({a:1})
) - Provide
Grid
component and updateStore
,Model
to supportGrid
- Add decorator
withProps
torender
function - Fix issue in
get
andset
ofCache
- Update documentation for API
[1.4.4]
- Change
Rext.application
toRext.launch
, do not need a separate target<div id="root"/>
in index.html file. - Revise
Container
concept and change toComponent
- Provide
Container
component and CSS
[1.3.4]
- Correct
List
,Map
- Change
Rext.bootstrap
toRext.application
andinit
tolaunch
- Provide
HashRouter
component andRouter
decorator - Revise
Store
with new implementation - Update README.md
[1.2.1]
- Fix issue in
router
component - Update README.md
- Improve
Store
andObservable
- Implement
Model
[1.1.0]
- Implement
Observable
[1.0.0]
- Change params in
bootstrap
function - Implement
Store
,Container
andRouter
[0.0.1]
- Define Architecture Overview
- Implement
bootstrap
function to launch the app
License
ext-react is released under the MIT license.