Sing App React and Light Blue React Admin templates Update

Posted on by Mark Feehily0

We are happy to announce an update of one of our first React Admin Templates – Sing App React and Light Blue React!

What react admins are affected by the update?

Current 5 React Admin boilerplates are affected by updates:

Sing App React
Sing App React Node.js
Sing App React Java
Light Blue React
Light Blue React Node.js

What has changed?

Now the admin boilerplates use React 17, and Bootstrap 5. Additionally, we have updated the colors, typography, and some minor UI parts.

And also we made several minor changes that make this admin dashboard template up-to-date.

Updated Amcharts to the latest version
Updated Fullcalendar to the latest version
Updated Axios
Updated Sortable library to the latest stable version
Updated Awesome Bootstrap checkbox that it now supports Bootstrap 5

Thus now, Sing App React and Light Blue React Admin Templates are one of the most modern react admin on the market in terms of technologies used under the hood and the look of the boilerplate.

Summing Up

For the rest of our React templates, check our marketplace. If you face any difficulties setting up this or that template or admin dashboard, please feel free to leave us a message on our forum, Twitter or Facebook. We will respond to your inquiry as quickly as possible!

The post Sing App React and Light Blue React Admin templates Update appeared first on Flatlogic Blog.

Flatlogic Admin Templates banner

Is React a Framework? Software Engineer Answering

Posted on by Mark Feehily0

By definition – React is one of the most popular JavaScript UI libraries nowadays. It comes in second place after jQuery among all web frameworks! React’s popularity has grown rapidly thanks to a simple and declarative API that allows you to build high-performance applications, and that momentum keeps growing. Still, there is often discussion and questioning that React is a framework or library.

Firstly, let’s look what the differents between framework and library? 

The framework belongs to the main() function. It executes some functions, e.g. controlling a collection of windows on the screen. The framework can, in principle, work even if you have not set it up in any way. It does something, e.g. it places an empty window with default widgets. The framework defines the general nature of the program, and your code provides a specific setting. These settings can be very significant, as both a word processor and a spreadsheet can be created using the same framework.

The library is the set of tools used by your code. Your code belongs to the main() and provides the overall structure of the program. A library performs some specific task, such as sending traffic over a network, drawing charts, or something else. The library can do big things, like draw a view of a three-dimensional space full of objects, but only after you tell it about those objects.

The framework can call your code, which in turn calls the library. But your code never calls the framework, except perhaps for system() or exec() functions.

But, is React a Framework? 

We asked our Software Engineers Team for their opinion and they were split into two parts: some maintain the view that React is a library, and others assign it as a Framework. Here are the most outstanding opinions:

From my point of view, React is not a framework, it’s just a library with no specific requirements for project structure. It’s about describing the abstractions of your application, logic, routing, data exchange, and so on. And React simplifies the work with this data, and optimizes the work with it

Anton M. – Software Engineer at Flatlogic.com

From my point of view, React is not a framework, it’s just a library with no specific requirements for project structure. It’s about describing the abstractions of your application, logic, routing, data exchange, and so on. And React simplifies the work with this data, and optimizes the work with it

I know that react calls itself a “library”, and a lot of developers prefer to react to the home page with the title “library”. However, I think that React is more like a framework now, with different targets like web, react native, etc. And the foundation of React is JSX, which is crucial for proper developer experience, and requires a build step, so you can’t just slap a bunch of JSX files into a browser and call it a day. Nowadays when you say “I built this app with React” you don’t mean that you used it on one page or as a modern jquery alternative. You mean that you built everything around react, with its ecosystem, its best practices, etc. And with all those points in mind, I’d rather call react the framework, than a library

Viktor S. – Staff Engineer at Flatlogic.com

We also conducted the research among others software engineers and would like to share with you the most impressive arguments on this point. 

So, is React a Framework or a Library?

React is a Library

React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

Now Why Library, not a Framework?

different definitions for library and framework:

a framework is a software where you plug your code into
a library is a software that you plug into your code

In terms of this definition, React is a framework. But some people, especially in the frontend world, say a framework has to bring stuff like routers and/or widgets, etc. 

So Angular, and ExtJS are frameworks, but React isn’t, because it only gives you the means to build components and render them into the DOM.

Let’s make it simple, in React we have to include packages for everything it’s not necessary but yes we can add them, thus React is a Library but if we are not given an option to do so with our code then that’s a framework like Angular and Vue.

React is a library because it’s only supposed to deal with the view part of the eco-system, and you can integrate it easily in any project you’re working on currently, it’s something like jQuery, it only helps you with organizing your views into reusable components, of course, the performance is one of the best things about React, especially with the new Fiber algorithm, things will be faster seeing the scheduler mechanism, unlike Angular, it’s a framework that gives you everything you need, most of the things are already built-in, for React you need to create your own/or grab some modules from npm to add extra functionality as need per your project.

It depends on how you use it. If you’re writing a small program and you structure your program around working with React, you are probably thinking of React as a framework.

If you have a big program and you use React as a small part of it just for handling output, then you’re probably thinking of React as a library.

If your program is 90% user interface, and not only your program structure but your data structures are shaped to fit the React system, then you may even think of React as a language. Hey, if TypeScript can be a language, why not React?

React is a library, cause it has mostly evolved into a vast ecosystem that is barely distinguishable from a framework. A framework protects the edges, whereas a library provides a tool for doing certain tasks. React handles exactly one task: abstracted Web Components. It offers an internal state, lifecycles, and external properties, as well as a renderer for a browser or comparable environment through ReactDOM – and nothing more.

This has a few advantages: it is smaller than a full-featured framework, has fewer opinions on how to address problems, and so provides more options.

I’d say React is a library posing as a framework. It feels like working in a framework (esp. with JSX, though using that is optional), but under the hood, it is just a library. This definition is quite good:

a framework is software that you plug your code into (e.g. you work “inside” it).
a library is software that you plug into your code (e.g. you “hand-off” certain tasks to it, or build “on top” of it).

React feels like the first, but is the second. The attached video compares React and Angular and hints at the distinction. Since React treats your code as a black box, you can push the data-binding concerns out to the edges of your system, to be “handed off” to React (i.e. how you would use a library). Angular, on the other hand, forces you to work “inside” their “scopes” using their “directives” to handle data-binding. In Angular, you are passing your data through scopes that observe your data model. You are always at the mercy of whichever directives they are building into their framework scaffolding. You are also working “inside” HTML (JS-in-HTML), with all the constraints that impose (giving more of a framework feeling). But with React, you have less of that feeling, since you have freedom (full power of JS), and can build “on top” of React (HTML/JSX-in-JS). This is good since JS is inherently more powerful than HTML.

React is a Framework

React is a framework. Honestly caring about the difference between a library and a framework is a bit pedantic, so I’d say you can call it either. Having said that, my definitions of the two words are that a library is a collection of functions, and a framework is a way of doing things.

By this definition, React is a framework because it forces you to build UI in the React way instead of the Angular, etc. On the other hand, the dash is a perfect example of a library because it’s just a collection of functions, use them however you want.

JavaScript is known for its abundance of new plugins, frameworks, and other things created by its massive community of developers and designers.

You must be wondering what this fact has to do with the React JS framework and other frameworks. The truth is that many of the leading IT firms have already embraced JavaScript and leveraged its benefits.

That should answer the question and not cause any other debates, right? Well, not exactly; the debate over “Is React a framework or library?“ is as strong as ever.

Over the years, developers, software engineers, and developer communities came up with pros and cons related to the status of React as a library or React as a framework. Let’s analyze them together.

React as a library

React can be easily swapped by some other javascript library offering similar functionalities.
React can be easily plugged into an existing technology stack – and that’s the definition of a library.

React as a framework

Related libraries must work in an opinionated way.
Because of its state and lifecycle on the components, you inverted the control to React.

