Skip to content
/ Brex Public

Library To help you build dynamic Front end web using state style.

Notifications You must be signed in to change notification settings

HoSheiMa/Brex

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Hello in Brex world

(!) we working with new version support TypeScript, more clear code, useful function (to help you create complex ui with easy way + easy state management)

A JavaScript library for building user interfaces with easy syntax system and esay controll each widget in each component and Design simple views for each state in your application.

  • Fast and Lite. lite library to help you to create a Complex UI with simple ways.
  • Tools. give you more library & methods helping you create all you want.
  • Easy Style. using React style component with methods & Flutter Widget style with fast readable system
  • Easy Control all things in component is a widget

Simple Example

  • Without Hooks
 Brex(Component(function() {

  this.state = {
    ...this.state,
    name: 'HoSheiMa',
  }

   return View({
     children: [
       Child({
         text: 'Hello ' + this.state.name
       })
    ]
})
  • With Hooks (Beta)
 Brex(Component(function() {

   [name, setName] = this.useState('HoSheiMa'); 

   return View({
     children: [
       Child({
         text: 'Hello ' + name
       })
    ]
})
  • Advance Example
var Main = function() {
  
  /**
   * // without Hooks
   * this.state = {
   *  ..this.state,
   *  x: 0,
   * }
  */

  // with Hooks
  [x, setX] = this.useState(0);

  var redText = createNativeElement({
    attrs: {
      style: "color:red;"
    }
  }); // ? Create a custom child using createNativeElement function
  
  return View({
    children: [
      // children :D
      redText({
        text: "Hello world x: " + x,
        events: {
          click: function() {
            /**
              * // without Hooks
              * this.setState({
              *  x: x + 1,
              * })
            */

            // with Hooks
            setX(x + 1); 
          }
        }
      })
    ]
  });
};

Brex(Component(Main)); // init main point to start from it.

for more example visit Full example section. with lastest version.