RenderDraw enables admin users to setup the interaction and visualization of 3D models anywhere within Salesforce

RenderDraw

This will be a look under the hood of , an life/evolution simulator/god simulator I’m building. As a player you take the role of an old-school deity, who gets to create his/her own world, put some creatures (“Pixlings”) into it and then breathe life into them. You can’t control the behavior of the creatures directly, as it’s evolved through real darwinian evolution over time, but as a god you can give them abilities to interact with each other and their environment. The goal is to create worlds that fascinate yourself and others. Pixling World artificial When I’ve been posting about it online ( and ) people have asked me “how does it work”, so I figured I’d give an overview in this blog post. First I’ll give a brief overview of the game, then I’ll talk about how neural evolution works and finally I’ll get into the technical implementation of all this. post on /r/javascript post on /r/proceduralgeneration network The game For anyone not familiar with the game, here’s what it looks like: The entire state consists of three textures: Environments, Pixling state and Pixling neural network parameters. Environments are defined by the user; one slice per environment. The Pixling state is a combination of predefined properties such as Alive, Species and LastAbility, and whatever properties the user define for the Pixlings such as Energy, DaysSinceBirthday, NumberOfFishInPocket etc. The Pixling neural network parameters are, as discussed above, evolved. Each texture is stored as a R32F 2d array textures in WebGL, i.e. textures with a width, height and depth and a single floating point value per texel. So for instance, the Magma environment at cell (x: 15, y: 23) has a value of 19.3. Or the Pixling state texture at (x: 4, y: 19) of the alive slice (index 0) has a value of 1, which means the Pixling of cell (x: 4, y: 19) is considered alive. Simulation The overall simulation loop looks something like this: Each step: Run all user defined environment computations Build inputs to neural networks Run forward pass on neural networks Run all user defined rules and abilities Handle movement and reproduction All of those steps involve what I call Computations. A Computation takes a number of texture and variables as inputs, runs a function over that and writes the result to one or more textures. Then another Computation uses that output as its inputs, and so on; the simulation is basically just a big graph of Computations into Computations. The functions are implemented as GLSL fragment shaders (a function that runs per pixel on the GPU), so the whole Computation runs asynchronously on the GPU. Many of the Computations use the game state as input and output, but there are also a number of secondary buffers used, for instance to keep the result while performing the forward pass of the neural network or to keep track of how to move Pixlings in the next update. I put an example Computation at the end of this blog post for anyone interested. One of the core reasons the simulation can be very fast is because at no point does the simulation need to synchronize with the CPU. The Computations are sent to the GPU for processing but we don’t need to wait for the result, we can just keep sending Computations to the GPU. Since it’s very cheap to schedule the computations, the game is GPU bound most of the time. Computations are generated for each environment, rule and ability that the user defines (i.e. it’s generating GLSL code from what you define in the UI). At the beginning of the game loop the computations of the environments are run. These are often things like combining the values of two environments, running a blur filter or adding noise to an environment. Next the neural networks are run. First inputs are gathered into one big vector. Then each layer of the network is run and finally an argmax is run on the output of the network to decide what the next action of the Pixling will be. I put the code for the dense layer in the appendix for people who are interested. After this I run all of the rules and abilities, where of course for each Pixling only the ability chosen by the network is invoked. Finally I move and clone Pixlings that indicated they wanted to during the ability and rule computations. Since it’s all done in parallel in shaders, there’s a bunch of code to handle movement and reproduction. At a high level it works by first computing what I call “deltas”, which are a vector for each cell that indicates a unique neighboring cell that it “points” at. I also calculate the inverse of this. This can then be used to “move” or “copy” a Pixling from one cell to another, all in parallel. Currently the deltas are all random, but in the future it may be interesting to explore letting the neural network decide its delta (right now it can decide where to go only by switching between “don’t walk” and “walk randomly”, which works since it gets information about where it’s about to walk, as seen in the , but could be even faster). Apple hunters example Rendering Once the simulation has run a step (or a number of steps if you’re on the Extreme speed setting), I render the results to the screen. Rendering looks something like this: render:draw each environment that is under the Pixlings;draw the current selection rectangles;draw Pixlings;draw each environment that is over the Pixlings; The rendering is more or less just single quads that cover the entire screen (one quad per environment, one for the Pixlings) and most of the work happens in shaders. This means that each pixel on the screen is calculated fairly similarly independent of zoom level or position, so you get a really smooth zoom experience: Zooming in and out on a fairly large map, on my MacBook Air. Sampling & Metrics Another big area of the game is sampling and metrics. Sampling is what I use to keep track of species in the world; basically I now and then record the entire game state and figure out who is a descendant of whom in a web worker. Metrics is calculated by running a “reduce” Computation which takes a texture and halves it in size, each pixel being the sum of its parent four pixels. That’s repeated until the texture is small enough to be moved fairly quickly to the CPU (this is expensive so only happens every 100 steps). This is how I can count the population for instance. That’s all! There’s a lot more I could write about Pixling World but perhaps this will be enough for a rough overview. There are also a lot of things I’m excited to try adding to Pixling World: (Pixlings with memory would be so cool), a way for Pixlings to “see” more of the world and have better control of their movement, some more game like things like items and traits, manual training of their neural networks (perhaps take control of one and use that for ) and much much more. If anyone is interested in either hearing more about any specific area of Pixling World, or have suggestions for ways to take it forward I’m all ears; drop a comment here or on the reddit thread. LSTMs backprop And finally, if you’re interested in trying the game you can do so at (alpha stage so expect some bugs weirdness). https://pixling.world Thanks for reading!/Fredrik (To get news and updates about Pixling World you can follow the project on and ) Twitter Reddit Appendix A challenge: Pixling Battlegrounds In preparation of this article I was working on a world which I was hoping would exhibit some interesting behaviors, but rather than finishing it I realized it may be more fun to put it out as a “challenge”. So for anyone inclined; here’s a world you can try to see if you can complete: (fair warning: I have no idea if it’s possible to complete or not) https://pixling.world/4YUmyd5eZUgzPVHW73Uvk6 Example of a Computation This takes the output of the neural network (brainRes), computes the argmax of it and stores it in cellProperties (the Pixling state). Since it both reads and writes from cellProperties it’s double buffered and the result is automatically copied back to the back buffer. // GLSL code for this computation: in vec2 texcoord;out vec4 out_value; uniform sampler2DArray brainOutputs;uniform sampler2DArray cellProperties; void main() {float maxv = texture(brainOutputs, vec3(texcoord, 0)).r;int maxi = 0;for (int i=1; i < ${abilitySlotsSize}; i++) {float val = texture(brainOutputs, vec3(texcoord, i)).r;if (val > maxv) {maxv = val;maxi = i;}}float ability = texture(cellProperties, vec3(texcoord, ${abilititySlotsStart} + maxi)).r;out_value = vec4(ability, 0.0, 0.0, 1.0);} // Using this computation in the app: computeCopyBack(this.copyMultiLayer,this.computations.abilitiesArgmax,this.config.worldSize,outputs2darray(this.state.textures.cellProperties[0],FixedCellProperties.InvokingAbility, 1),this.state.textures.cellProperties[1],{texture2darrays: {brainOutputs:  this.state.textures.brainRes[this.state.brainResRW.read],cellProperties: this.state.textures.cellProperties[1]}}); Dense layer code This code generates a shader that can compute outputs for multiple nodes in the network at the same time (up to maxColorAttachments). return multilayerShaderSource(maxColorAttachements,`uniform sampler2DArray inputs;uniform sampler2DArray weights;uniform int layerWeightsOffset;uniform bool activation;uniform int outputSize;#define inputSize ${inputSize}`,`float inputVals[inputSize];for (int i=0; i < inputSize; i++) {inputVals[i] = texture(inputs, vec3(texcoord, i)).r;}`,i => `float res = 0.0;// inputLayer is actually the layer in the outputint weightsOffset = layerWeightsOffset + inputLayer * inputSize;for (int i=0; i < inputSize; i++) {float weightVal = texture(weights, vec3(texcoord, weightsOffset + i)).r;res += inputVals[i] * weightVal;}float biasVal = texture(weights, vec3(texcoord, layerWeightsOffset + outputSize * inputSize + inputLayer)).r;res += biasVal;if (activation) {res = max(res, 0.0);}out_values[${i}] = vec4(res, 0.0, 0.0, 1.0);`);

Under the hood of Pixling World

My obsession with creating applications based on plugin architectures probably stems from my history playing role-playing games. These games generally required systems that could have mechanics extended via plugins or new content that could be added to the game via plugins. Since much of my experience early on when learning C# as a kid was making games, a plugin architecture in easily became something I learned about regularly. C# applications In this article, I’ll introduce you to the concept of plugin architectures and specifically look at plugin architecture in C# as well as how we can explore loading plugin information. We’ll also look at some high-level examples of situations where plugins would be valuable — but implementing these in greater detail is an exercise you can do for homework! Let’s dive into it! Understanding Plugin Architecture So what exactly is a plugin architecture with respect to how software is built? A plugin architecture is a design pattern that allows you to extend the functionality of an existing application by dynamically loading and executing external modules or plugins. These plugins can be developed separately and added to the application without modifying the core codebase. That means we can add new functionality and never even need to rebuild the code of the original core application! Using a plugin architecture in C# applications provides several benefits and some of them include: Modularity: With a plugin architecture, different components of an application can be developed separately as plugins. This modularity allows you to focus on specific functionalities without impacting the overall structure of the application. It also enables easier maintenance and updates, as plugins can be added or replaced independently. Flexibility: By using a plugin architecture, you can easily introduce new features or functionalities to an application without modifying the core code. This flexibility allows for rapid development and iteration, as new plugins can be created and integrated with less effort than modifying core shared code. Code Reusability: Plugins can be developed as reusable components that can be used across multiple projects or applications. This reusability not only saves development time but also promotes code consistency and reduces the chances of introducing bugs. Customization: Plugin architectures allow users or clients to customize and extend the functionality of an application based on their specific needs. This customization can be achieved by simply adding or removing plugins without requiring changes to the core codebase. Overall, plugin architectures in C# are something that I use heavily in my development to provide a modular and flexible approach to building software. Check out this video for how I use plugin systems in my application based on vertical slices: https://youtu.be/5OKLiQM2y30?embedable=true Loading Plugins in C# In C#, there are various approaches and techniques for loading plugins into your software solution. Loading plugins can provide enhanced functionality and flexibility to your application. Let’s explore some of these approaches and techniques with code examples. For the following examples, assume we have an IPlugin interface that simply maps to the following code: public IPlugin
{
    void Execute();
} Dynamic Assembly Loading with Reflection in CSharp One approach for loading assemblies. This allows you to load external DLL files at runtime, which can contain the necessary code for your plugins. loading plugins in C# is by dynamically Here’s an example of how you can achieve this: // Get the path to the plugin DLL
string pluginPath = "path/to/plugin.dll";

// Load the plugin assembly
Assembly assembly = Assembly.LoadFrom(pluginPath);

// Instantiate the plugin types
IEnumerable<Type> pluginTypes = assembly
    .GetTypes()
    .Where(t => typeof(IPlugin).IsAssignableFrom(t) && !t.IsAbstract);

// Create instances of the plugins
List<IPlugin> plugins = new();
foreach (Type pluginType in pluginTypes)
{
    IPlugin plugin = (IPlugin)Activator.CreateInstance(pluginType);
    plugins.Add(plugin);
}

// Use the plugins
foreach (IPlugin plugin in plugins)
{
    plugin.Execute();
} In the above code, we first load the plugin assembly using . We then use reflection to find all types that implement the interface and are not abstract. We — — and store them in a list. Finally, we can use the plugins by calling their method. Assembly.LoadFrom IPlugin create instances of these plugin types using reflection specifically, using Activator.CreateInstance Execute Autofac for Dynamically Loading C# Plugins One of my favorite . We can use Autofac to scan a directory for assemblies that contain types implementing the interface and register them. Here’s an example of how to set up Autofac in C# for this purpose: dependency injection frameworks in C# is Autofac IPlugin using Autofac;
using System.Reflection;

public class PluginLoader
{
    public IContainer LoadPlugins(string pluginsPath)
    {
        var builder = new ContainerBuilder();

        // Scan the plugins directory for assemblies
        // and register types that implement IPlugin
        var types = Directory
            .GetFiles(pluginsPath, "*.dll")
            .Select(Assembly.LoadFrom)
            .ToArray();
        builder
            .RegisterAssemblyTypes(types)
            .AssignableTo<IPlugin>()
            .As<IPlugin>();

        return builder.Build();
    }
} The above code will ask use reflection to get the types from the assemblies in the plugins directory. In this case, it will be trying to load any file with a DLL extension from that folder location. From there, we’re able to ask Autofac to register those types, but we use the method to filter the types to only be of IPlugin. Finally, we indicate that they can be resolved as IPlugin instances using the method. AssignableTo<T>() As<T>() The following code example builds the container, registers all of the plugins, and then mimics the behavior in the previous code example where we call on each plugin: Execute() // Assuming the plugins are located in a 'plugins' folder in the application directory
var pluginFolder = Path.Combine(
    Directory.GetCurrentDirectory(),
    "plugins");
var pluginLoader = new PluginLoader();
var container = pluginLoader.LoadPlugins(pluginFolder);

// Resolve all implementations of IPlugin and execute them
foreach (var plugin in container.Resolve<IEnumerable<IPlugin>>())
{
    plugin.Execute();
} I’ve made video tutorials as well on how you can leverage Autofac for loading plugins. Check it out below: https://youtu.be/-pxwL_VD4Uo?embedable=true Examples of Practical Plugin Architectures in C# Now that we’ve seen how we could go about implementing how to load plugins, it’s time to look at some examples of possible plugin architectures in C# applications. In these examples, we won’t be going through building out a full-on application, but we can go into some high-level details of the use case, what a sample plugin API might look like, and why plugins could be useful. Dynamic Data Visualization Plugins . This can be particularly useful when working with large datasets or real-time data streams. By creating a plugin system, you can develop separate visualization modules that can be dynamically loaded and unloaded at runtime, depending on the type and format of the data. Instead of building the core of an application around a visualization or two, we could instead treat them as plugins to allow more rich visualizations to be added in later as the application evolves. One interesting use case of plugin architecture in C# is for dynamic data visualization Here’s some example code that we could consider: // Interface for the visualization plugin
public interface IVisualizationPlugin : IDisposable
{
    void Initialize();

