public static void Render(ReactElement component, ComponentReady ready) { if (component == null) { throw new ArgumentNullException(nameof(component)); } if (ready == null) { throw new ArgumentNullException(nameof(ready)); } var container = Document.CreateElement("div"); container.Style.Display = Display.None; Window.SetTimeout(() => // Use SetTimeout to ensure that the DOM has updated (that the container has been added) { try { React.Render( new HostComponent( afterUpdate: () => ready(container), wrappedComponent: component ), container ); } catch { container.Remove(); throw; } }); }
public static void Main() { React.Render( new TodoApp("C# React canonical todo app"), Document.GetElementById("main") ); }
public static void Main() { var initialState = new TodoAppState { DescriptionInput = "", Visibility = TodoVisibility.All, Todos = new Todo[] { new Todo { Id = 0, Description = "Learn React + Redux in C#", IsCompleted = true }, new Todo { Id = 1, Description = "Build an awesome app with them", IsCompleted = false } } }; var store = Redux.CreateStore(Todos.Reducer(initialState)); React.Render(Components.TodoItemList(store), Document.GetElementById("root")); }
public static void Main() { var appRoot = Document.GetElementById("app"); var userInterface = DOM.Div("hello world"); React.Render(userInterface, appRoot); }
public static void Main() { // get the element that mounts the app var appRoot = Document.GetElementById("app"); // attach the user interface to the root node React.Render(new MessageLogger(), appRoot); }
private static void Main() { var container = Document.CreateElement("div"); Document.Body.AppendChild(container); React.Render( DOM.Div("This was rendered by React!"), container ); }
public static void Main() { LogotronApp.ChargerLogotron(); var container = Bridge.Html5.Document.GetElementById("main"); container.ClassList.Remove("chargement"); var logotron = new LogotronApp( new LogotronApp.Props { MessageApi = new MessageApi() } ); React.Render(logotron, container); }
public static async void Main() { Document.Body.AppendChild(RazorEngine.RenderDefaultView("/Views/SimpleView.cshtml", new SimpleViewModel() { Foo = "bar" })); await LoadScript("react.js"); await LoadScript("react-dom.js"); React.Render(new SimpleReactComponent(new SimpleReactComponent.Props() { Label = "Input text", OnSave = t => Window.Alert(t) }), Document.GetElementById("root")); }
private void RenderIfActive() { React.Render( DOM.div( null, DOM.h1(null, "React in DuoCode"), DOM.span(new HTMLAttributes { className = "time" }, _viewModel.LastUpdated), DOM.input(new InputAttributes { className = "message", value = _viewModel.Message, onChange = ev => UpdateMessage(ev.target.value) }), DOM.span(new HTMLAttributes { className = "error" }, _viewModel.ValidationError) ), _renderContainer ); }
public static void Go() { var dispatcher = new AppDispatcher(); var store = new AppUIStore(dispatcher, new MessageApi(dispatcher)); var container = Document.GetElementById("main"); container.ClassName = string.Join(" ", container.ClassName.Split().Where(c => c != "loading")); React.Render( new AppContainer(store, dispatcher), container ); // After the Dispatcher and the Store and the Container Component are all associated with each other, the Store needs to be told that // it's time to set its initial state, so that the Component can receive an OnChange event and draw itself accordingly. In a more // complicated app, this would probably be an event fired by the router - initialising the Store appropriate to the current URL, // but in this case there's only a single Store to initialise. dispatcher.Dispatch(new StoreInitialised(store)); }
public static void Main() { var dispatcher = new AppDispatcher(); var store = new SimpleExampleStore(dispatcher); React.Render( new App(store, dispatcher), Document.GetElementById("main") ); // This action would usually be fired off by a router to inform the Store for the current URL that it needs to // wake up, but in this example there is only a single Store! Sending it the StoreInitialisedAction means that // it can fire its OnChange event which the App component is waiting for, to know that it's show time. dispatcher.HandleViewAction(new StoreInitialisedAction(store)); Window.SetInterval( () => dispatcher.HandleServerAction(new TimePassedAction()), 500 ); }
public static void Main() { // The primary intentions of this library are twofold: // // 1. To handle routing in a "strongly-typed" way that ensures that routes are only defined in one placed and that this information is used to // generate links to those routes in the application (for example, if a route is configured to map "/accommodation" to an AccommodationContainer // component and then, one day in the future, the route is changed to "/where-to-stay", there should only be one place that needs to be updated, // there should be worry that there may be many anchor tags throughout the application with hard-coded URLs that all need changing from the old // "/accommodation" URL to the new "/where-to-stay" format) // // 2. To decouple the aspects of the routing library to make it easy to configure and easy to test // a. This requires a "Navigator" which defines routes and maps them on to actions (actions in the context of a Flux-like architecture that will // be passed through a dispatcher). This will also expose properties and/or methods for generating URLs that correspond to those routes so // that other code may request URLs from this "one authoritative source of routes" instead of URLs having to be hand coded. In this project, // this is implemented by the ExampleNavigator. // b. It also requires a navigation-to-action matcher" whose role is to map the navigation actions to React elements - the premise being that when // a navigation action is received, a different area of the application will be displayed (or a different page within the same area). This may // be implemented in any way that you see fit but the ReactRouting library includes a NavigateActionMatcher class that is helpful for constructing // mappings from actions to components and it includes a RoutingStoreActivatorContainer that will take a NavigateActionMatcher instance and ensure // that the appropriate component is rendered within it, depending upon the last navigation action. // c. Finally, something is required to listen to navigation events - in this example that is the ReactRouting's Html5HistoryRouter, which means that // navigation events are published and subscribed to/from the browser's HTML5 history (pushState) API but it could be any implementation of the // IInteractWithBrowserRouting interface (for example, the unit tests use a "MockHistoryHandler" that allow navigation events to be raised and // received without having to try to read/change the URL of the browser hosting the tests). // // The navigator's methods "Home()", "Accommodation()" and "Accommodation(section)" return the appropriate URLs for each route (as a UrlPathDetails // instance). These URLs should be rendered using the ReactRouting's "Link" component rather than a simple anchor tag since navigation from an anchor tag // will directly change the browser's URL instead of using the HTML5 history API to raise a navigation event without actually reloading the page (the Link // component uses the Html5HistoryRouter by default but may be configured to use an alternative router if you need it to). // - The Link component has options to set additional class names if it relates to the current URL or if it relates to an ancester of the current URL (if // it links to "/accommodation" and the current URL is "/accommodation/hotels", for example). If these options are used then the Link component should // not be rendered within a PureComponent, since it varies by more than just its Props - it is fine for it to be within an ancestor chain of Stateless- // Components or Components, though (for this reason, the NavigationLinks in this example is a StatelessComponent and not a PureComponent). // // Note that this library only supports route-matching by URL segments (eg. "/accommodation/hotels") and not QueryString (eg. "/accommodation?section=hotels"). // The navigator exposes methods to navigate URLs and it sends actions through the dispatcher when the route changes var dispatcher = new AppDispatcher(); var navigator = new ExampleNavigator(dispatcher); // These are the components that should be displayed based upon the navigation actions that come through the dispatcher (there is a Store for the main // components to illustrate how the Stores should also subscribe to navigation actions that they are interested in; for example, the HomeStore subscribes // to the NavigateToHome action) // - The NavigateActionMatcher class just offers a simple way to build up the mappings from navigation actions to ReactElement-to-display (the // NavigateActionMatcher instance will be passed to the RoutingStoreActivatorContainer that will ensure that the appropriate ReactElement is // rendered to whatever container is specified, see below..) var homeStore = new HomeStore(dispatcher); var accommodationListStore = new AccommodationListStore(dispatcher); var accommodationSectionStore = new AccommodationSectionStore(dispatcher); var homeContainer = new HomeContainer(homeStore, navigator); var accommodationListContainer = new AccommodationListContainer(accommodationListStore, navigator); var accommodationSectionContainer = new AccommodationSectionContainer(accommodationSectionStore, navigator); var navigateActionMatchers = NavigateActionMatcher.Empty .AddFor <NavigateToHome>(homeContainer) .AddFor <NavigateToAccommodationList>(accommodationListContainer) .AddFor <NavigateToAccommodationSection>(accommodationSectionContainer) .AddFor <InvalidRoute>(new NotFoundContainer(navigator)); // Render the application state (since no navigiation events have been raised yet, this will not display anything - but the RoutingStoreActivatorContainer // will be waiting to receive navigation actions so that the appropriate content for the URL can be displayed in a moment) React.Render( new RoutingStoreActivatorContainer(dispatcher, navigateActionMatchers), Document.GetElementById("main") ); // Start handling routes (calling RaiseNavigateToForCurrentLocation will result in an action being raised for the current URL, so the RoutingStoreActivatorContainer // component can mount the appropriate container component) var browserHistoryHandler = Html5HistoryRouter.Instance; RouteCombiner.StartListening(browserHistoryHandler, navigator.Routes, dispatcher); browserHistoryHandler.RaiseNavigateToForCurrentLocation(); }