Getting Started

11 Jan 2017 / 2 minutes to read

This section helps to get started of the Scroller component in a ReactJS application

Create a Scroller

Refer the common ReactJS Getting Started Documentation to create an application and add necessary scripts and styles for rendering our ReactJS components.

Create a JSX file and use <EJ.Scroller> syntax to render ReactJS Scroller component. Add required properties to <EJ.Scroller> tag element.

  • html
  • ReactDOM.render(   
            <EJ.Scroller id="scrollcontent" height={300} width="100%" >
    								<div className="sampleContent">
    									<h3 style=>MVC</h3>
    											Model–view–controller (MVC) is a software architecture pattern which separates the
    										representation of information from the user's interaction with it.
    										The model consists of application data, business rules, logic, and functions. A view can be any
    										output representation of data, such as a chart or a diagram. Multiple views of the same data 
    										are possible, such as a bar chart for management and a tabular view for accountants. 
    										The controller mediates input, converting it to commands for the model or view.The central 
    										ideas behind MVC are code reusability and n addition to dividing the application into three 
    										kinds of components, the MVC design defines the interactions between them.
    												<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
    													 It can also send commands to the model to update the model's state (e.g., editing a document).
    												<b>A model</b> notifies its associated views and controllers when there has been a change in its state. This notification allows the views to produce updated output, and the controllers to change the available set of commands. 
    													A passive implementation of MVC omits these notifications, because the application does not require them or the software platform does not support them.
    												<b>A view</b> requests from the model the information that it needs to generate an output representation to the user.

    Define an HTML element for adding Scroller in the application and refer the JSX file created.

  • html
  • <div id="scrollbar"></div>
        <script type="text/babel" src="sample.jsx">

    This will render scroller component on executing.

    Run the above code to render the following output,

    Note: You can find the Scroller properties from the API reference document.