    void RenderData(
        DataSet data,
        IVisualizationContext context);
}

// Example plugin implementation
public class BarChartPlugin : IVisualizationPlugin
{
    public void Initialize()
    {
        // Initialize the bar chart visualization
    }

    public void RenderData(
        DataSet data,
        IVisualizationContext context)
    {
        // Render the bar chart with the provided data
    }

    public void Dispose()
    {
        // Cleanup resources used by the bar chart
    }
} In this example, we might want to have some optional entry points for plugins to get things set up. This would be our method. We mark each as IDisposable so that we can ensure that each plugin has a proper opportunity to clean up resources when we’re ready to unload them. Initialize() The method is where the magic happens, and each plugin would be able to take the incoming data set and a context object for visualization. This context object is contrived, and of course, would be heavily application dependent, but it could be something that allows the plugin to add a UI control into it or a surface that the plugin can paint the visualization onto directly. RenderData Extension-Based Plugins for File Processing Another example of a possible plugin architecture in C# is for extending file processing capabilities. Imagine you have a file-processing application that supports various file formats, such as images, documents, and videos. By implementing a plugin system, you can allow users to develop and load custom file format handlers dynamically. In the code below, we’ll see a plugin format that allows us to check if the plugin can support the file extension. You could imagine that we have something like a facade class that would iterate through each plugin to see which supports it, and call the relevant plugin to handle it: // Interface for the file format plugin
public interface IFileFormatPlugin
{
    bool CanHandleFile(string filePath);

    void ProcessFile(string filePath);
}

// Example plugin implementation
public class PDFPlugin : IFileFormatPlugin
{
    public bool CanHandleFile(string filePath)
    {
        return filePath.EndsWith("pdf", StringComparison.OrdinalIgnoreCase);
    }

    public void ProcessFile(string filePath)
    {
        // Perform PDF-specific file processing
    }
} Custom Rule Engine Plugins A plugin architecture can also be beneficial when implementing a custom rule engine for applications that require complex validation or business rules. By using plugins, you can break down the rule engine into separate modules and dynamically load and execute them based on specific conditions or triggers. In the code example below, we use a TryX pattern that commonly has a boolean return type and an out parameter to get a result. In this case, we can output an Exception instance when the rule evaluation is not met. An alternative way to do this could be , or using the OneOf NuGet package. Let’s check it out: using a custom multi-type to have your own return type that could be the result or an error // Interface for the rule plugin
public interface IRulePlugin
{
    string RuleName { get; }

    bool TryEvaluateRule(
        object target,
        out Exception error);
}

// Example plugin implementation
public class AgeValidationPlugin : IRulePlugin
{
    public string RuleName { get; } = "AgeValidation";

    public bool TryEvaluateRule(
        object target,
        out Exception error)
    {
        // Check if the target object meets the age validation criteria
    }
} Plugin-based Authentication Systems A plugin architecture can also be applied to authentication systems, allowing the integration of various authentication providers such as OAuth, Active Directory, or custom authentication mechanisms. By creating authentication plugins, you can enable flexibility and easily switch between different authentication methods without tightly coupling your application to a specific implementation. Here’s a highly simplified plugin API that demonstrates the goal, but anyone who’s worked with real authentication systems likely realizes this is very trivialized: // Interface for the authentication plugin
public interface IAuthenticationPlugin
{
    bool AuthenticateUser(string username, string password);
}

// Example plugin implementation
public class OAuthPlugin : IAuthenticationPlugin
{
    public bool AuthenticateUser(string username, string password)
    {
        // Authenticate the user using OAuth protocol
    }
} While this example might be a little bit light, the point is calling out the use case — authentication in applications can be a great thing to move into plugins. If you are developing something that may require different authentication integrations, leveraging plugins to interface with each and still provide authentication for your app would be a great opportunity. Social Media Metrics Platform A very relevant example of a plugin architecture in C# is for tracking social media metrics. In my newsletter, I had been sharing behind-the-scenes details on how this was being built and ended up creating a video series that you can watch on YouTube.  It details the entire step-by-step process for making the app. You can see the , which focuses on a plugin architecture in C#: start of the Blazor build series in this video https://youtu.be/qndnxPzjrow?embedable=true Wrapping Up Plugin Architecture in C# Using a plugin architecture in C# development is one of my go-to ways to design systems. I admit that I have a strong bias for them! For me, when I am building applications on my own, they align with how I like to think about being able to extend software. Because I am used to structuring code to be loaded dynamically via plugin systems, this shapes a lot of my design. However, like all things, there are pros and cons and often it doesn’t make sense to complicate trivial applications with plugins — especially if there are features that are not planned to be extended. If you found this useful and you’re looking for more learning opportunities, consider . subscribing to my free weekly software engineering newsletter Also published . here

Improving C# Software Design Using Plugin Architectures

Hey there, have you ever needed to programmatically add a class to an element in an application? Like, maybe when a button is disabled, we need a class, but then once it’s enabled, we don’t. Or how about when a form goes from an invalid state to a valid one? Well, good news, this is actually pretty easy to do in angular. In this post, I’m going to show you four different ways. Angular First, we’ll use a method called class binding. Next, we’ll use the ngClass directive. After that, we’ll use the @HostBinding decorator. And finally, we’ll use the Renderer2 addClass() and removeClass() methods. Let’s get to it! https://youtu.be/sAa8QyFkVkI?embedable=true Using Angular Class Binding So class binding is something that you'd want to use in more simplistic cases where we just either want a class on an element or not. For example, we may want to add a disabled class to a button in a form when the form is invalid. To do this we simply add the word class in square brackets, followed by a dot and then our disabled class name. Then, we will bind this when our control is invalid. <form>
  ...
  <input [formControl]="emailControl" type="email" />
  ...
  <button [class.disabled]="emailControl.invalid">Subscribe</button>
</form> Using the Angular ngClass Directive When we encounter more complex scenarios, we may find ourselves needing to use the directive instead of Angular class binding. The directive gives us more flexibility and allows us to use more advanced logic for adding and removing class names. In this example, we want to switch between two different classes on our wrapping depending on whether the form is valid or not. ngClass fieldset To use the directive, we still use the square brackets, but this time we're going to use a ternary operator and when our control is invalid we'll add a class of 'invalid' and when it's not we'll add a class of 'valid'. ngClass <form>
  <fieldset [ngClass]="emailControl.invalid ? 'invalid' : 'valid'">
    ...
    <input [formControl]="emailControl" type="email" />
    ...
  </fieldset>
