Share My Creation [ReAct Bootstrap]: Testing the waters

Discussion in 'B4J Share Your Creations' started by Mashiane, Sep 14, 2017.

  1. Mashiane

    Mashiane Expert Licensed User

    Hi there...

    For a while now Facebook has been working on ReAct, their flagship javascript library to create UIs. There is a variant of this called ReAct-Bootstrap but however I just wanted to try and test if I was going to be able to do this first before I really decide on taking it further, towards a React-Native hybrid app developer.

    For now, this is just a single HTML 5 page created with the ReActBootstrap framework based on a b4j "could-be" library.

    There is nothing really fancy as of yet, you can create a navigation bar, the buttons, the form controls and the buttons and also a grid based on bootstrap.


    My Main code is like...

    Dim app As RBApp
        app.AppName = 
        app.appid = 
        app.Version = 
        app.Author = 
    "Anele Mashy Mbanga"
        app.Website = 
        app.Email = 
    '*****build the pages
        Dim myIndex As pgIndex
    'add the pages to the app
    'build the app
    'open the compiled app
    This creates the necessary "index.html" file with its components and then opens the page in the browser. I've tried to follow React's way of doing things i.e.

    1. create a div and give it an id
    2. create a component and or assign it to a variable
    3. react the component to the div
    Last edited: Sep 14, 2017
    joulongleu, BPak and JakeBullet70 like this.
  2. Mashiane

    Mashiane Expert Licensed User

    The pgIndex class code...

    Sub Class_Globals
    Public Page As RBPage
    Public Keywords As String
    Public Description As String
    Private App As RBApp
    Public HTMLName As String
    End Sub

    'Initializes the object. You can add parameters to this method if needed.
    Public Sub Initialize(pApp As RBApp,pgName As String)
    'define the app the page belongs to
        App = pApp
    'initialize the page
        HTMLName = 
    End Sub

    'build the page
    Sub Build
    Page.KeyWords = "react,bootstrap,mashy,b4x"
    Page.Description = "RBMash seeks to provide a tool to create ReactBootstrap based apps using B4J"
    'Page.BackgroundColorIntensity = App.EnumIntensity.LIGHTEN5
        Page.Title = "Chapter 1"
    'add a navbar
        Dim nav As RBElement = Page.AddDiv("nav")
    'create an element on the page
        Dim hello As RBElement = Page.AddDiv("hello")
    'create the element to react to the previously added component
        Dim h1 As RBElement = Page.AddHeading(1,"Hello world!")
    '************chapter :2
        'fluid container
        Dim fc As RBElement: fc = fc.CreateFluidContainter(Page,"")
        Dim r1 As RBElement: r1 = r1.CreateRow(Page,"")
        Dim c1 As RBElement: c1 = c1.CreateColumnOS(Page,"",0,0,0,6,6,6)
        Dim frm As RBElement: frm = frm.CreateFORM(Page,"")
    1,"Login Form")
    "emailInput","Email address","Email")
    'add form to the column
    'add column to row
    'add row to container
    '**********chapter 3
        Page.navbar.Title = "EIS"
    Page.NavBar.AddNavItem("editprofile","Edit Profile","#",False)
    Page.navBar.AddDropDownMenuItem("helpdesk","viewtickets","View Tickets","#")
    Page.navBar.AddDropDownMenuItem("helpdesk","newticket","New Ticket","#")
    Page.NavBar.AddDropDownMenu("helpdesk","Help Desk")
    '********** chapter 4
        'App.ReactBootstrap = True
        Dim nav1 As RBElement = Page.AddDiv("nav1")
    Page.RBNavBar.Title = "EIS"
    Page.RBNavBar.AddNavItem("editprofile","Edit Profile","#",2)
    Page.RBNavBar.AddDropDownMenuItem("helpdesk","viewtickets","View Tickets","#","3.1")
    Page.RBNavBar.AddDropDownMenuItem("helpdesk","newticket","New Ticket","#","3.2")
    Page.RBNavBar.AddDropDownMenu("helpdesk","Help Desk",3)
        'add container to page
    'other things
        Dim fc As RBElement: fc = fc.CreateContainter(Page,"")
        Dim r1 As RBElement: r1 = r1.CreateRow(Page,"")
        Dim c1 As RBElement: c1 = c1.CreateColumnS(Page,"sidebar",3,3,3)
    Dim c2 As RBElement: c2 = c2.createcolumnS(Page,"",9,9,9)
    'add column to row
    'add row to container
    'add container to page
    'add the navbar to the page
        'Page.NavigationBar.Add2Page   ' IMPORTANT
    End Sub
  3. inakigarm

    inakigarm Well-Known Member Licensed User

    Have you tested Skeleton library for B4J? Is light & easy to learn (buy you'll have to understand javascript to make complex webapps)
  4. Mashiane

    Mashiane Expert Licensed User

    Yes I have checked that out and its brilliant. My plan though is to develop something using the ReAct Web / Native framework towards a hybrid app developer. This will NOT use jServer but just be HTML5 and Javascript.
    ShaneG30 and inakigarm like this.
  5. Mashiane

    Mashiane Expert Licensed User

    My components are based on an HTML element builder, called RBElement. This has most of HTML tags and other things. I have followed this approach to make element building flexible for my approach without having to have elements defined using text in my code. This means I can chop and change an element each time without having to rewrite the code.

    Here is the source code so long...!VvBxDaBL!yQdHLzG1Ha8rOVb0VIIzFvv3W9krPcmrfYDapZf1A9Q
    inakigarm likes this.
  6. alwaysbusy

    alwaysbusy Expert Licensed User

    Nice, but just be very careful using the React framework. Facebook recently changed their patent clause, which even affects WordPress Many big projects are now forced to move to another library.
    ShaneG30 likes this.
  7. Mashiane

    Mashiane Expert Licensed User

    Thanks for the heads up @alwaysbusy , just read the issues and they are a big hit, affecting the community in not a nice way... Eish jah neh!!!
  8. Mashiane

    Mashiane Expert Licensed User

  9. ShaneG30

    ShaneG30 Well-Known Member Licensed User

  10. Mashiane

    Mashiane Expert Licensed User

  11. Mashiane

    Mashiane Expert Licensed User

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice