Announcement

Collapse
No announcement yet.

Is Bridge.React supporting new React V16?

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

    Is Bridge.React supporting new React V16?

    Not sure if this is the right place to ask ...

    ProductiveRage: Does Bridge.React support the new React V16?

    #2
    Facebook say that any application with working with 15.6 should work with 16.0 without issue. So the short answer is hopefully yes.

    The slightly longer answer is that I haven't done any testing on it yet to confirm this.

    The even longer answer is that there are new features in 16.0 (such as being able to return fragments or strings from Render methods - instead of having to return a ReactElement from a component's Render method, you may instead return a string or a ReactElement[] - and the ability to render components into a DOM node that isn't part of the top level React container element; see "createPortal") which are not supported. They will require changes to the bindings and the types used and will need some careful planning in order to implement correctly and safely. For example, should the Component / StatelessComponent / PureComponent classes be changed such that their render methods may now return Union<string, ReactElement, ReactElement[]> to indicate that they may return one of any of these types? This is probably not the best way to do it because it will introduce compile errors into existing code. Perhaps it would be better to declare multiple "Render" methods on those base classes and components could implement whichever they wanted (whether they wanted to return string, ReactElement or ReactElement[]) - but then it would be difficult to ensure that all components implement one (and not zero and not more than one) of those method signatures.

    Comment


      #3
      Thanks ProductiveRage . For now we're interested in just upgrading to React V16 and not so much in using the new features...

      Comment


        #4
        Hopefully it will all go painlessly! If not, it probably makes most sense to raise an issues here: https://github.com/ProductiveRage/Bridge.React/issues

        Comment


          #5
          Thanks ProductiveRage

          Comment


            #6
            If I want to use react with Bridge, can I use only the Retyped.react system or would I still need to use the bridge.React library? I am trying to figure out what I need to use since I add the Retyped.react library using NuGet but don't see any auto-completion information pertaining to React. (Trying to achieve the same thing also for Three.js).

            Comment


              #7
              Hi gpaluk,

              We would recommend you use the Bridge.React package from ProductiveRage. That package will provide a much better developer experience when using Bridge and React.

              Excellent demos and code samples are available for Bridge.React, which should help get you started quickly.

              Comment


                #8
                Just attempting to run the code in the README from https://github.com/ProductiveRage/Bridge.React gives me issues. I added a div to the index.html file with the id="main". I'm finding that I'm being blocked at every turn when trying to do simple things.

                Uncaught ReferenceError: ReactDOM is undefined.
                Click image for larger version  Name:	Capture.JPG Views:	1 Size:	170.0 KB ID:	4800

                Any ideas?
                Last edited by gpaluk; 2017-09-29 @ 05:27 PM.

                Comment


                  #9
                  gpaluk The Bridge.React package only includes bindings to React, not the React library itself. Does your html file include the script tags for the React library?

                  There is a complete example in the GitHub repo that might help. The html file there (currently using React 15.5.4 but hopefully everything works with 16 as well) is here:

                  https://github.com/ProductiveRage/Br...ples/demo.html

                  Comment


                    #10
                    Ahh thanks ProductiveRage I had tried that with the Three.js binding and it had failed to work. I now have the React libraries working but for some reason, when I grab the ragoric.three.js package and include the three.js library from the following CDN https://cdnjs.com/libraries/three.js/ I can't see any three related code completion in VS. I also tried installing the Retyped.Three NuGet package and including the same CDN js in the index.html, but still nothing. Any help would be cool. I am experimenting with the React libraries, so I will let you know my findings with v16.
                    Last edited by gpaluk; 2017-10-02 @ 11:05 AM.

                    Comment


                      #11
                      gpaluk As with Bridge.React, I think that there are two things that you need for three.js - the JavaScript for the library itself and the bindings. The library is what the browser needs at runtime (without the React library script tags, your React code posted here originally failed at runtime). The bindings are what get you the intellisense in Visual Studio and what describe the interfaces, methods, etc.. for you to call.

                      The "ragoric.three.js" package looks to be a JavaScript library (the NuGet package's Project URL goes here: https://github.com/mrdoob/three.js/tree/master) but I couldn't find any bindings to through NuGet that would provide the intellisense, which would explain the problem that you're having.

                      The Bridge Team have been working on automatically created C# bindings from the TypeScript bindings at DefinitelyTyped (under the guise "ReTyped"), which would be really helpful here because they have released a NuGet package called "Retyped.Three" - however, when I Install that package, it doesn't seem to include any classes or definitions (geoffrey.mcgill, this may need looking at - I can't see any classes in "Retyped.three" when I look in the VS Object Browser and I can't see any when I open the DLL from the packages folder in dotPeek; am I missing something?).

                      Someone did start working on independent three.js bindings for Bridge.NET - maybe guidovanhils can help? He has a GitHub repo and a demo page but I don't think that he has released the bindings as a NuGet package and so it's possibly not as easy to install as it could be.

                      Comment


                        #12
                        Hi gpaluk and ProductiveRage ,

                        "Retyped.Three" - however, when I Install that package, it doesn't seem to include any classes or definitions
                        Indeed, the assembly contains one file with an empty namespace. I logged this as a defect in the Retyped repository. You can track it by the link:
                        https://github.com/Retyped/Retyped/issues/10
                        Last edited by Andrey; 2017-10-02 @ 08:36 PM.

                        Comment


                          #13
                          This explains a lot ha ha. I thought I was doing something wrong :) I actually just managed to get it working by pulling in the definitions from: https://github.com/guidovanhilst/Sha...ypelib/Threejs I have updated them according to the newest Three.js APIs. I noticed an ongoing thread here about creating a Bridge.Three binding descriptor and if I get time I might look into that format and try to contribute.
                          Thanks for the help guys. Appreciated. And Andrey , thanks for reporting the issue.

                          Comment


                            #14
                            geoffrey.mcgill Andrey I have everything working and I am making quite a few updates to the *.cs files and wondered what the process is to getting something in the correct structure that I might create a Bridge.Three NuGet package. Do you have any references to best practices and processes documentation? Especially for making things work seamlessly with Bridge?

                            DierkDroth I'm about to start testing with React 16.

                            Regards

                            Comment


                              #15
                              Thanks for your feedback.

                              Comment

                              Working...
                              X