</form> Using Angular @HostBinding What if we need to conditionally bind a class on the host of our Angular Component or Directive? Well, this is where the Angular decorator comes into play. To do this we add the decorator within our component class and this will look much like our class binding example. We'll add the class name followed by a dot and then the class. Then we use a field, we'll call this one 'isValid' and we'll initialize it to false. @HostBinding @HostBinding To update this field, we'll need to subscribe to our email control status changes event and then simply update the value based on the status. ...
export class FormComponent implements OnInit {
  @HostBinding('class.valid') isValid = false;
  ...
  constructor(private destroyRef: DestroyRef) {}
    
  ngOnInit() {
    this.emailControl.statusChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((status) => this.isValid = status === 'VALID');
  }
} Using Angular Renderer2 addClass and removeClass Methods When we need to get really crazy and do something like add a class to the body element from within our component, this may seem near impossible in Angular. But, fortunately, it's not. We can reach for the Angular Renderer2 class which allows us to do several different things. For our purposes for conditionally adding classes to elements, we are only concerned with the add and remove class methods. First, we need to make sure that we inject the Renderer2 into our component via the constructor. Then, we will add a ternary operator within our status changes observable subscription for our control. If its status is valid, we will want to add the class to our element, and if it's invalid, we will want to be sure to remove the valid class. document.body ...
export class FormComponent implements OnInit {
  ...
  constructor(private destroyRef: DestroyRef, private renderer: Renderer2) {}
    
  ngOnInit() {
    this.emailControl.statusChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((status) => {
        ...
        status === 'VALID'
          ? this.renderer.addClass(document.body, 'valid')
          : this.renderer.removeClass(document.body, 'valid');
      });
  }
} In Conclusion Okay, so we now have four different ways to conditionally add and remove classes in Angular. First, we used class binding for more simple, straightforward cases. Then we used the directive where more advanced logic was needed. After that, we used the @HostBinding decorator to conditionally bind classes to our component host element. And finally, when all else failed and we needed something else, we used the Renderer2 add and remove class methods to bridge the gap. ngClass So hopefully that helps you out along your way and gives you some options when you need to programmatically add or remove classes. Want to See It in Action? Check out the demo code and examples of these techniques in the stackblitz example below. If you have any questions or thoughts, don’t hesitate to leave a comment. https://stackblitz.com/edit/stackblitz-starters-gn5o3d?ctl=1&embed=1&file=src%2Fform%2Fform.component.ts&embedable=true Also published here.

4 Ways to Dynamically Add Classes in Angular