Are you asking why React was designed as a library and not a framework [1] or why it is classified as a library and not a framework [2]?

[1] Why it was built that way. A library is something you can add to an existing project to enhance it. It does not impose any restrictions or conventions on your application design and you can supplement it with other libraries of your choice to flesh out your application. There is also a shorter learning curve (usually) on a library as you can add it incrementally to your project. A framework on the other hand implies structure and convention, you need to follow the conventions of the framework. In many cases a framework limits you to working within these conventions – you cannot (or it is difficult) to mix a framework with other code.

There are use cases for each.

[2] Why it is not classified as a framework. Based on the definition of a framework it does not fit the bill – it is a library that is added to your code – it does not impose structure – beyond the use of the library itself and it can be mixed in with other code.

React does not solve any structural or architectural problems on the app level. It provides us with a set of methods for better (in my opinion) handling of the front-end. I remember when jQuery did that back in the day, and how that started the revolution… React is now doing the same, just better.

Because React is a library eventually we got Flux and Redux. Both of them are handling real-world problems that come alongside Scaling. Mare library does not think about that.

React is a framework because Redux is referencing it as one (Source). Ah, as I started to hope that something in life is going to be easy. With React and Redux there is a clear layer of separation between the view and data. That is why React is not a complete framework to solve the entire problem.

Conclusion

Soft engineers spend a lot of time talking about what React is. The answer is important for any React soft engineer, no matter their skill level. That is because it indicates what they should know and how they should work when developing any React application. Depending on who you are, a beginner or an advanced React soft engineer, I hope this thoughtful research will improve your development process as you build your next React project.

The post Is React a Framework? Software Engineer Answering appeared first on Flatlogic Blog.

Flatlogic Admin Templates banner

React Labs: What We’ve Been Working On – June 2022

Posted on by Mark Feehily0

React 18 was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.

We typically have a number of projects being worked on at any time, ranging from the more experimental to the clearly defined. Looking ahead, we’d like to start regularly sharing more about what we’ve been working on with the community across these projects.

To set expectations, this is not a roadmap with clear timelines. Many of these projects are under active research and are difficult to put concrete ship dates on. They may possibly never even ship in their current iteration depending on what we learn. Instead, we want to share with you the problem spaces we’re actively thinking about, and what we’ve learned so far.

Server Components

We announced an experimental demo of React Server Components (RSC) in December 2020. Since then we’ve been finishing up its dependencies in React 18, and working on changes inspired by experimental feedback.

In particular, we’re abandoning the idea of having forked I/O libraries (eg react-fetch), and instead adopting an async/await model for better compatibility. This doesn’t technically block RSC’s release because you can also use routers for data fetching. Another change is that we’re also moving away from the file extension approach in favor of annotating boundaries.

We’re working together with Vercel and Shopify to unify bundler support for shared semantics in both Webpack and Vite. Before launch, we want to make sure that the semantics of RSCs are the same across the whole React ecosystem. This is the major blocker for reaching stable.

Asset Loading

Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, server components, and more.
We’re looking at adding APIs to preload and load deduplicated external assets through React APIs that work in all React environments.

We’re also looking at having these support Suspense so you can have images, CSS, and fonts that block display until they’re loaded but don’t block streaming and concurrent rendering. This can help avoid “popcorning“ as the visuals pop and layout shifts.

Static Server Rendering Optimizations

Static Site Generation (SSG) and Incremental Static Regeneration (ISR) are great ways to get performance for cacheable pages, but we think we can add features to improve performance of dynamic Server Side Rendering (SSR) – especially when most but not all of the content is cacheable. We’re exploring ways to optimize server rendering utilizing compilation and static passes.

React Optimizing Compiler

We gave an early preview of React Forget at React Conf 2021. It’s a compiler that automatically generates the equivalent of useMemo and useCallback calls to minimize the cost of re-rendering, while retaining React’s programming model.

Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of local mutations, and opens up many new compile-time optimization opportunities beyond just being on par with memoization hooks.

We’re also working on a playground for exploring many aspects of the compiler. While the goal of the playground is to make development of the compiler easier, we think that it will make it easier to try it out and build intuition for what the compiler does. It reveals various insights into how it works under the hood, and live renders the compiler’s outputs as you type. This will be shipped together with the compiler when it’s released.

Offscreen

Today, if you want to hide and show a component, you have two options. One is to add or remove it from the tree completely. The problem with this approach is that the state of your UI is lost each time you unmount, including state stored in the DOM, like scroll position.

The other option is to keep the component mounted and toggle the appearance visually using CSS. This preserves the state of your UI, but it comes at a performance cost, because React must keep rendering the hidden component and all of its children whenever it receives new updates.

Offscreen introduces a third option: hide the UI visually, but deprioritize its content. The idea is similar in spirit to the content-visibility CSS property: when content is hidden, it doesn’t need to stay in sync with the rest of the UI. React can defer the rendering work until the rest of the app is idle, or until the content becomes visible again.

Offscreen is a low level capability that unlocks high level features. Similar to React’s other concurrent features like startTransition, in most cases you won’t interact with the Offscreen API directly, but instead via an opinionated framework to implement patterns like:

Instant transitions. Some routing frameworks already prefetch data to speed up subsequent navigations, like when hovering over a link. With Offscreen, they’ll also be able to prerender the next screen in the background.

Reusable state. Similarly, when navigating between routes or tabs, you can use Offscreen to preserve the state of the previous screen so you can switch back and pick up where you left off.

Virtualized list rendering. When displaying large lists of items, virtualized list frameworks will prerender more rows than are currently visible. You can use Offscreen to prerender the hidden rows at a lower priority than the visible items in the list.

Backgrounded content. We’re also exploring a related feature for deprioritizing content in the background without hiding it, like when displaying a modal overlay.

Transition Tracing

Currently, React has two profiling tools. The original Profiler shows an overview of all the commits in a profiling session. For each commit, it also shows all components that rendered and the amount of time it took for them to render. We also have a beta version of a Timeline Profiler introduced in React 18 that shows when components schedule updates and when React works on these updates. Both of these profilers help developers identify performance problems in their code.

We’ve realized that developers don’t find knowing about individual slow commits or components out of context that useful. It’s more useful to know about what actually causes the slow commits. And that developers want to be able to track specific interactions (eg a button click, an initial load, or a page navigation) to watch for performance regressions and to understand why an interaction was slow and how to fix it.

We previously tried to solve this issue by creating an Interaction Tracing API, but it had some fundamental design flaws that reduced the accuracy of tracking why an interaction was slow and sometimes resulted in interactions never ending. We ended up removing this API because of these issues.

We are working on a new version for the Interaction Tracing API (tentatively called Transition Tracing because it is initiated via startTransition) that solves these problems.

New React Docs

Last year, we announced the beta version of the new React documentation website. The new learning materials teach Hooks first and has new diagrams, illustrations, as well as many interactive examples and challenges. We took a break from that work to focus on the React 18 release, but now that React 18 is out, we’re actively working to finish and ship the new documentation.

We are currently writing a detailed section about effects, as we’ve heard that is one of the more challenging topics for both new and experienced React users. Synchronizing with Effects is the first published page in the series, and there are more to come in the following weeks. When we first started writing a detailed section about effects, we’ve realized that many common effect patterns can be simplified by adding a new primitive to React. We’ve shared some initial thoughts on that in the useEvent RFC. It is currently in early research, and we are still iterating on the idea. We appreciate the community’s comments on the RFC so far, as well as the feedback and contributions to the ongoing documentation rewrite. We’d specifically like to thank Harish Kumar for submitting and reviewing many improvements to the new website implementation.

Thanks to Sophie Alpert for reviewing this blog post!

Flatlogic Admin Templates banner

Next.js vs React: Which One to Choose for Your App?

Posted on by Mark Feehily0

