I've been using React with Agility's new .Net Core SDK lately, and boy is it a wonderful combination. First of all, I'm coding the whole thing using Visual Studio Code on MacOS, so that's really fun.
James Vidler came up with the genius idea to map React Components directly to Agility Modules. This means that the Agility content, which is automatically routed to Modules, is then passed along to the React Component.
Check out the render method of the component for listing blog posts:
We start with an array of posts that is passed from our ViewComponent (coded in C#) and we render them out using the array map function. That only renders the initial set of 5 posts, but as you can see, we have a "load more" link at the bottom. I've hooked that up to the REST API to pull the next set of posts.
Let's look at the loadMore function:
It's pretty simple - just grab the posts using the take and skip variables from state and then append to the posts array. Updating the state triggers our same render method from above and the component updates.
What's amazing about this?
The FIRST rendering of this component happened on the SERVER. The subsequent rendering (after we click "Load More") happens on the CLIENT. However, we only wrote 1 render method to handle both of those cases.
I don't know about you, but that's pretty darned awesome (and a huge time saver)!
What's more, this project is setup using WebPack with hot reload enabled. That means that, as a developer, my saved changes are reflected in the browser IMMEDIATELY as I'm working on my front-end code.
How do you get this setup and working for you?
Go ahead and check out the code for this project on GitHub - the README has instructions for getting started.
When you're ready to take the plunge, go ahead and create a Test Drive - you'll get your very own Agility instance to work with!
