React JS Development Services & Consulting | Reactjs Development Company - Surekha Technologies
ReactJS Development Services
We offer complete ReactJS development services to help you build complex web applications.
Let’s talkReactJS Development Services
ReactJS is an excellent choice if you are looking to develop a single-page app that is fast, and responsive. Among all of the existing frameworks and libraries in the market, React stands out as one of the most popular and fast-growing front-end libraries, steadily gaining popularity with both business owners and developers.
We have been leading a ReactJS development company that is experiencing rapid growth, we can accelerate your brand's digital transformation with our React technologies. Our expert team of in-house React developers is capable of developing robust solutions based on your custom business needs.
ReactJS is an excellent choice if you are looking to develop a single-page app that is fast, and responsive. Among all of the existing frameworks and libraries in the market, React stands out as one of the most popular and fast-growing front-end libraries, steadily gaining popularity with both business owners and developers.
ReactJS Consulting
PWA Development
Web Service Integration
Dedicated Developers
Upgrade & Migration
Support & Maintenance
TECHNOLOGIES STACK
Frontend
Testing
Success Story
View All An error occurred while processing the template.
Range start index 1 is out of bounds, because the sliced sequence has only 1 element(s). (Note that indices are 0-based).
The blamed expression:
==> 1..2 [in template "48635695788729#20119#73405" at line 255, column 32]
----
FTL stack trace ("~" means nesting-related):
- Failed at: #list entries[1..2] as curEntry [in template "48635695788729#20119#73405" at line 255, column 17]
----
1<style>
2.no-link-style {
3 text-decoration: none !important;
4 color: inherit !important;
5}
6
7.latest-insights-section {
8 background-color: #F5F5F5;
9}
10
11.latest-blog-wrap a {
12 text-decoration: none !important;
13 color: inherit !important;
14}
15
16.blog-content-card a {
17 text-decoration: none !important;
18 color: inherit !important;
19}
20
21.latest-insights-section {
22 background-color: #FFFFFF;
23}
24
25.latest-blog-wrap {
26 border-radius: 10px;
27 background-color: #F5F5F5;
28}
29
30.vertical-blog.latest-blog-wrap .blog-img {
31 height: 464px;
32}
33
34.latest-blog-wrap .blog-img img {
35 height: 100%;
36 object-fit: cover;
37 border-radius: 10px;
38}
39
40.vertical-blog .blog-content-card {
41 padding: 36px 30px 30px 30px;
42 height: calc(100% - 464px);
43}
44
45.horizontal-blog.latest-blog-wrap {
46 gap: 30px;
47 padding: 24px 24px 24px 30px;
48}
49
50.horizontal-blog.latest-blog-wrap+.horizontal-blog.latest-blog-wrap {
51 margin-top: 30px;
52}
53
54.horizontal-blog.latest-blog-wrap .blog-img {
55 max-width: 336px;
56 margin-left: auto;
57 border-radius: 10px;
58 overflow: hidden;
59 height: 332px;
60}
61
62.blog-title {
63 display: -webkit-box;
64 -webkit-box-orient: vertical;
65 -webkit-line-clamp: 2;
66 overflow: hidden;
67 margin-bottom: 24px;
68 padding-right: 90px;
69}
70
71.blog-dic {
72 display: -webkit-box;
73 -webkit-box-orient: vertical;
74 -webkit-line-clamp: 2;
75 overflow: hidden;
76 margin-bottom: 24px;
77 min-height: 52px;
78}
79
80.horizontal-blog .blog-content-card .blog-title {
81 -webkit-line-clamp: 2;
82 min-height: 90px;
83 padding-right: 0;
84 margin-bottom: 36px;
85}
86
87.horizontal-blog .blog-content-card p.blog-dic {
88 -webkit-line-clamp: 3;
89 min-height: 78px;
90 margin-bottom: 46px;
91}
92
93.custom-img-width {
94 width: -webkit-fill-available;
95}
96
97@media screen and (max-width:1600px) {
98 .horizontal-blog.latest-blog-wrap .blog-img {
99 max-width: 270px;
100 height: 286px;
101 }
102
103 .vertical-blog.latest-blog-wrap .blog-img {
104 height: 409px;
105 }
106
107 .horizontal-blog .blog-content-card .blog-title {
108 min-height: 70px;
109 margin-bottom: 26px;
110 }
111}
112
113.horizontal-blog .blog-content-card p.blog-dic {
114 margin-bottom: 41px;
115}
116}
117
118@media (min-width: 1200px) and (max-width: 1599px) {
119 .horizontal-blog.latest-blog-wrap+.horizontal-blog.latest-blog-wrap {
120 margin-top: 30px;
121 }
122}
123
124@media (min-width: 1601px) {
125 .horizontal-blog.latest-blog-wrap+.horizontal-blog.latest-blog-wrap {
126 margin-top: 40px;
127 }
128}
129
130@media screen and (max-width:1450px) {
131 .horizontal-blog.latest-blog-wrap .blog-img {
132 max-width: 240px;
133 height: 268px;
134 }
135
136 .horizontal-blog .blog-content-card p.blog-dic {
137 min-height: 70px;
138 margin-bottom: 28px;
139 }
140
141 .horizontal-blog.latest-blog-wrap {
142 gap: 20px;
143 }
144
145 .blog-post-date {
146 margin-bottom: 18px;
147 }
148
149 .blog-title {
150 margin-bottom: 16px;
151 }
152
153 .blog-dic {
154 margin-bottom: 20px;
155 }
156
157 .vertical-blog.latest-blog-wrap .blog-img {
158 height: 391px;
159 }
160
161 .horizontal-blog.latest-blog-wrap+.horizontal-blog.latest-blog-wrap {
162 margin-top: 30px;
163 }
164}
165
166@media screen and (max-width:991px) {
167 .horizontal-blog .blog-content-card .blog-title {
168 min-height: 60px;
169 }
170}
171
172@media screen and (max-width:767px) {
173 .blog-post-date {
174 margin-bottom: 8px;
175 align-items: center;
176 }
177
178 .horizontal-blog .blog-content-card .blog-title {
179 max-width: 329px;
180 margin-bottom: 10px;
181 }
182
183 .horizontal-blog .blog-content-card p.blog-dic {
184 min-height: 60px;
185 }
186}
187</style>
188<#assign BlogEntryLocalService=serviceLocator.findService("com.liferay.blogs.service.BlogsEntryLocalService")>
189 <#assign AssetEntryLocalService=serviceLocator.findService("com.liferay.asset.kernel.service.AssetEntryLocalService")>
190 <#assign DLFileEntryLocalServiceUtil=serviceLocator.findService("com.liferay.document.library.kernel.service.DLFileEntryLocalService") />
191 <section class="latest-insights-section space-half">
192 <div class="container">
193 <div class="section-header text-center position-relative">
194 <h2>Latest Insights</h2>
195 <a href="/blog" aria-label="Blogs"> <button class="text-read-more-btn position-absolute view-all-btn-tr d-xl-block d-none">View All <img
196 src="/documents/d/surekhatech/right-orange-arrow-1-" alt="right-arrow" width="20" height="20"></button></a>
197 </div>
198 <#if entries?has_content>
199 <div class="latest-blogs-wrapper d-xl-block d-none">
200 <div class="row">
201 <div class="col-lg-6 col-12">
202 <#assign curEntry=entries[0] />
203 <#if curEntry?has_content>
204 <#assign date=curEntry.getPublishDate()?date?string.long />
205 <#assign title=curEntry.getTitle(locale) />
206 <#assign summary=curEntry.getSummary() />
207 <#assign blog=BlogEntryLocalService.fetchBlogsEntry(curEntry.classPK) />
208 <#assign entry=curEntry />
209 <#assign assetRenderer=entry.getAssetRenderer() />
210 <#assign viewURL=assetPublisherHelper.getAssetViewURL(renderRequest,renderResponse,entry) />
211 <#if viewURL?? && viewURL?has_content>
212 <#attempt>
213 <#assign viewURL=assetRenderer.getURLViewInContext(renderRequest, renderResponse, viewURL) />
214 <#recover>
215 </#attempt>
216 </#if>
217 <div class="vertical-blog latest-blog-wrap">
218 <a href="${viewURL}">
219 <div class="blog-img">
220 <#if blog?has_content && blog?? && blog.smallImageFileEntryId?has_content && blog.smallImageFileEntryId??>
221 <#attempt>
222 <#assign fileAssetEntry=AssetEntryLocalService.getEntry("com.liferay.document.library.kernel.model.DLFileEntry",
223 blog.getSmallImageFileEntryId())
224 docURL=fileAssetEntry.getAssetRenderer().getURLDownload(themeDisplay) />
225 <#list docURL?split("?") as sValue>
226 <#if sValue?index==0><img src="${sValue}" class="custom-img-width" alt="Blog" width="832" height="465" loading="lazy"></#if>
227 </#list>
228 <#recover>
229 </#attempt>
230 </#if>
231 </div>
232 <div class="blog-content-card">
233 <div class="blog-post-date d-flex">
234 <img src="/documents/d/surekhatech/calendar" alt="calendar" width="24" height="24" loading="lazy">
235 <span class="poppins-light medium-text-size">
236 ${date}
237 </span>
238 </div>
239 <p class="blog-title sub-title-large">
240 ${title}
241 </p>
242 <p class="blog-dic">
243 ${summary}
244 </p>
245 <div class="d-flex justify-content-between">
246 <button class="text-read-more-btn">Read More <img
247 src="/documents/d/surekhatech/right-orange-arrow-1-" alt="right-arrow" width="20" height="20"></button>
248 </div>
249 </div>
250 </a>
251 </div>
252 </#if>
253 </div>
254 <div class="col-lg-6 col-12">
255 <#list entries[1..2]
256 as curEntry>
257 <#assign blog=BlogEntryLocalService.fetchBlogsEntry(curEntry.classPK) />
258 <#assign date=curEntry.getPublishDate()?date?string.long />
259 <#assign title=curEntry.getTitle(locale) />
260 <#assign summary=curEntry.getSummary() />
261 <#assign entry=curEntry />
262 <#assign assetRenderer=entry.getAssetRenderer() />
263 <#assign viewURL=assetPublisherHelper.getAssetViewURL(renderRequest,renderResponse,entry) />
264 <#if viewURL?? && viewURL?has_content>
265 <#attempt>
266 <#assign viewURL=assetRenderer.getURLViewInContext(renderRequest, renderResponse, viewURL) />
267 <#recover>
268 </#attempt>
269 </#if>
270 <a class="horizontal-blog latest-blog-wrap d-flex no-link-style" href="${viewURL}">
271 <div class="blog-content-card">
272 <div class="blog-post-date d-flex">
273 <img src="/documents/d/surekhatech/calendar" alt="calendar" width="24" height="24" loading="lazy">
274 <span class="poppins-light medium-text-size">
275 ${date}
276 </span>
277 </div>
278 <p class="blog-title sub-title-large">
279 ${title}
280 </p>
281 <p class="blog-dic">
282 ${summary}
283 </p>
284 <div class="d-flex justify-content-between flex-wrap">
285 <button class="text-read-more-btn">Read More <img
286 src="/documents/d/surekhatech/right-orange-arrow-1-" alt="right-arrow" width="20" height="20"></button>
287 </div>
288 </div>
289 <div class="blog-img flex-shrink-0">
290 <#if blog?has_content && blog?? && blog.smallImageFileEntryId?has_content && blog.smallImageFileEntryId??>
291 <#attempt>
292 <#assign fileAssetEntry=AssetEntryLocalService.getEntry("com.liferay.document.library.kernel.model.DLFileEntry",
293 blog.getSmallImageFileEntryId())
294 docURL=fileAssetEntry.getAssetRenderer().getURLDownload(themeDisplay) />
295 <#list docURL?split("?") as sValue>
296 <#if sValue?index==0><img src="${sValue}" alt="Blog" width="336" height="332" loading="lazy"></#if>
297 </#list>
298 <#recover>
299 </#attempt>
300 </#if>
301
302 </div>
303 </a>
304 </#list>
305 </div>
306 </div>
307 </div>
308 </#if>
309 <div class="mobile-wrapper latest-blogs-wrapper d-xl-none d-block">
310 <div class="latest-blog-slider">
311 <#if entries?has_content>
312 <#list entries[0..2]
313 as curEntry>
314 <#assign date=curEntry.getPublishDate()?date?string.long />
315 <#assign title=curEntry.getTitle(locale) />
316 <#assign summary=curEntry.getSummary() />
317 <#assign entry=curEntry />
318 <#assign assetRenderer=entry.getAssetRenderer() />
319 <#assign viewURL=assetPublisherHelper.getAssetViewURL(renderRequest,renderResponse,entry) />
320 <#if viewURL?has_content>
321 <#attempt>
322 <#assign viewURL=assetRenderer.getURLViewInContext(renderRequest, renderResponse, viewURL) />
323 <#recover>
324 </#attempt>
325 </#if>
326 <div>
327 <div class="horizontal-blog latest-blog-wrap d-flex">
328 <div class="blog-content-card">
329 <div class="blog-post-date d-flex">
330 <img src="/documents/d/surekhatech/calendar" alt="calendar" width="24" height="24" loading="lazy">
331 <span class="poppins-light medium-text-size">
332 ${date}
333 </span>
334 </div>
335 <p class="blog-title sub-title-large">
336 ${title}
337 </p>
338 <p class="blog-dic">
339 ${summary}
340 </p>
341 <div class="d-flex justify-content-between flex-wrap">
342 <a href="${viewURL}"> <button class="text-read-more-btn">Read More <img
343 src="/documents/d/surekhatech/right-orange-arrow-1-" alt="right-arrow" width="20" height="20" loading="lazy"></button>
344 </a>
345 </div>
346 </div>
347 </div>
348 </div>
349 </#list>
350 </#if>
351 </div>
352 <div class="row">
353 <div class="col-12 text-center pt-4">
354 <a href="/blog"><button class="common-xl-btn">View More</button></a>
355 </div>
356 </div>
357 </div>
358 </div>
359 </section>
FAQ
ReactJS is a web application framework maintained by Meta and a community of individuals and companies. It is meant to make it easy for front-end developers to create dynamic web interfaces.
We can build social media apps, ecommerce apps, entertainment apps, messaging app and many more with ReactJS.
ReactJS is an open-source, Javascript, component-based on front-end library that helps build web applications.
There is no such thing as a fixed cost for ReactJS Application Development. Factors like functionalities, features, user interfaces, development hours, the team's expertise and customization needs are all involved in determining a development budget.
2 - 4 October 2024
Hall: 10, Booth: #B8 Brussels, Belgium
© 2025 SurekhaTechnologies. All rights reserved.