Hey Everyone, Hope you all doing great. In this post we're building pagination component from scratch in ReactJS. We're not going to use any library here. If you prefer to watch video then you can go through below video else keep reading...😄 Let's start by creating our react-app, npx create-react-app react-pagination-component Create a separate file, like PaginationComponent.js. Here, I'm using to get data and use pagination on that data. jsonplaceholder API This API will return us a list of todos. Now to store this data create one state and initialize it with an empty array. const [data, setData] = useState([]); Now let's use useEffect to set this state with our data which comes from API. }, []); useEffect( () => { fetch( "https://jsonplaceholder.typicode.com/todos" ) .then( ( response ) => response.json()) .then( ( json ) => setData(json)); if you want to see what type of data this api is providing then just go to url. this Also if you don't know how to fetch api in ReactJS you can watch my video on . How to fetch API let's create a small renderData component outside of our main component to render the "to-do" list. );
}; }, []); );
} import React, { useEffect, useState } from "react" ; import "./style.css" ; const renderData = ( data ) => { return ( < ul > {data.map((todo, index) => { return < li key = {index} > {todo.title} </ li > ; })} </ ul > function PaginationComponent ( ) { const [data, setData] = useState([]); useEffect( () => { fetch( "https://jsonplaceholder.typicode.com/todos" ) .then( ( response ) => response.json()) .then( ( json ) => setData(json)); return ( <> < h1 > Todo List </ h1 > < br /> {renderData(data)} </> export default PaginationComponent; In here I have mapped title of to-dos from data 
state. const renderData and Render with data state, inside the return. {renderData(data)} Now, let's create pagination from here. To do that we need two states, const [currentPage, setcurrentPage] = useState( 1 ); const [itemsPerPage, setitemsPerPage] = useState( 5 ); :- stores current page number, initially 0. currentPage :- stores no of items we want to display in 
 single page. Initially it is 5. itemsPerPage pages.push(i);
  } const pages = []; for ( let i = 1 ; i <= Math .ceil(data.length / itemsPerPage); i++) { In above code, pages array contains total number of pages like 1,2,3..upto (total data / itemsPerPage). If you have 20 items and you want to display 5 items per page then you will need 20/5 = 4 pages. Let's create render page number component which will display page numbers. );
}; }, []); }; );
    
  }); );
} import React, { useEffect, useState } from "react" ; import "./style.css" ; const renderData = ( data ) => { return ( < ul > {data.map((todo, index) => { return < li key = {index} > {todo.title} </ li > ; })} </ ul > function PaginationComponent ( ) { const [data, setData] = useState([]); useEffect( () => { fetch( "https://jsonplaceholder.typicode.com/todos" ) .then( ( response ) => response.json()) .then( ( json ) => setData(json)); const handleClick = ( event ) => { setcurrentPage( Number (event.target.id)); const renderPageNumbers = pages.map( ( number ) => { return ( < li key = {number} id = {number} onClick = {handleClick} className = {currentPage == number ? " active " : null } > {number} </ li > return ( <> < h1 > Todo List </ h1 > < br /> {renderData(data)} < ul className = "pageNumbers" > {renderPageNumbers} </ ul > </> export default PaginationComponent; As you can see after the handleClick method at , renderPageNumber I have mapped this pages array which will return an tag which display page numbers. This tag contains key, id, onClick method and className. li li Here className becomes active when you are on the same page as currentPage state. This method runs when we click on any page number and set currentPage state to selected page number. handleClick Now inside the return render component by wrapping it with tag and className as pageNumbers. renderPageNumbers ul For styling, you can refer css file. NOTE: this As you have observed, This page numbers are all over whole page and now we need to set limit to display this page numbers. To do that we need to define 3 more react states. const [pageNumberLimit, setpageNumberLimit] = useState( 5 ); const [maxPageNumberLimit, setmaxPageNumberLimit] = useState( 5 ); const [minPageNumberLimit, setminPageNumberLimit] = useState( 0 ); is to store how many page numbers you want to display. Here I want to display only 5. pageNumberLimit is to store max page bound limit. maxPageNumberLimit is to store min page bound limit. minPageNumberLimit Now modify component by putting if condition like given below, renderPageNumbers ); }
  }); const renderPageNumbers = pages.map( ( number ) => { if (number < maxPageNumberLimit + 1 && number > minPageNumberLimit) { return ( < li key = {number} id = {number} onClick = {handleClick} className = {currentPage == number ? " active " : null } > {number} </ li > } else { return null ; This if condition means that if current number is greater then maxPageNumberLimit+1 and less then then render it else render nothing. minPageNumberLimit As you run your code, you will see that there are only 5 page numbers displayed. Next we need next and previous buttons. Create those buttons around the component. {renderPageNumbers} Just like below, );
}; }, []); }; );
    
  }); setmaxPageNumberLimit(maxPageNumberLimit + pageNumberLimit);
      setminPageNumberLimit(minPageNumberLimit + pageNumberLimit);
    }
  }; setmaxPageNumberLimit(maxPageNumberLimit - pageNumberLimit);
      setminPageNumberLimit(minPageNumberLimit - pageNumberLimit);
    }
  }; );
} import React, { useEffect, useState } from "react" ; import "./style.css" ; const renderData = ( data ) => { return ( < ul > {data.map((todo, index) => { return < li key = {index} > {todo.title} </ li > ; })} </ ul > function PaginationComponent ( ) { const [data, setData] = useState([]); useEffect( () => { fetch( "https://jsonplaceholder.typicode.com/todos" ) .then( ( response ) => response.json()) .then( ( json ) => setData(json)); const handleClick = ( event ) => { setcurrentPage( Number (event.target.id)); const renderPageNumbers = pages.map( ( number ) => { return ( < li key = {number} id = {number} onClick = {handleClick} className = {currentPage == number ? " active " : null } > {number} </ li > const handleNextbtn = () => { setcurrentPage(currentPage + 1 ); if (currentPage + 1 > maxPageNumberLimit) { const handlePrevbtn = () => { setcurrentPage(currentPage - 1 ); if ((currentPage - 1 ) % pageNumberLimit == 0 ) { return ( <> < h1 > Todo List </ h1 > < br /> {renderData(data)} < ul className = "pageNumbers" > < li > < button onClick = {handlePrevbtn} disabled = {currentPage == pages[0] ? true : false } > Prev </ button > </ li > {renderPageNumbers} < li > < button onClick = {handleNextbtn} disabled = {currentPage == pages[pages.length - 1 ] ? true : false } > Next </ button > </ li > </ ul > </> export default PaginationComponent; There are two buttons and before and above the . prev next, {renderPageNumbers} In method for next button. In this method whenever user clicks on next button, it will set the current page state to plus 1. and check the condition if current page has not crossed maximum page number limit or not. If yes then it will reset this max and min page number limit with new limit. handleNextbtn In method for previous button. Only change is in the sign and in if condition. Suppose you are at page 6 and you want to go back to 5 then this condition will check that 6-1=5%5==0 so it will become true and it will reset max and min page number limits. handlePrevbtn Below code is to disable next button,we will disable next button when user is at last page. disabled={currentPage == pages[pages.length - 1 ] ? true : false } Below code is to disable Prev button, we will disable prev button when user is at 1st page. disabled={currentPage == pages[ 0 ] ? true : false } Now our Pagination component is Almost completed one thing left is to add those three dots which indicates that there are more pages then displayed. Let's create them. Above is the full code for this Tutorial. Just before the return I have created two buttons with hellip; which is unicode for ... There are two buttons pageIncrementBtn will render when page length is > maxPageNumberLimit.
 while pageDecrementBtn will render when minPageNumberLimit >= 1. Don't forget to render both of this ... buttons below and after the component. {renderPageNumbers} Now your whole Pagination component is completed. Watch above given video to know about one more pagination component which loads items vertically. Thanks For Reading.😄

ReactJS Pagination Tutorial: Building from Scratch

In this blog post, I am going to share how I created a Blazor component without life-cycle methods and razor file syntax. We could also say this as class only component approach but without life-cycle methods. Many of them might knew this way of component rendering, but I felt like sharing this would help other folks who doesn’t know. I found this approach after going through various components used in Blazor source code. To demonstrate this approach, we are going to create a simple Rating component. I am creating a class named Rating.cs. As mentioned previously this is a class only component so I am not creating a Razor component item. {
} public class Rating First step in this approach is to implement Rating class with IComponent interface. : {
} public class Rating IComponent Now the Rating class must implement below two methods of IComponent interface. Attach — Attach the RenderHandle instance to the rating component. SetParametersAsync — Set the component parameters. Yes I lied before, we need this life cycle method. But I promise, this is the only one needed I will not add any more. In the Attach method, we need to get and store the RenderHandle instance for later usage. Now the code will look like below. : { RenderHandle _renderHandle; IComponent.Attach(RenderHandle renderHandle)
     {
        _renderHandle = renderHandle;
     }
} public class Rating IComponent private void Now we need to handle the SetParametersAsync method, this method should take care of below two important responsibilities. Get component parameters from ParameterView and set in the corresponding component property. Here Rating component uses Value property. Invoke Render method of the RenderHandle with the RenderFragment delegate. Now the final rating component will look like below. : { RenderHandle _renderHandle;        

        [ ] Value { ; ; } IComponent.Attach(RenderHandle renderHandle)
        {
            _renderHandle = renderHandle;
        }

        Task IComponent.SetParametersAsync(ParameterView parameters)
        { ( entry parameters)
            { (entry.Name)
                { = ( )entry.Value; ;
                }
            }
            _renderHandle.Render(RenderDelegate); Task.CompletedTask;
        } { max = Math.Min(Value, ); seq = ; ( i = ; i < max; i++)
            {
                builder.OpenElement(seq++, );
                builder.AddAttribute(seq++, , );
                builder.AddContent(seq++, );
                builder.CloseElement();
            }
        }
    } public class Rating IComponent private Parameter public int get set void foreach var in switch ( ):
                        Value case nameof Value int break return ( ) private void RenderDelegate RenderTreeBuilder builder int 5 int 1 for var 0 "span" "style" "color:#f49813;font-size:30px" "★" Now the Rating component can be used in our application simply like below. The output looks like below. Closing I hope you have learned one of many ways of creating Blazor components. In this post, I am neither recommending this as the best approach nor insisting to use this approach for performance benefits. I found this approach as a simple and clean way of creating simple Blazor components. Leave comments or share this post if you found this helpful. Happy coding!! Also published at https://dev.to/madhust/blazor-in-depth-create-blazor-component-without-lifecycle-methods-2786

How to Create a Blazor Component Without Lifecycle Methods

This blog post will help you build powerful search UI experiences similar to Airbnb's. I will do this using ReactiveSearch - the most popular React UI components library for building search interfaces. I will do this by breaking down the UI into components so this will be helpful to build any search UI. In the process, you will also learn about about how to work with ElasticSearch. . You can read all about it . If you have already worked with an earlier version ReactiveSearch, this post will also guide you wrt the breaking changes for v3 and how you can upgrade your components. ReactiveSearch v3 is just out now here You should try out the to see what we will be building. I will wait for you! Live Demo of our final app here What is ElasticSearch and why should you care about it? Now, let’s understand the role of ElasticSearch in helping us build the above UI. ElasticSearch is a . It allows you to , , and big volumes of data quickly (we are talking milliseconds here). It is generally used as the underlying engine/technology that powers applications that have complex search features and requirements. You can read more about it . super-fast, open-source, full-text search engine store search analyse here With ElasticSearch, you can build a fast search utilising its powerful Query DSL. However, setting up ElasticSearch correctly requires a lot of work. For instance, the data mapping, analysers and tokenisers need to be set correctly or you may not receive accurate search results back. Besides, the more filters that get applied along with the search query, the more complex the resulting search query becomes. We, at Appbase, have built some open-source tools to help you do all these things with the matter of some clicks. A tool to into ElasticSearch — add data Importer A tool to like an excel sheet — view ElasticSearch data Data Browser A tool to easily — generate relevant ElasticSearch queries Query Builder In this blog post, with the help of some of these tooling, we will utilise the strengths of ElasticSearch with React to build powerful apps. How to use ElasticSearch with React? We will be using and open-source libraries to build the Airbeds app in this post. These libraries offer a range of highly customisable rich UI components that can connect with any ElasticSearch server and provide you with an appropriate default search query for all generic use-cases (like E-commerce, Yelp, Meetups, etc) bundled into these components. ReactiveSearch will help us to build UI widgets for filters and search-related UI elements. ReactiveMaps will provide us with the UI widgets for Map related UI elements. ReactiveSearch ReactiveMaps is currently featured on Product Hunt. 🎉 🎉 ReactiveMaps A sneak peeks into the UI components offered by ReactiveSearch and ReactiveMaps. Image: Things we will need In order to build Airbeds application, we will need a set of things before we get started with writing actual code: Dataset for Airbeds App: To make a great UI we should have a good dataset. We found an awesome dataset for our App. Here is the link to a dataset: . https://www.kaggle.com/airbnb/seattle ElasticSearch hosting: You can set up and install an ElasticSearch server by following the , or you can create a free account at which provides ElasticSearch hosting as a service and is easy to use. For simplicity, we will be using appbase.io service to get started. official installation guide appbase.io I’ve already created an appbase app with Airbeds dataset. You can check out the cleaned-up dataset from above , which is built by Appbase.io: over here in the data browser tool Dejavu Hosted ElasticSearch dataset for our app. View Image: here The credentials for accessing the above app programmatically are: app= credentials= "airbeds-test-app" "X8RsOu0Lp:9b4fe1a4-58c6-4089-a042-505d86d9da30" // read-only Now, we will go step by step to build our application. We’ll use . So, you can be with me during the whole journey and see the step by step progress of our application as we build it. Click on the above link and click on Open React button. Codesandbox.io Step 1: Base setup for CRA with ReactiveSearch and ReactiveMaps If you have tried out the before, you will feel right at home as we build this app. Create React App Create React App Initialise the CRA setup. We will use npm as the package manager, you can also use yarn instead. npx create-react-app airbeds
cd airbeds
npm start Note: npx comes with npm 5.2+ and higher, see instructions for an older release here Go grab a coffee and be back in a couple of minutes … The setup will be ready for you! One of the great benefits of using CRA is that it works without requiring to set up a build configuration. At this point, you should have a directory structure similar to this: airbeds
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── package-lock.json
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js Next, we will install the and npm packages. ReactiveSearch ReactiveMaps Install ReactiveSearch npm install @appbaseio/reactivesearch Install ReactiveMaps npm install @appbaseio/reactivemaps Use the button switch and hamburger icon to browse the code we have written so far. Snippet: Codesandbox link: 1 https://codesandbox.io/s/github/appbaseio-apps/Airbeds-app/tree/step In addition to the code sandbox above, you can also try the code so far directly from our GitHub — . https://github.com/appbaseio-apps/Airbeds-app/tree/step1 Step 2: Adding components from ReactiveSearch library Adding the first ReactiveSearch component: ReactiveBase All the ReactiveSearch components are wrapped inside a container component — ReactiveBase which glues the ElasticSearch index and the ReactiveSearch components together. We’ll use this in /src/App.js: The app and credentials are taken from my appbase.io app. You can create your own app and add those from your . dashboard We can set our app’s theme by providing the theme attribute prop to our ReactiveBase component. Here is the theme for our app: Now let’s start the server with npm start. Breaking Down The Airbeds App Now that we have a dataset to play around with and we are also done with our setup, it’s time for adding components in our app. Before you add the below snippets to the render() method, you should also remember to import them using the following format: { Component# , Component# } @appbaseio/reactivesearch import 1 2 from 1. DataSearch Component component creates a search bar UI which allows us to search for available rooms. DataSearch In this component, we are passing the dataField parameter with the name value. Here, name is the column in the database on which we want to apply our search. You can learn more about this component . here 2: RangeSlider Component will be used to create the price filter which allows a user to filter accommodations based on their budgets. RangeSlider In this component, we are passing the range attribute, which will define the start and end value of our filter. We can set the labels with rangeLabels parameter. We have set default values of start and end price as 10$ and 20$ respectively. range parameter shows the list of components, with RangeSlider component has to change reactively. You can learn more about this component . here 3: NumberBox Component will help us to make UI widget for Guests filter, which allows a user to filter properties by the number of guests that can be accommodated. NumberBox Here, data parameter defines the maximum and minimum value for the NumberBox component. You can learn more about this component . here 4. DateRange Component will provide UI widget for Date filter, which allows a user to select a range of dates for accommodation. DateRange Here, the numberOfMonths attribute shows the number of months to be shown in the calendar view. initialMonth sets the initial visible month when the calendar UI is opened. You can learn more about this component . here Codesandbox link: 2 https://codesandbox.io/s/github/appbaseio-apps/Airbeds-app/tree/step In addition to the code sandbox above, you can also try the code so far directly from our GitHub project — . https://github.com/appbaseio-apps/Airbeds-app/tree/step2 Step 3: Styling the components we have so far Alright, Alright, Alright !!! I got it! You must be thinking that why these components look so simple. Let’s add some styles to them. We are using the majority of styling for setting layout. We have used flex to design our layout. We have used buttons for each filter. We will show particular filters when the user hovers on particular buttons. Add styles in App.css file and add this statement in App.js file: ; import "./App.css" Use the button switch and hamburger icon to browse the code we have written so far. Snippet: Codesandbox link: 3 https://codesandbox.io/s/github/appbaseio-apps/Airbeds-app/tree/step In addition to the code sandbox above, you can also try the code so far directly from our GitHub — . https://github.com/appbaseio-apps/Airbeds-app/tree/step3 Step 4: Adding components from ReactiveMaps and styling them We will import components from ReactiveMaps library using this statement: { ReactiveGoogleMap } ; import from '@appbaseio/reactivemaps' 5. ReactiveGoogleMap Component component provides a map as a data-driven layer. One can add marker pins, show popovers, draw polygons, build navigation routes based on the results from the ReactiveSearch components. In our current app, we will display the available accommodations based on the search and filters onto the map view. Interesting! Isn’t it? ReactiveGoogleMap In this component, defaultZoom attribute defines the map’s zoom level and accepts integer values between [0, 20]. We can also provide style to ReactiveMap component with the style prop. The innerClass attribute helps us to provide className for inner components of ReactiveMap. renderAllData attribute is used for showing result cards for user’s search. We have designed our result-cards using flex. We will show markers on the map with using renderData parameter. You can know more about this component . here Wohoo!!! We have made working Airbeds app! But still, we will add more styles to make it look cooler and professional! Use the button switch and hamburger icon to browse the code we have written so far. Snippet: Codesandbox link: 4 https://codesandbox.io/s/github/appbaseio-apps/Airbeds-app/tree/step In addition to the code sandbox above, you can also try the code so far directly from our GitHub — . https://github.com/appbaseio-apps/Airbeds-app/tree/step4 Adding the popover effect on markers Now in the final step #5, we will add a popover effect on markers so that when a user clicks on the marker, we can show them more details. Let’s do it! We will use onPopoverClick attribute of ReactiveGoogleMap component to achieve this. The return value here is a valid JSX markup, giving you full control over what can be displayed within it. This is how my onPopoverClick function looks: Congrats! If you have followed along so far, you should see a fully working Airbeds app, just as you saw at the start of the post! 🎉 Use the button switch and hamburger icon to browse the code we have written so far. Snippet: Codesandbox link: 5 https://codesandbox.io/s/github/appbaseio-apps/Airbeds-app/tree/step In addition to the code sandbox above, you can also try the code so far directly from our GitHub — . https://github.com/appbaseio-apps/Airbeds-app/tree/step5 In case you are missing a step, you can get the code so far by following these: git clone https: cd airbeds
npm install
npm run dev
# open http: //github.com/appbaseio-apps/Airbeds-app.git //localhost:3000 Summary Here comes the end of our journey, and we have got our awesome Airbeds app built with ReactiveSearch and ReactiveMaps. To summarise everything so far: This post introduces and — UI components libraries for ElasticSearch that provide the scaffolding for building great search experiences. Next, we went step-by-step to add different UI components and style our app. ReactiveSearch ReactiveMaps : Base setup for CRA with ReactiveSearch and ReactiveMaps ( ) Step 1 Codesandbox link : Adding components from ReactiveSearch library ( ) Step 2 Codesandbox link : Styling the components we have so far ( ) Step 3 Codesandbox link : Adding components from ReactiveMaps and styling them ( ) Step 4 Codesandbox link : Adding a popover effect on markers ( ) Step 5 Codesandbox link Useful References: While this post only shows how to build an Airbnb like search, we offer a 5+ hours course teaching on how to build an end-to-end Airbnb clone using React, Redux, TypeScript, Express.JS, ElasticSearch, Firebase and Postgres SQL: . https://reactiveapps.io/products/AWtRe_43OSQtLugWf1Fk All ReactiveSearch and ReactiveMaps components can be interactively tried using the playground . https://opensource.appbase.io/playground/ The documentation for all the above plus 20 other components is available at . https://docs.appbase.io/docs/reactivesearch/v3/overview/quickstart/ You can look at the code for this app at . https://github.com/appbaseio-apps/Airbeds-app Finally, go ★ the project on so you can find it when you need to build that awesome search! Github

How to Build an Airbnb clone with React and ElasticSearch

This tutorial is the sixth part of our React Native Travel Article App UI clone series. In the , we successfully implemented the Delimiter dots animation while scrolling the Destination cards in the Destinations section. This tutorial is the continuation of the same tutorial from where we left off in the last part. So, it is recommended to go through the previous parts in order to get the knowledge and insight into the overall project. previous part In case of wanting to learn from the beginning, all the parts for this tutorial series are available below: React Native Travel Article App UI Clone #1: Getting Started React Native Travel Article App UI Clone #2: Destinations Section React Native Travel Article App UI Clone #3: Destinations Info Section React Native Travel Article App UI Clone #4: Recommendation Section React Native Travel Article App UI Clone #5: Animated Delimiter Dots As mentioned in the previous tutorial part, the inspiration for this tutorial series came from the React Native Theme that delivers a wide variety of beautiful templates written in React Native and powered by universal features and design. The templates enable us to implement our own apps and even help us get started with our own startups. And, this sixth part is also the continuation of the same coding implementations and designs from the Youtube video tutorial by for the Travel Article App UI clone. The video tutorial seems to deliver the overall tutorial using fast coding which may be difficult to grasp for any developer especially the beginners. Hence, this article tutorial provides a step by step implementation which will be easier to understand and implement. So, the learners can relax and take their time to implement the UI. React UI Kit Overview In this sixth part of this tutorial series, we are going to add the icons in the required UI sections and also add star ratings to the . In this tutorial part, we are going to complete the implementation of the List screen as a whole. The idea is to add the vector icons to the required UI section of the list screen.  Then, we are going to add the star ratings to the Recommendation section. Finally, we will also configure the star ratings to show the active and inactive stars on the basis of rating value. Recommendation cards So, let us begin!! Installing Vector Icons Package Here, we are going to install the package into our project. This package provides customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source, and full styling. Now, in order to install the package, we need to use the following command: react-native-vector-icons expo install react-native-vector-icons Now, we need to import the required icons into our List screen. For that, we need to use the code from the following code snippet: FontAwesome ; Octicons ; import from 'react-native-vector-icons/FontAwesome' import from 'react-native-vector-icons/Octicons' Here, we have imported the Font Awesome icon package in the form of component. And, we have also imported the icon package as Octicons component. FontAwesome Octicons Adding Icon to UI sections Now, we are going to add the icons that we imported to various sections of the List screen. Adding Icon to Recommendation Section Here, we are going to add the bookmark icon to the Recommendation cards. The bookmark icon will be set on the basis of the saved value from the destinations array data. If the saved value is true then the bookmark active icon will be set otherwise the bookmark inactive icon will be set. Now in order to implement this, we need to use the code from the following code snippet in the renderRecommendation() function: <View style={[styles.flex, styles.recommendationHeader]}> <View style={[ styles.flex, styles.row, styles.recommendationOptions ]}>
                <Text style={styles.recommendationTemp}>
                  {item.temperature}℃
                </Text>
                <FontAwesome
                  name={item.saved ? 'bookmark' : 'bookmark-o'}
                  color={theme.colors.white}
                  size={theme.sizes.font * 1.25}
                />
              </View>
            </View> < = = }} /> Image style {[styles.recommendationImage]} source {{ uri: item.preview Here, we have added the component which enables us to set the FontAwesome icons. We have also provided the color and size props to the component. FontAwesome FontAwesome Hence, we will get the following result in our emulator screen: As we can see, we have got the bookmark icons in the Recommendation cards section. Adding Icon to Destinations section In the Destinations section, we need to add two icons. One is the location icon in the component and the other is the greater than an arrow-like icon in the Info section. First, we are going to add the location marker icon to the component of the section. For that, we need to use the code from the following code snippet in the function: ImageBackground Destination ImageBackground Destinations renderDestination() <View style={[styles.column, { : , : theme.sizes.padding / }]}> <Text style={{ : theme.colors.white }}> <Text> {item.location}</Text> < flex 2 paddingHorizontal 2 {item.user.name} < = , ' '}}> Text style {{color : theme.colors.white fontWeight : bold </ > Text color < = = * } = /> Octicons name "location" size {theme.sizes.font 0.8 color {theme.colors.white} </ > Text /View> Here, we have added the component to add the icon from the Octicons package. We have selected the location icon of the Octicons icon package. The size and color props are also configured in the component. Octicons Octicons Hence, we will get the following result in our emulator screen: As we can see, we have got the location icon in the background image of the Destinations section. Now, we need to add an icon to the section. For that, we need to use the code from the code snippet below: Destinations Info <View style={[styles.column, styles.destinationInfo, styles.shadow]}> <View style={[ styles.row, { : , : }]}> <FontAwesome
                name= size={theme.sizes.font * }
                color={theme.colors.caption}
              /> < {item.title} < = , ' ', , }}> Text style {{ fontSize: theme.sizes.title fontWeight: 500 paddingBottom: 8 </ > Text justifyContent 'space-between' alignItems 'flex-end' {item.description.split('').slice(0, 50)}... < = }}> Text style {{ color : theme.colors.caption </ > Text "chevron-right" 0.75 </ > View /View> Here, we have added the component which provides us with access to Font Awesome icons. The size and color props are also configured. FontAwesome Hence, we will get the following result in the emulator screen: As we can see, we have got the 'greater than' icon in the Destination Info section as well. Hence, this completes our task of adding icons in the List screen. Now, we are going to add the star ratings to the section. Recommendation Card Adding Star Ratings to the Recommendation Card Section In this step, we are going to add the star ratings in the Recommendation Card Section. These star ratings will represent the overall rating given to the recommended travel destination. We might have remembered that we have added the rating value before. Now, we are going to add the star icons including the rating value. For that, we are going to define a new function called which will return the template for the ratings. The overall implementation of this function is provided in the code snippet below: renderRatings() renderRatings(rating) { stars = ( ).fill( ); (
        stars.map( { activeStar = index < rating; ( const new Array 5 0 return ( ) => value, index const return )
        })
      )
    } < = = ` ${ }`} = ? ' ' ' ']}
            /> FontAwesome name "star" key { star- index color {theme.colors[activeStar active : gray Here, in the function we have initialized a new Array variable called stars which can take up to 5 values. This function takes ratings as a parameter. Then, we have used the array function which enables us to iterate through each item of stars array. renderRatings() map() Inside the function, we have defined a new constant that stores the in order to give style accordingly. Then, we have returned the component with star icons. map() activeStars FontAwesome The component is configured with key and color props. The key prop to identify each item in array uniquely. And, the color is based on the constant. FontAwesome activeStar Now, we need to call this function in the function as shown in the code snippet below: renderRatings() renderRecommendation() <View style={[styles.flex, styles.column, styles.shadow, { : , : theme.sizes.padding / }]}> <Text style={{ : theme.colors.caption}}>{item.location}< Text> < justifyContent 'space-evenly' padding 2 {item.title} < = * , ' ', / , }}> Text style {{ fontSize: theme.sizes.font 1.25 fontWeight: 500 paddingBottom: theme.sizes.padding 4.5 </ > Text color /Text>
              <View style={[
                styles.row,
                { alignItems: 'center', justifyContent: 'space-between', marginTop: theme.sizes.margin }
              ]}>
                <Text style={{ color: theme.colors.active }}>
                  {this.renderRatings(item.rating)}
                  {item.rating}
                </ </ > View /View> Here, we have called the function inside the component wrapping the rating value. We have passed the rating value of the item from the destinations data array. renderRatings() Text Hence, we will get the following result in our emulator screen: As we can see, we have got the star ratings with star icons and rating value in our Recommendation card section. But, all the ratings seem to be active and it does not seem appealing as well. Now, we are going to configure the active and inactive stars based on rating value as well as style the rating stars properly. Configuring the active rating star icons Here, we are going to configure the active ratings based on the rating value. For that, we need to make some configurations to the constant in the method as shown in the code snippet below: activeStar renderRatings() stars.map( { activeStar = .floor(rating) >= (index + ); ( ( ) => value, index const Math 1 return )
        }) < = = ` ${ }`} = = ? ' ' ' ']}
            /> FontAwesome name "star" key { star- index size {theme.sizes.font} color {theme.colors[activeStar active : gray Here, we have taken the floor value of rating using Math function and index property. Then, we have also added the size prop to the component. FontAwesome Now, we need to make some changes to the function as well which is provided in the code snippet below: renderRecommendation() <View style={[styles.flex, styles.column, styles.shadow, { : , : theme.sizes.padding / }]}> <Text style={{ : theme.colors.caption}}>{item.location}< Text> < justifyContent 'space-evenly' padding 2 {item.title} < = * , ' ', / , }}> Text style {{ fontSize: theme.sizes.font 1.25 fontWeight: 500 paddingBottom: theme.sizes.padding 4.5 </ > Text color /Text>
              <View style={[
                styles.row,
                { alignItems: 'center', justifyContent: 'space-evenly', marginTop: theme.sizes.margin }
              ]}>
                {this.renderRatings(item.rating)}
                <Text style={{ color: theme.colors.active }}>
                  {item.rating}
                </ </ > View /View> Here, we have removed the function from the Text component and placed outside it. We have also added some style to the component wrapping the function. renderRatings() View renderRatings() Hence, we will get the following result in our emulator screen: As we can see, we have got the star ratings in accordance with the rating value. The rating section also looks appealing now as in the actual app. Now, we are going to add navigation to the Article screen while clicking on the Destination section cards. Adding Navigation to Article screen Here, we are going to add the navigation to screen. We are going to configure this navigation property into the Destination Section cards For that, we need to use the code from the following code snippet in the function: Article renderDestination() renderDestination(item){ ( <ImageBackground
            style={[styles.flex, styles.destination, styles.shadow]}
            imageStyle = {{borderRadius : theme.sizes.radius}}
            source= {{uri : item.preview}}
          >
        …………………………………..
          </ImageBackground> )
    } return this.props.navigation.navigate('Article', { article: item })}> < = = => TouchableOpacity activeOpacity {0.8} onPress {() </ > TouchableOpacity Here, we have wrapped the entire Destination card template by the component. Then, we have added the prop to the component to give the opaque effect while clicking. In the event of the component, we have configured the navigation using the navigate function provided by prop. The prop is automatically available to all the screens which are configured to our . TouchableOpacity activeOpacity TouchableOpacity onPress TouchableOpacity navigation navigation Navigator Now, we can navigate to Article screen by clicking on the Destination cards as shown in the emulator simulation below: As we can see, when clicking on each Destination cards, we can navigate to the Article screen. With this, we have come to the end of this part of the tutorial. Finally, we have successfully implemented each and every UI section in the List screen of our React Native Travel Article App UI clone. Conclusion This tutorial is the sixth part of the React Native Travel Article App UI clone tutorial series. In this part, we continued from where we left off in the fifth part of this tutorial series. In this part of the tutorial, we learned how to add the vector icons to the required UI section in our List screen. Then, we got the stepwise guidance on how to add the star ratings as well as configure the active ratings based on rating value. We also learned to add the navigation from the navigation prop in order to navigate to the Article screen. Finally, we have successfully completed the implementation of every UI section in the List screen of our Travel Article App UI clone.

RENDERDRAW

renderdraw.us

-- employees

Since n.d.

COMPANY RANKING

RENDERDRAW

EVERGREEN INDEX #8501

Representing this company? Click here to claim and customize this page!

RenderDraw WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

RENDERDRAW

renderdraw.us

-- employees

Since n.d.

COMPANY RANKING

RENDERDRAW

EVERGREEN INDEX #8501

RELATED COMPANIESRANK

STORIES ABOUT RENDERDRAW

Representing this company? Click here to claim and customize this page!

RenderDraw WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!