The burning question today is What’s better: React or Next.js? Let’s have a look closely at both, compare them and see the difference between library and framework. In the React world, Next.js is one of the most popular frameworks for “hitting the ground running.”

What is Next.js?

Next.js is an open-source JavaScript framework for developing fast, lightweight, and easy-to-use web applications and static websites (one-pages) using React. Next.js was created by Vercel in 2016. Next.js requires Node.js and can be initialized using npm. There are a lot of reasons why Next.js has such a strong reputation in the world of application development. They are known for being reliable as they offer image optimization, internationalization, zero-config, Next.js analytics, hybrid: SSR and SGG, fast refresh, API routes, TypeScript support, file-system routing, code-splitting and bundling, incremental static regeneration, and built-in CSS support, etc.

Next.js includes all the features needed to build an application. Moreover, the documentation is excellent and it is becoming very popular among developers for frontend development.Here are the most popular platforms and apps of Next.js: Twitch.tv, TikTok, Hulu, Binance, and many others that involve a massive number of users engaging with complex data influxes.

What is React?

React is an efficient, declarative and flexible JavaScript library for building interactive UI, inspired by xHP, the HTML component library for PHP. React was created by Facebook in 2011 and then open-sourced in 2013.React is used to create dynamic, mobile apps, one-pages, visualization tools, and dashboards. Here are some of the most popular platforms and apps created with React: Facebook, Netflix, Atlassian, Airbnb, Dropbox, Reddit, etc.

Next.js vs React

Even in a sea of JavaScript frameworks and libraries, React and NextJS stand out. React is the most popular JavaScript library for frontend developers. NextJS, although smaller than React, has grown continuously over the years and is well on its way to becoming the most-used JavaScript framework. So, let’s compare React and Next.js. React – is a JavaScript library for building UI. Next.js – is the React framework. NextJS is used on top of React, extending its features and optimizing the development process: React doesn’t even have to work with NextJS, but NextJS uses React to deploy applications.

React has a special framework – Create React App, an application used to create React projects and includes tools such as Babel, Webpack, and ESlint. Next.js is a React-based framework that allows you to build applications with server-side rendering. React is still the core of the application, but the structure and navigation mechanisms (architecture) – are defined by Next.js. The difference between a framework and a library is that a framework has more features and focuses on several aspects of development, and gives you rules and guidelines for writing code and structuring files.

Next.js
React & Create React App (CPA)

Server-Side Rendering (SSR)
Supports different types of SSR.
– Static generation: obtaining data at build time. Best suited for use cases such as blogs or static websites.
– Server-side rendering: sampling data and rendering for each request. May be needed when you need to serve different views to different users.
Doesn’t support SSR out of the box. 
However, you can still set it up. 
It just takes more effort to configure SSR with your preferred server and configuration.

Configuration
Almost everything is configurable. 
If you check the example NextJs templates, you can see files like 
babelrc, jest.config, eslintrc etc. that you can configure.
Doesn’t leave you much space to configure it. 
Configurations, such as webpack config, cannot be changed unless you do not deviate from the usual CRA path (eject, rescripts, rewired, craco). 
You should use what is configured in 
react-scripts, which is the core of CRA.

Maintainability
Well maintained. Release regular updates.
Very sensitive. 
If you keep up with updates of CRA releases, it is not difficult to maintain.

TypeScript

Supports typescript out of the box. 
Configurations for TypeScript:
touch tsconfig.json

Supports. You can initialize the CRA app with typescript like this:
npx create-react-app my-app —template typescript

Hooks Support
Supports
Supports

Redux Support
Supports
Supports

Performance
Incredibly fast apps thanks to static sites and server-side rendering.
Decent, but the lack of code splitting results in poor performance.

Community
Tiny, but friendly
Both huge and friendly

Features
Support static exports, and pre-rendering, and has a lot of features, for example, automatic building size optimization, fast development compilation and preview mode.
Easily extensible, can include routing as well as management patterns with libraries.

Talent pool
Narrow
Broad

Easy to learn
Easy
Easy

Development costs
Low
Low

Which one is better?

It’s hard to say that one is better than the other. Remember, React.js is a JS library – a set of tools you can use to build UI – and Next.js is a framework – the blueprints and rules you need to build an entire app – based on React so it’s not a pick this one instead of the other situation.

Use React when:

You need a highly dynamic routing
You’re already familiar with JSX
You need offline support

Use Next.js when:

You need an all-inclusive framework
You require backend API endpoints
You need server-side rendering

What do React vs Next.js projects look like

React

You can get started with React by installing Node.js on your machine and running npx create-react-app react-app. This will create a basic project structure with the src/App.js file as the entry point for the application. You’ll also have a public folder where you can store assets, and the initial scaffold looks like this:

Next.js

With Next.js, you can get started by running npx create-next-app next-app. This will scaffold out a project that already has a pages folder for the pages or routes and a public directory that hosts your assets. The initial scaffold looks like this:

The files in the pages directory relate to routes in your application. The public directory stores your static files or images that you want to serve and can be directly accessed – no need to use require or other React traditional methods to import images into components.

Building Next.js and React projects with Flatlogic

The Flatlogic platform is a great way to bridge the gap between developing your applications. Applications usually use the same elements and components, when using the same technologies. The main thing that distinguishes them on a technical level is the database schema, which implements different data processing and storage mechanisms. The Flatlogic Platform allows you to create applications by combining parts and creating only those that need to be unique. Here you can see how to use the Flatlogic Platform to create Next.js, React applications, and other options for creating CRUD applications on the React. To generate your Next.js or React application, tap here and let’s go.

Step 1

Name your project and choose the tech stack: React as frontend and No-backend as backend.

Step 2

Choose the Starter Kit. Here you need to decide which starter kit is best for your project: Next.js or Create React App.

Next, you need to connect your GitHub repository and check the stack and starter kit and Finish the creation process.

Then you will be redirected to the project settings where you will need to deploy your application.

Conclusion

React and Next.js are new and useful tools for your project, but only for certain tasks. When you choose Next.js, it offers the best solutions for server-side rendering and static website development. It also makes it easy to manage projects with a variety of tools and features.

On the other hand, React is the best choice for developing UIs for one-page applications. Being mobile and web-enabled, it works with a layer of mobile and web applications to create more appealing and intuitive ones. In a nutshell, Next.js offers various tools and features to minimize the development process while React has better resources for the frontend development of your mobile and web applications.

Suggested Articles

What is Next.js? Top 7+ Next.js Templates
Angular vs React: Which One to Choose for Your Web App
Best Ways to Deploy React Apps

The post Next.js vs React: Which One to Choose for Your App? appeared first on Flatlogic Blog.

Flatlogic Admin Templates banner

React Material Admin Full Update

Posted on by Mark Feehily0

As Material UI and React continue to grow and develop it has become clear that React Material Admin can’t live with the outdated versions of those libraries.

What products are affected by the update?

Currently, the updates were released on 2 products:

React Material Admin Full
React Material UI Admin Node.js

What has changed?

The main change is that now those templates are now using React 17 and Material UI 5, previously it was 16 and 4 versions accordingly.

And also we made several minor changes that make this admin dashboard template up-to-date.

Fullcalendar was updated to the 5.11 version
Added Datefns as datepicker library
Updated Apexcharts to version 3.35
Updated Formik library to the latest stable version
Mui-datatables library was updated to version 4
We have added Redux for management CRUD functions and authorization

As a result, the speed and usability of the React Material Admin template increased. Additionally, you don’t need to spend your time updating all those technologies by yourself, so you can focus on developing business features.

Moving forward and Summing Up

The ecosystem of our templates will be constantly updating. Next in line are Vue Material Admin and Angular Material Admin. Additionally, we are working on integrating some of the existing UI components from React Material Admin to the Flatlogic Platform generated react app.

For the rest of our React templates, check our marketplace. If you face any difficulties setting up this or that template or admin dashboard, please feel free to leave us a message on our forum, Twitter or Facebook. We will respond to your inquiry as quickly as possible!

Happy developing!

The post React Material Admin Full Update appeared first on Flatlogic Blog.

Flatlogic Admin Templates banner

React vs Vue: What to Choose in 2022?

Posted on by Mark Feehily0

React and Vue are the two most popular and widely used JavaScript frontend frameworks today. These frameworks allow developers to create a wide variety of web applications with JavaScript. Choosing between the two can be confusing if you are building a new application. Each has its own use case and serves different business needs. 

Most web developers prefer to use Vue.js and React frameworks. Using React or Vue.js provides a quality approach to web development that is consistent and performant. Both Vue and React have their own best scripts and meet different kinds of business needs.

In this article, we will learn about each and explore which is best suited for your business.

What is React?

React.js combines a high degree of concentration with simplicity when it comes to user experience. It was developed by Facebook as an open-source JavaScript library to help developers build user interfaces. React follows a declarative programming style and a component-based approach. It allows for the creation of complex web applications with the highest flexibility and speed. 

React.js is the most used web framework in 2021 with 40.14% of the software developers globally using React. 

React holds the top spot for the fourth year. Popular companies that are currently using React.js are AirBnB, Netflix, Instagram, and Udemy.

Source: https://2021.stateofjs.com/en-US/libraries/front-end-frameworks

What is Vue.js?

Vue.js is a progressive JavaScript framework that developers use to build interfaces. Unlike the Angular framework, Vue is incrementally adaptable by design. It scales easily between a library and a fully-featured framework. Companies using Vue.js include GitLab, Behance, Upwork, and Grammarly.

Here are a few Vue.js statistics: 

Vue.js is used by 0.8% of all the websites amongst JavaScript libraries.
Vue.js is used by 1.2% of all the websites amongst the JavaScript library we know and that rank in the top 1,000,000.
In 2021, 42% of the developers admitted that they used Vue in their company. 55% of the developers are of the view that Vue will get more popular in their organization. 

What are the Similarities between React and Vue?

Before looking at the differences between the two, let us look at some similarities. Both React and Vue possess component-based architecture. Also, both the frameworks are lightweight and have an exposure to lifecycle methods. Their performance is fairly similar. Both technologies work with any existing web application, even if it’s not a Single Page Application.

Below are some similarities:

They have composable and reactive view components
They use virtual DOM
JavaScript Code and PWA support
They concentrate on a core library. They also involve handling of routing and global state management with companion libraries
Possibility of working with any existing web applications
Both React and Vue have large proactive communities and plenty of libraries and tools available.

Comparison between React and Vue

You can pick one after knowing how they differ. The most obvious distinction: React is a library, whereas Vue is a framework.

Let us compare them taking into account some essential parameters. 

Data Binding 

Vue uses two-way data binding. It means whenever you change any interface element, your model state automatically changes with it. It may look simple to read about it. However, for a large project, it is not. If you want a good data overview and want easy debugging, you may prefer React as it has one-way data binding. After the model state is updated, React then renders the change in the interface element.

Desktop and Mobile Development 

React Native is the perfect platform for you if you want to build mobile apps that work on Android or iOS. Developers can use their existing skills to get started. The biggest advantage of using React is that you can reuse 99% of code between Android and iOS.

On the other hand, Vue does not have a dedicated platform like React Native. However, it does not mean you cannot develop native applications. Vue developers can use a cross-platform UI framework or plugins and write Vue applications and compile them into native apps – iOS and Android.

Major Differentiator – Syntax

One of the major differences between them is the way the view layer is built. Vue uses HTML templates by default, and there is no option to write in JavaScript Expressions (JSX). On the other hand, React solely uses JSX. Vue is easier to use even for beginner frontend developers as it uses only HTML. React’s JavaScript Expressions combine CSS and HTML into JavaScript. The XML-like syntax allows developers to create self-contained UI components with view-rendering instructions included.

Tooling

React provides third-party tools to help developers create React apps, and it allows them to speed up app development by adding scripts. Earlier, React developers had to copy the files from previous apps and configure everything from zero. It was not only time-consuming but a boring task that no developer liked doing. 

Vue, on the other hand, uses a tool called Vue CLI. It enables the user to create any project quickly. It comes with many benefits like easy improvements, adding plugins anytime during the project, etc.

Popularity

It is not easy to pick a winner on popularity, but if you check online communities, React wins this battle. It is mainly because it is backed by Facebook. The Vue community is smaller compared to React with fewer packages and resources. However, it is maintained by the creator himself – Evan You and his team.

Template and Styling

The UI library is incomplete without templates and styles. Additionally, they’re the places where the difference between React and Vue is most apparent, since the code design is different. The approaches both Vue and React take are also quite different.

While Vue has a more declarative approach, React is more functional. Since the logic and markup are both considered as one, they are mixed. It is accomplished with JSX, which is an abstraction of React.createElement, which is used to create Virtual DOM entities. 

Templates and styles are treated separately with Vue – a more conservative approach. Here, the templates are viewed as old-fashioned HTML elements.

Performance

If you want to make the decision of choosing anyone between Vue and React based on performance, you will not be able to since both frameworks have remarkable speed. However, as mentioned at the start, you can check for specific use cases to decide which is a better option for you.

Learn more about Vue.js Best Use Cases 

Vue has to be integrated into an existing project incrementally. This means there is a per project requirement since it is a progressive framework. For example, you can use Vue.js as a lightweight library to add some interactivity to a web app. Ease of integration is one of Vue’s top assets. 

You can hire Vue js developer to easily implement Vue.js into a project – it is a lot faster. The learning curve is easy, and tools like Vue UI and CLI make it a great tool to use for quick MVP delivery and start-up ideas. It is a cost-effective solution for all small to medium applications. However, it does not mean it is not good for large web apps. It has a vast ecosystem of tools and companion libraries, allowing the framework to respond to the complex needs of enterprise-grade applications.

Learn more about React.js Best Use Cases 

React was initially created for large-scale web projects, and hence using it for a small and simple app would not justify its usage. Setting up a project using React.js is not easy, and you need some level of expertise to do it, but its architecture ultimately pays off in the long run.

JSX is powerful, and it gives developers a range of powers – flow controls and advanced IDE features such as auto-completion or listing are included in the component view templates. React does not have official packages for routing or state management like Vue. If you are developing complex apps, you have to use third-party solutions in many places. It gives a range of choices to developers. If you have experienced developers, they will know better which libraries are optimum and can be used to meet the business demands of a particular web application.

Choose a framework/library according to your needs

React is a library, and hence the users gain more control, such as the manual re-rendering control. The library heavily utilizes functional programming principles, which is evident in how it handles state and communicates between components. On the contrary, Vue is a framework that brings to the table many more built-in features and companion libraries which come from the core team. Hence, this helps in making the development experience smoother for the user.

Both Vue and React are great tools for building interactive user interfaces. You cannot pick one randomly, you will need to take into account many factors like your business needs, developers’ experience, budget, timeframe to deliver the project, and much more. Performance-wise both are at par, and you won’t be disappointed in this aspect whether you choose React or Vue.

Suggested Articles

Vue vs React: What is Easier? What is Trending? [Detailed Guide with +/-]
What is Vue?
12 Best React Admin Templates Under $100

The post React vs Vue: What to Choose in 2022? appeared first on Flatlogic Blog.

Flatlogic Admin Templates banner

6 React Project Ideas to Help You Learn by Doing (Updated 2022)

Posted on by Mark Feehily0

Why do you need these React project ideas?

A list of React project ideas

Personal Productivity App

YouTube Comments Analyst

Weather App

Messenger Aggregator

Personal Expense Tracker

Recommendation App

Conclusion
Bonus
Creating a React App the quick way with Flatlogic

Everyone faced the dilemma of what app you should develop next to make progress in learning React. The project must be complex enough to make you think and google, but not too hard so you don’t feel overwhelming. And you are looking for a great article where you can find a brilliant React project ideas for your next project that just fits your skills.

Well… If it looks familiar, then that article can’t help you=)

This article doesn’t offer you to learn new skills, practice design, research new ways to provide great user experience, or something else… It’s about the challenge!

Why do you need these React project ideas?

The ideas in the article are supposed to push you beyond your limits, to force you to think furiously, to blow your mind with problems you are going to face. And much more…

That top is not about simple components and apps like quizzes, books apps, or note-taking up. Moreover, it isn’t necessary to take that challenge if you have just finished tutorials and started working on your first React project idea. It’s expected that you have already known the basic foundation of React Native development and have taken part in the development of some complex apps.

But don’t hurry to close the article if you are a new guy in programming! The ideas you find here are entertaining and interesting, and maybe someday when you get a lot of experience and acquire new skills you will ask yourself a question “What else can I develop?”. Then you will remember that you read that article with some fascinating ideas, then one of the ideas will come to your mind and bingo! You will understand what your next app will be about!     

Enjoy reading!

A list of React project ideas

Personal Productivity App

Image source: https://habitica.com/static/features

Everyone desires to be productive, achieve his dreams, be an iron-man / attractive girl, be disciplined, give up bad habits, and just be listed in Forbes top richest people. Let’s help them.

We don’t offer to invent a new productivity method since there is a bunch of them that already exist (for example, check this article). Also, we don’t expect you to create a holistic motivational system, like gamification in Habitica.  Our task is to make a calendar-based productivity app with reports, reminders, dashboard for tasks and habits. Let’s clarify all these basic components.

Calendar-based app implies that the users are supposed to plan their days, so the app should give them that opportunity with a calendar where they can set the time and day where they are going to accomplish tasks or devote time to acquire a new habit. The app has to remind users about upcoming events and what they have planned for today. You also should include instruments like to-do lists or dashboards in the app with different statuses of tasks like “to do today, tomorrow, this week, someday”. Next thing in the to-do list (your to-do list, not in the app) is to make reports about tasks accomplishment with different periods (a day, week, month), so your users become aware of their progress. After developing all these features the most interesting part of the app goes, check the list below.  

Ways to comprehend:

Add website and app blocker. This helps potential users not to be distracted by social media or notifications from other apps.
Make the phone goes into the silent mode when a user works with the app and gives users an ability to set the time or set conditions when the mode should automatically be enabled.

YouTube Comments Analyst

Image source: https://developers.google.com/youtube/v3

If you have a lot of followers on YouTube, you know how hard it is to understand what the mood of those one hundred thousand comments is. Are people happy watching your videos or they are bored?  Do you make an impact on people with your work and creativity? What followers wanted to see?

You can develop an app that analyses the comments for you and answers all your questions. The app is based on a dictionary of words with some values assigned to them. You can set different types of values, but let’s start with just two: positive value for words like “Awesome” and “Great” and negative value for words like “Bad”, “Useless”, “Boring”.  Then the app collects the comments (use YouTube data API) and calculates the total score.

Once it’s done, think about UI for the app. We need a field to input link to YouTube video, a pie chart to display total like and dislike amount, a histogram to plot the results for different sentiment groups of comments. 

 Ways to comprehend:

Add the history of videos you have checked and monitor the changes in sentiment over time.
Also, you can go further and try to calculate the impact on people via comments, but it’s harder since you need to add values not only to words but to word combinations too. (as an example, “that video inspired me to chase my dream!”)
Dive deep into the analysis and add the option to examine certain groups of comments. Why negative comments are negative? Do they have something in common? What are the most liked comments about? Are they good jokes or greeting to the author that other people share?

Weather App

Image source: https://openweathermap.org/city/3117735

A great React project idea is to make an app that displays a weekly weather forecast. The core requirement for the app is usable and clear user interface: users must get desired information (the weather forecast) just when they open the app. Users are more interested in two questions: what should I wear today and should I take an umbrella? So, it’s good to start just with temperature and precipitation. Drop the information about wind speed, cloud cover, the time of sunset and sunrise (of course with cool animation that definitely will take a few hours of development), etc. Let’s say you get it and now you need to show the weather for today. How?

The basic element to display weather forecast here is a day weather card. All cards with daily forecasts must be structured and well organized, so prepare to unleash your potential as an expert designer or just ask your friend to prepare a mock-up for you.

The second necessary feature is accuracy, so make sure that you pick a well-known and checked online service to forecast the weather. We advise to use the most popular websites like https://weather.com/, and more trusted API sources (like this).

You can guess that it’s time to add information about pressure, cloudiness, wind speed, etc. Well, we don’t think so. 

When the previous two steps are completed, think about UX and what features users may need. It’s good to start with adding the ability for users to change the period for days display: today, current week, 7 days, 10 days, 15 days, 30 days. Then make a report of hourly temperature changes and the chance of precipitation. Also, add the function of precise positioning and the ability to select several regions/cities to monitor. When everything is done and tested you get an informative app about the weather forecast for various periods in different regions. Maybe now it’s time to show additional information for the daily weather we mentioned above? Well, no, you still have a work to do, look through the list below.

Ways to comprehend:

Use graphic libraries to display daily changes in the weather or add a graphic representation of week temperatures.
Add a dynamic built-in map that displays precipitation over the time until now.

Running in background with push notifications about the rain, snow, high/low temperatures, or fog will be a great improvement for the app.
How about the idea to make the app function on smartwatches? (and then you should feel free to publish the app on the Google Play and App store)
All right, fine, you can display pressure, wind speed, and whatever you want.

Messenger Aggregator

Image source: https://pixabay.com/

It can be hard to manage all chats and messaging services, like Skype, sack, What’s up, Viber, telegram, Google hangouts, etc. Try to build a universal messenger that combines them all. The must-be functionality: support of as many messengers and chats as you are able to set, the UI that allows users to switch between them quickly, support of push notifications for mobile and desktop, multilingual, ensuring the privacy of personal messages. As we have mentioned, there are a lot of variant messaging services. First, provide support for 5 messengers in most demand in your region and meet all requirements above. After that look through the list below.    

Ways to comprehend:

Add the ability to manage multiple accounts in any messenger. This function can be very helpful for businesses and very challenging for you: how many messengers can you set up with multiple accounts?
Expand the functionality with synchronization of services across all devices you log in on so you don’t need to add it manually every time on a new device.
Allow your app to set rules for prioritization of the notifications by putting them on the top.
Just add MORE messaging services and chats!       

Personal Expense Tracker and Analyst (Using Big Data)

Image souce: https://www.mint.com/how-mint-works

Forget the second part about big data for a while and concentrate on building the basis of the expense app. The app should allow users to track their expenses and to analyze it. So, the core functionality here is adding the records of the cash flow. Expenses and income must be divided by categories and users should be able to create custom ones. To analyze cash flow the app creates charts for different periods with the ability to display expenses and income by categories. 

After that, the most fascinating part of the challenge goes: try to provide insight into users’ spending habits using all records from the previous periods (it takes time to create them first) with the help of artificial intelligence and big data. Teach it how to make predictions about future expenses based on previous periods, reveal budget lines that take extra money from users, accumulate as much information as possible, and create tips for reports, so even users with no financial background can understand where they spend their money.

Ways to comprehend:

Set up an integration with bank accounts and credit/debits cards.

Add some planning with budgeting. And more reports as a result. It’s not enough just to track your expenses, it’s necessary to learn how to control them.   

Comparison is a good tool to show alternative ways of spending money (for example you spend as much money on the bun as the cost of monthly gym membership).

Recommendation App

Image source: https://thespoke.co/

The concept is to provide users with movie recommendations based on their preferences. The fundamental features are rating, cards with pictures, a large database, nice-looking design, maybe swipe option. You don’t need to build a media player for various video formats. Your focus must be on the development of a clear user interface design and engaging interactions. The app should capture users’ attention and motivate them to provide necessary information about their interests so the recommendations would be accurate.    

Every way to comprehend implies a new branch of recommendations for different aspects of our lives. Implementing them all means that you have developed a universal recommendation app. Every branch requires the expansion of date base and new functionality. The list of branches you can find below:

Ways to comprehend:

Add dish recommendations.
Let users discover new books.
Expand the database with musical artists and help users to find a new sound.
Integrate the app with training services with online courses.

Challenge yourself and bring to life React project ideas

Knowledge is of no value unless you put it into practice.

So you’ve spent dozens of hours learning a new technology, in this case React. However, only practice will provide an opportunity not only to consolidate knowledge, and also it can add impressive projects to your portfolio. Any employer wants to see some projects done, despite the fact that you may not have any work experience yet.

In this case, it is important to decide on the technology stack. There is simply no time and effort to study two or three alternatives at once.

Therefore, we decided to help determine the choice of specialization as a bonus. You can often find information about the advantages of a particular framework or library. We will write about possible unpleasant surprises that may await when implementing the aforementioned React project ideas.

Together we are strong, but separately we will perish. This aphorism best describes the ambiguous situation with this library. On the one hand, React has huge community, tens of thousands of specialists from different countries.  Open source and the ability to create new modules, in addition to its advantages, has disadvantages in the form of incomplete guidance, lack of support and inability to find solutions. Even the official React site still provides examples of class components, although the community and the library itself have chosen the functional components and hooks course.

Looking at Stack Overflow, which has over 255 thousands React questions, some thoughts also pop up. On the one hand, you don’t have to worry about the lack of an answer to your question, and on the other hand, you can doubt the quality of the library. After all, if something works well, then should there be any questions?

React is an opinionless library; this means that she has no opinion on how to solve problems that touch on all aspects. So it is up to you and your team to come up with an opinion on what to do with a particular react project idea, and especially what other libraries you want to use. Of course, you will be using third party libraries because you don’t want to reinvent the wheel. And there are many different options in React.

There are many similar react project ideas, but you won’t fund two projects with the same dependencies, project structure, and guidelines. This means that knowledge cannot be transferred from project to project, as it can in the case of Angular or Vue.

Thanks for reading.

Bonus!

We’ve listed 6 easy variants to learn React by doing. Now we’ll offer you two more React project ideas. One is the most beginner-friendly option, and the other a more challenging option. Also, we’ll offer an easier path you’ll want to follow if you’re done with challenges for the day;)

Calculator App

For those who are just starting out with React and don’t have too much time to learn the deep intricacies. A calculator app is about as basic as it gets. The functionality and the interface are easy to adjust, and the app’s operation is easy enough to check. Does it calculate properly? Voila! You’ve done a great job.

The Value of this Challenge

This won’t challenge experienced developers. But those with no expertise but a strong desire to learn by doing would benefit from starting small. A minimal challenge provides an intermediate checkpoint where you can evaluate your progress and get that small bit of gratification that will help motivate you to achieve more.

e-Commerce App

Apps for eCommerce are an infinitely scalable challenge. Based on your experience and spare time, you can make a very basic or a more complex solution. This will require some back-end and database-building skills apart from React mastery. A simple React eCommerce App may only have a primitive database with two or three parameters of each entry and a simple input procedure. As your experience grows, you can introduce more data relationships and inner mechanisms. Each layer of parameters, features, and pages brings out new opportunities for creating yet more features based on those that are already there.

The value of this challenge

eCommerce Apps rarely display unique functionality. The real challenge here is navigating the architecture of a complex, multi-storied App and creating an end product that’s easy enough to navigate for the users. Additionally, eCommerce Apps are a frequent use case for React, and you’d be amiss to skip it in your front-end practice.

Creating a React App the quick way with Flatlogic

As promised, a quicker and easier way to create a React App. This way has many uses but fits eCommerce especially well. The Flatlogic Platform lets you combine parts and elements to create an App of your own. Next up are the steps necessary to do it.

#1: Name the project

Name your project. This way the project will be easier to address and find in case you start another one.

#2: Choose stack

An App’s stack consists of technologies its front-end, back-end, and database run on. In this example, we’ll pick React but any combination will work.

#3: Choose the design

The Platform offers several (we keep adding new options or merging existing ones, so the number might change) design schemes. Take a look at each one and decide which one feels the most natural to you.

#4: Choose the schema

Define the parameters of your database. Fields, columns, types of data, and the way the App processes entries – all of that must be defined. Or you could save some time and stick with one of the presets. They’re tailored to popular demands and at least one of them will likely fit.

#5: Review and generate

Check your choices, see if everything is fine. Choose “Connect GIT Repository” if you want to. Hit “Finish”.

Flatlogic Platform will compile for a couple of minutes and introduce you to your App. Deploy it, host it locally, or push it to GitHub, and make good use of it! Happy developing!

You might also like these articles:

Top 5 Free Awesome React.js Material-UI Admin Dashboard Templates

13 Bootstrap Date Pickers Examples
Top 19+ Remarkable JavaScript Data Table Libraries and Plugins

The post 6 React Project Ideas to Help You Learn by Doing (Updated 2022) appeared first on Flatlogic Blog.

Flatlogic Admin Templates banner

What is Material UI

Posted on by Mark Feehily0

Introduction

Material-UI (MUI) is a CSS framework that provides React components out-of-the-box and follows Google’s Material Design launched in 2014. MUI makes it possible to use different components to create a UI for a company’s web and mobile apps. Google uses Material Design to guarantee that no matter how users interact with the products they use, they will have a consistent experience. Material Design includes guidelines for typography, grid, space, scale, color, images, etc. And it also allows designers to build deliberate designs with hierarchy, meaning, and a focus on results.

The MUI library for React has over 76k stars on GitHub and is one of the most improved UI libraries. You can build an incredibly stylish application in a short amount of time with pre-styled components, as well as tune and expand these components according to your needs. It is based on Leaner Style Sheets (LESS), a CSS development extension.

You can also install the MUI into your application using yarn:

yarn add @material-ui/core

or npm:

npm i @material-ui/core

Why use Material UI?

Here are the reasons why developers prefer to integrate MUI into their applications:

Pre-designed UI components. MUI supplies multiple pre-designed components from which you easily approach and attach to your application, enabling an attractive, easy-to-use, and visually engaging design and rapid implementation. 

Material Design. Material Design is a well-thought-out design system that describes the value and use cases of components. With Material Design, for example, you can use the Material Icons, meaning choosing icons that match your design system.

Adjustable theme. MUI provides simple installation and adjustment themes to use and globally implement for all components available to you, making it a highly functional and dynamic experience. By doing so, the theme color of the component, information about the palette, and surface properties, and some other styles can be customized, meaning that all your components can be consistent.

Well-structured documentation. MUI has clearly understandable and well-structured documentation, which includes guides with code examples to practice with.

Widespread support. MUI has great support for fixing bugs and issues, due to its constantly updatable library. In small releases, for all issues found, the team provides fixes. And as a user, you can participate in influencing what additions to the library will be added in the future. The team sends a feedback survey to all library developers every year in order to fix any issues and make the Material UI more usable, also you can tweet them feedback on the official account: @MaterialUI.

Community. Here you can find basic links with support and examples of using the MUI.

Who uses Material UI and its integrations?

Node.js, React, Next.js, Emotion, and etc, represent some of the most popular tools that are integrated with Material-UI. About 214 companies use Material UI in their technology stacks, here are some of them:

UNIQLO
Medium
Scale
Frontend
Google
SkyQuest Tech Stack

