DEV Community 👩‍💻👨‍💻

Cover image for A new JavaScript library for building user interfaces, Easy, Fast, And readable Syntax, Mix With React + Flutter Style
HoSheiMa
HoSheiMa

Posted on • Updated on

A new JavaScript library for building user interfaces, Easy, Fast, And readable Syntax, Mix With React + Flutter Style

Hello in Brex world

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.
GitHup Link : https://github.com/HoSheiMa/Brex

Top comments (5)

Collapse
 
hosheima profile image
HoSheiMa Author

Welcome To any One wanna to join in our team,
req: good Javascript, any Framework Like (React, Flutter, Angular, etc... )
Contact me at :
FB: facebook.com/qandilabdel.fadilawyan
TW: twitter.com/Qandil_AFA

GT: github.com/HoSheiMa

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post