Getting Started

11 Jan 20172 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>
								<div className="sampleContent">
									<h3 style=>MVC</h3>
									<div>
										<p>
											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.
										</p>
										<ul>
											<li>
												<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).
											</li>
											<li>
												<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.
											</li>
											<li>
												<b>A view</b> requests from the model the information that it needs to generate an output representation to the user.
											</li>
										</ul>
									</div>
								</div>
                            </div>
                        </EJ.Scroller>,
        document.getElementById('scrollbar')  
    );

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.