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();
}