How to create your Material UI React application using the Flatlogic Platform

There are two ways to build your application on the Flatlogic Platform: 

Create a simple and clear frontend application, generated by the CLI framework, 

or

Build a CRUD application with frontend+backend+database.  

Creating your CRUD application with Flatlogic

Step 1. Choosing the Tech Stack

In this step, you’re setting the name of your application and choosing the stack: Frontend, Backend, and Database.

Step 2. Choosing the Starter Template

In this step, you’re choosing the design of the web app. Here you can find the Material Template for your application.

Step 3. Schema Editor

In this part you will need to know which application you want to build, that is, CRM or E-commerce, also in this part you build a database schema i.e. tables and relationships between them.

If you are not familiar with database design and it is difficult for you to understand what tables are, we have prepared several ready-made example schemas of real-world apps that you can build your app upon modification:

E-commerce app;
Time tracking app;
Books store;
Chat (messaging) app;
Blog.

Afterwards, you can deploy your application and in a few minutes, you will get a fully functional CMS for your React Application with Material Design.

Suggested Articles:

What is Angular – Flatlogic Tech Glossary
What is Webpack – Flatlogic Tech Glossary
How to Create a Vue Application [Learn the Ropes!]

The post What is Material UI appeared first on Flatlogic Blog.

Flatlogic Admin Templates banner

How to Upgrade to the React 18 Release Candidate

Posted on by Mark Feehily0

Our next major version, React 18, is available today as a Release Candidate (RC). As we shared at React Conf, React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applications. In this post, we will guide you through the steps for upgrading to React 18.

If you’d like to help us test React 18, follow the steps in this upgrade guide and report any issues you encounter so we can fix them before the stable release.

Note for React Native users: React 18 will ship in React Native with the New React Native Architecture. For more information, see the React Conf keynote here.

Installing

To install the latest React 18 RC, use the @rc tag:

npm install [email protected] [email protected]

Or if you’re using yarn:

yarn add [email protected] [email protected]

Updates to Client Rendering APIs

When you first install React 18, you will see a warning in the console:

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

React 18 introduces a new root API which provides better ergonomics for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features.

// Before
import { render } from ‘react-dom’;
const container = document.getElementById(‘app’);
render(<App tab=“home“ />, container);

// After
import { createRoot } from ‘react-dom/client’;
const container = document.getElementById(‘app’);
const root = createRoot(container);
root.render(<App tab=“home“ />);

We’ve also changed unmountComponentAtNode to root.unmount:

// Before
unmountComponentAtNode(container);

// After
root.unmount();

We’ve also removed the callback from render, since it usually does not have the expected result when using Suspense:

// Before
const container = document.getElementById(‘app’);
ReactDOM.render(<App tab=“home“ />, container, () => {
console.log(‘rendered’);
});

// After
function AppWithCallbackAfterRender() {
useEffect(() => {
console.log(‘rendered’);
});

return <App tab=“home“ />
}

const container = document.getElementById(‘app’);
const root = ReactDOM.createRoot(container);
root.render(<AppWithCallbackAfterRender />);

Note: There is no one-to-one replacement for the old render callback API — it depends on your use case. See the working group post for Replacing render with createRoot for more information.

Finally, if your app uses server-side rendering with hydration, upgrade hydrate to hydrateRoot:

// Before
import { hydrate } from ‘react-dom’;
const container = document.getElementById(‘app’);
hydrate(<App tab=“home“ />, container);

// After
import { hydrateRoot } from ‘react-dom/client’;
const container = document.getElementById(‘app’);
const root = hydrateRoot(container, <App tab=“home“ />);
// Unlike with createRoot, you don’t need a separate root.render() call here.

For more information, see the working group discussion here.

Updates to Server Rendering APIs

In this release, we’re revamping our react-dom/server APIs to fully support Suspense on the server and Streaming SSR. As part of these changes, we’re deprecating the old Node streaming API, which does not support incremental Suspense streaming on the server.

Using this API will now warn:

renderToNodeStream: Deprecated ⛔️️

Instead, for streaming in Node environments, use:

renderToPipeableStream: New ✨

We’re also introducing a new API to support streaming SSR with Suspense for modern edge runtime environments, such as Deno and Cloudflare workers:

renderToReadableStream: New ✨

The following APIs will continue working, but with limited support for Suspense:

renderToString: Limited ⚠️

renderToStaticMarkup: Limited ⚠️

Finally, this API will continue to work for rendering e-mails:

renderToStaticNodeStream

For more information on the changes to server rendering APIs, see the working group post on Upgrading to React 18 on the server, a deep dive on the new Suspense SSR Architecture, and Shaundai Person’s talk on Streaming Server Rendering with Suspense at React Conf 2021.

Automatic Batching

React 18 adds out-of-the-box performance improvements by doing more batching by default. Batching is when React groups multiple state updates into a single re-render for better performance. Before React 18, we only batched updates inside React event handlers. Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default:

// Before React 18 only React events were batched

function handleClick() {
setCount(c => c + 1);
setFlag(f => !f);
// React will only re-render once at the end (that’s batching!)
}

setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
// React will render twice, once for each state update (no batching)
}, 1000);

Starting in React 18 with createRoot, all updates will be automatically batched, no matter where they originate from. This means that updates inside of timeouts, promises, native event handlers or any other event will batch the same way as updates inside of React events:

// After React 18 updates inside of timeouts, promises,
// native event handlers or any other event are batched.

function handleClick() {
setCount(c => c + 1);
setFlag(f => !f);
// React will only re-render once at the end (that’s batching!)
}

setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
// React will only re-render once at the end (that’s batching!)
}, 1000);

This is a breaking change, but we expect this to result in less work rendering, and therefore better performance in your applications. To opt-out of automatic batching, you can use flushSync:

import { flushSync } from ‘react-dom’;

function handleClick() {
flushSync(() => {
setCounter(c => c + 1);
});
// React has updated the DOM by now
flushSync(() => {
setFlag(f => !f);
});
// React has updated the DOM by now
}

For more information, see the Automatic batching deep dive.

New APIs for Libraries

In the React 18 Working Group we worked with library maintainers to create new APIs needed to support concurrent rendering for use cases specific to their use case in areas like styles, external stores, and accessibility. To support React 18, some libraries may need to switch to one of the following APIs:

useId is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. This solves an issue that already exists in React 17 and below, but it’s even more important in React 18 because of how our streaming server renderer delivers HTML out-of-order. For more information see the useId post in the working group.

useSyncExternalStore is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the useSyncExternalStore overview post and useSyncExternalStore API details.

useInsertionEffect is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the Library Upgrade Guide for <style>.

React 18 also introduces new APIs for concurrent rendering such as startTransition and useDeferredValue, which we will share more about in the upcoming stable release post.

Updates to Strict Mode

In the future, we’d like to add a feature that allows React to add and remove sections of the UI while preserving state. For example, when a user tabs away from a screen and back, React should be able to immediately show the previous screen. To do this, React would unmount and remount trees using the same component state as before.

This feature will give React better performance out-of-the-box, but requires components to be resilient to effects being mounted and destroyed multiple times. Most effects will work without any changes, but some effects assume they are only mounted or destroyed once.

To help surface these issues, React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.

Before this change, React would mount the component and create the effects:

* React mounts the component.
* Layout effects are created.
* Effect effects are created.

With Strict Mode in React 18, React will simulate unmounting and remounting the component in development mode:

* React mounts the component.
* Layout effects are created.
* Effect effects are created.
* React simulates unmounting the component.
* Layout effects are destroyed.
* Effects are destroyed.
* React simulates mounting the component with the previous state.
* Layout effect setup code runs
* Effect setup code runs

For more information, see the Working Group posts for Adding Strict Effects to Strict Mode and How to Support Strict Effects.

