Share My Creation [ReAct Bootstrap]: Testing the waters

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.Initialize
    app.AppName = "ReactBootstrapMash"
    app.appid = "com.Mashy.ReactBootstrapMash"
    app.Version = "1.00"
    app.Author = "Anele Mashy Mbanga"
    app.Website = "http://www.mbangas.com"
    app.Email = "anele@mbangas.com"
 
    '*****build the pages
    Dim myIndex As pgIndex
    myIndex.Initialize(app,"index")
    myIndex.Build
     
    'add the pages to the app
    app.addpage(myIndex.page)
 
    'build the app
    app.Build
 
    'open the compiled app
    app.open

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

 

[Mashiane]

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
    Page.Initialize(App,pgName)
    HTMLName = 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!")
    h1.ReAct(hello)
   
    '************chapter :2
    'fluid container
    Dim fc As RBElement: fc = fc.CreateFluidContainter(Page,"")
    'row
    Dim r1 As RBElement: r1 = r1.CreateRow(Page,"")
    'column
    Dim c1 As RBElement: c1 = c1.CreateColumnOS(Page,"",0,0,0,6,6,6)
    'form
    Dim frm As RBElement: frm = frm.CreateFORM(Page,"")
    frm.AddHeading(1,"Login Form")
    frm.AddHR
    frm.AddEmail("emailInput","Email address","Email")
    frm.AddPassword("passwordInput","Password","Password")
    frm.AddSubmitButton("save","Submit",9,3)
   
    'add form to the column
    c1.AddForm(frm)
    'add column to row
    r1.AddColumn(c1)
    'add row to container
    fc.AddRow(r1)
    fc.AssignTo("loginFormHTML")
    fc.ReAct(hello)
   
    '**********chapter 3
    Page.navbar.Title = "EIS"
    Page.NavBar.AddNavItem("home","Home","#",True)
    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")
    'Page.NavigationBar.AddSearch
    Page.NavBar.ReAct(nav)
   
    '********** chapter 4
    'App.ReactBootstrap = True
    'Page.AddHr
    Dim nav1 As RBElement = Page.AddDiv("nav1")
    Page.RBNavBar.Title = "EIS"
    Page.RBNavBar.AddNavItem("home","Home","#",1)
    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)
    'Page.RBNavBar.ReAct(nav1)
    'add container to page
    'fc.Add2Page
   
    'other things
    Dim fc As RBElement: fc = fc.CreateContainter(Page,"")
    fc.AddHR
    'row
    Dim r1 As RBElement: r1 = r1.CreateRow(Page,"")
    'column
    Dim c1 As RBElement: c1 = c1.CreateColumnS(Page,"sidebar",3,3,3)
    Dim c2 As RBElement: c2 = c2.createcolumnS(Page,"",9,9,9)
    c2.addclass("profile-desc")
   
    'add column to row
    r1.AddColumn(c1)
    r1.AddColumn(c2)
    'add row to container
    fc.AddRow(r1)
    'add container to page
    fc.Add2Page
   
    'add the navbar to the page
    'Page.NavigationBar.Add2Page   ' IMPORTANT
End Sub

 

[inakigarm]

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

 

[Mashiane]

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

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.

 

[Mashiane]

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...

https://mega.nz/#!VvBxDaBL!yQdHLzG1Ha8rOVb0VIIzFvv3W9krPcmrfYDapZf1A9Qhttps://mega.nz/#!VvBxDaBL!yQdHLzG1Ha8rOVb0VIIzFvv3W9krPcmrfYDapZf1A9Q

 

[alwaysbusy]

Nice, but just be very careful using the React framework. Facebook recently changed their patent clause, which even affects WordPress https://ma.tt/2017/09/on-react-and-wordpress/. Many big projects are now forced to move to another library.

 

[Mashiane]

Nice, but just be very careful using the React framework. Facebook recently changed their patent clause, which even affects WordPress https://ma.tt/2017/09/on-react-and-wordpress/. Many big projects are now forced to move to another library.

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!!!

 

[Mashiane]

So facebook as MIT(ed) ReAct, good news... https://medium.freecodecamp.org/fac...heres-a-2-minute-explanation-why-5878478913b2

 

[LWGShane]

@Mashiane - Have you thought about updating to Bootstrap 4?

 

[Mashiane]

@Mashiane - Have you thought about updating to Bootstrap 4?

Hi

At the moment I'm not really sure if these use 4 but I doubt it. See here https://react-bootstrap.github.io for more. Ta!

 

[Mashiane]

This thread & project is no longer being maintained, for further details, see this project

BANanoReact - A community project