Configuring Your Testing Environment

When you first update your tests to use createRoot, you may see this warning in your test console:

The current testing environment is not configured to support act(…)

To fix this, set global.IS_REACT_ACT_ENVIRONMENT to true before running your test:

// In your test setup file
global.IS_REACT_ACT_ENVIRONMENT = true;

The purpose of the flag is to tell React that it’s running in a unit test-like environment. React will log helpful warnings if you forget to wrap an update with act.

You can also set the flag to false to tell React that act isn’t needed. This can be useful for end-to-end tests that simulate a full browser environment.

Eventually, we expect testing libraries will configure this for you automatically. For example, the next version of React Testing Library has built-in support for React 18 without any additional configuration.

More background on the the act testing API and related changes is available in the working group.

Dropping Support for Internet Explorer

In this release, React is dropping support for Internet Explorer, which is going out of support on June 15, 2022. We’re making this change now because new features introduced in React 18 are built using modern browser features such as microtasks which cannot be adequately polyfilled in IE.

If you need to support Internet Explorer we recommend you stay with React 17.

Other Changes

Update to remove the “setState on unmounted component” warning
Suspense no longer requires a fallback prop to capture
Components can now render undefined
Deprecated renderSubtreeIntoContainer
StrictMode updated to not silence double logging by default

Flatlogic Admin Templates banner

What is React?

Posted on by Mark Feehily0

Introduction

Why use React?
Virtual Document Object Model (VDOM)
JSX
React Native

Main Components
Function Components
Class Components

Benefits
Who uses React

How to build your first application on ReactHow to create your app on Reactjs from the terminal of your IDE

How to create your app with Flatlogic Platform
Creating a CRUD application with Flatlogic
Creating a one-page application with Flatlogic

Introduction: What is React

React.js was released by a software engineer working for Facebook – Jordane Walke in 2011. React is a JavaScript library focused on creating declarative user interfaces (UIs) using a component-based concept. It’s used for handling the view layer and can be used for web and mobile apps. React’s main goal is to be extensive, fast,  declarative, flexible, and simple. 

React is not a framework, it is specifically a library.  The explanation for this is that React only deals with rendering the UIs and reserves many things at the discretion of individual projects. The standard set of tools for creating an application using ReactJS is frequently called the stack.

Why use React?

Let’s take a more detailed look at what sets React library aside against other frameworks and libraries and makes it so powerful and popular for application development.

Virtual Document Object Model (VDOM)

The Document Object Model (DOM) is an API for valid HTML and well-formed XML documents.

A virtual DOM is a representation of a real DOM that is built/manipulated by browsers. Advanced libraries, such as React, generate a tree of elements in memory equivalent to the real DOM, which forms the virtual DOM in a declarative way. The virtual DOM is one of the features that make the framework so fast and reliable.

Image source: https://miro.medium.com/max/1400/1*HyoU7X-SMyT8xQD1PjrRGw.png

JSX 

React uses a syntax extension to JavaScript called JSX. We use it to create ‘elements’.

JSX uses Babel preprocessors to convert HTML-like text in JavaScript files into JavaScript objects to be parsed.

React doesn’t require the use of JSX, but most developers find that it makes for a more user-friendly experience within the JavaScript code.

We use JSX to create React components, so this is why it is an important part of ReactJS.

React Native

React Native is an open-source JavaScript framework for building apps on different platforms, such as iOS, Android, and UPD. It is React-based and gives all its greatness to mobile app development.

React Native uses JavaScript to build the UI of an application but also uses OS-native representations. It allows code to be implemented in OS-native languages (Swift and Objective-C for iOS and Java and Kotlin for Android) for more sophisticated functions.

Main components 

ReactJS is a component-based library where components make our code reusable and split our UI into different pieces. Components are divided into two types, Class components and Function components. All React components follow the separation of concerns design principle, meaning that we should separate our application into different sections to address separate concerns.

Function components.

React components work similarly to JavaScript functions. A component takes random inputs, which we call props, and must always return a React element that defines what is intended to be displayed to the user.

The simple method to specify a React component is to define a JavaScript function and return a React element. The React component must always return a React element, or it will throw an error.

We’ve defined a ReactJS component called HelloWorld that takes one prop, which stands for properties and returns a ReactJS element, in this case, a simple h1 element. 

Class components.

The Class component must have the extends `React.Component` statement. This statement sets up a `React.Component` subclass that allows your component to access `React.Component` functions.

The component must also have a `render()` method, which returns HTML.

Benefits 

So the main question is why you should choose ReactJS as a frontend development stack while there are a lot of others. Here are some reasons:

Speedless. React allows developers to use individual parts of their application on both the client and server sides, and any changes they make will not affect the application’s logic. This makes the development process extremely fast.

Components support. The use of HTML tags and JS codes makes it easy to work with a huge dataset containing the DOM. React acts as an intermediary that represents the DOM and helps you decide which component requires changes to get accurate results.

Easy to use and learn. ReactJS is incredibly user-friendly and makes any UI interactive. It also allows you to quickly and efficiently build applications, which is time-saving for clients and developers alike.

SEO Friendly. A common problem complained by most web developers is that traditional JavaScript frameworks often have problems with SEO.  ReactJS solves this problem by helping developers navigate different search engines easily through the fact that the ReactJS application can run on the server, and the virtual DOM renders and returns it to the browser as a  web page.

One-way Data Binding. One-way data-binding implies that absolutely anyone can trace all the changes that have been made to a segment of the data.  This is also one of the reasons that make React so easy.

Who uses React?

Here is the list of popular ReactJS websites:

Facebook
Atlassian
Uber Eats
Netflix
Airbnb
Trello
Grammarly
Outlook.com
Codecademy
Dropbox

How to build your first application on React

Creating your app on React.js from the terminal of your IDE

First, you should install the framework package using `npx create-react-app`

`npx create-react-app my-app`, where is the `my-app` name of your application.

The next step is navigating into your new application.

`cd my-app`

And the last step is to start your application.

`npm start` 

In the end, you will have only a frontend application without any database and backend, which takes a lot of work to get a full-fledged application.

How to create your app with Flatlogic Platform

There are two ways to build your application on the Flatlogic Platform: you can create a simple and clear frontend application, generated by the framework CLI, or the CRUD application with frontend+backend+database.

Creating a CRUD application with Flatlogic

1 Step. Choosing the Tech Stack

In this step, you’re setting the name of your application and choosing the stack: Frontend, Backend, and Database.

2 Step. Choosing the Starter Template

In this step, you’re choosing the design of the web app.

3 Step. Schema Editor

In this part you will need to know which application you want to build, that is, CRM or E-commerce, also in this part you build a database schema i.e. tables and relationships between them.

If you are not familiar with database design and it is difficult for you to understand what tables are, we have prepared several ready-made example schemas of real-world apps that you can build your app upon modification:

E-commerce app;
Time tracking app;
Books store;
Chat (messaging) app;
Blog.

At the final, you can male a deploy of your application and in a few minutes, you will get a fully functional CMS for your Application.

Creating a one-page application with Flatlogic 

You can create a frontend-only app with the Flatlogic Platform. This assumes you host the back-end somewhere else or do not need it at all. To generate a one-page application you don’t need to enter anything in the terminal of your IDE, you just need to go to the page of creating an application on the Flatlogic website and make only 2 steps:

1 Step. Choosing the Tech Stack

In this step, you set the name of your application and choose the stack: React as Frontend, No-Backend as Backend.

2 Step. Choosing the Starter Template

In this step, you choose the design of the web app. Since this is a standard one-page application created using the CLI framework, it will have the design of a standard one-page ReactJS CLI application.

At the final, you can deploy your app and in a few minutes, you will get a one-page React application, which you can further modify as you like.

The post What is React? appeared first on Flatlogic Blog.

Flatlogic Admin Templates banner