Discover everything from the basics to the cutting-edge of React – Render Props, Context API, Suspense, CSS-in-JS, Progressive Web Apps, UI Libraries and more.

Line__Blue 2.3

The React Roadmap to Success

React is one of the most popular JavaScript frameworks currently in use, and even if you are not using it yourself, you are no doubt at least reasonably familiar with its existence. Used primarily for the development of Single Page Applications (SPA), React is an open-source library used for web development. A lot of extra development has been done to augment the basic React offering, and the eco-system is quite large. There are many tutorials, sites and other resources that will take you from the basic elements to advanced topics for React. In fact, there are so many resources and new developments available that it can be difficult to keep track of them all. Fortunately, we’ve assembled a set of resources and key information about React that will be useful for beginners and experienced developers alike. Enjoy!

Line__Blue 2.3

Table of Contents

  1. React Hot Topics
  2. What is React?
  3. Where Did React Come From?
  4. What’s the Latest and Greatest with React?
  5. Is React the Right Choice for My App?
  6. Sounds Great! Now What Do I Do?
  7. Creating the User Experience
  8. Resources for Staying Current with React

Line__Blue 2.3

React Hot Topics1. React Hot Topics

The latest and greatest, hot off the presses news about React. We’ve started off with a quick look at some topics that are trending today and are of particular interest to the React community. Be sure to check back here often. Web development is a fast-paced environment and what’s new and hot can change frequently. Here we list some key hot topics for today but we’ll update this as needed!

Render Props

When using components in React you are able to re-use your code, but it may not be clear how to share data between these components. A render prop is basically a prop whose value is a function, and which allows you to share code between components. A component with a render function will call a render prop, which takes a function that returns a React element. Then the component uses this instead of using its own render logic. The React Router and Downshift libraries both use render props. Looking at the React documentation you can see a great code example of using render props on a component to dynamically decide what to render. Here is a snippet of what that looks like:

class MouseTracker extends React.Component {
  render() {
    return (
        <h1>                        !</h1>
        <Mouse render={mouse => (
          <Cat mouse={mouse} />

You do not have to use a prop specifically called “render.” Basically, any function that tells a component what to render will be considered a render prop. Be aware that when you use render props inside of a React.PureComponent the shallow prop comparison will return false for new props, which means that each render will generate a new value for your render prop.

Context API

Passing data between components is a common hurdle when using components in any framework. One of React’s solutions to this is to take advantage of the Context API. Usually one would need to pass data top-down from parent components to children components. The larger and more nested your components become, the more complicated this will be. Using createContext you can pass a value deep into the component tree without having to explicitly drill down through the components. React documentation advises users to only use this approach when you need the same data accessed in many components at multiple levels. When taking advantage of the Context API you’ll first use React.createContext (const {Provider, Consumer} = React.createContext(defaultValue);), a Provider and a Consumer.

Async Rendering & Suspense

In a tldr; version, React’s new Suspense feature gives you the power to delay rendering a part of your application until a certain condition is met. This was introduced by Dan Abramov from the stage with a warning that the API will change but that it was using a real build of React. Along with suspending rendering, in order to give users a better experience regardless of their computing speed or network connection, React now has a way to make updates more asynchronous. With the new API React can start rendering but hit the server to see if there is a higher priority event that it should handle first. As Dan describes it, they’ve, “built a generic way to ensure that high-priority updates like user input don’t get blocked by rendering low-priority updates.” To see this all in action check out Dan’s demos from the talk listed above.


CSS-in-JS sounds just like what it is – instead of creating separate files for styling, the CSS is placed inside the JS files of the component. Writing CSS inside of your JS files may feel wrong and against your usual clean code standards, but some think this is beneficial as it helps keep everything you need for a component in one place. Actual CSS is generated when you use CSS-in-JS libraries and some even add support for non-native CSS features like nesting. Using this approach lets you stay in the context of your components, add isolation, scoped selectors, vendor prefixing, unit tests and more. Here are some of the most popular CSS-in-JS libraries: Styled Components, JSS-React, glamourous, Aphrodite and Styletron.

Progressive Web Apps

Progressive Web Apps (PWAs) represent a new way to approach web development, especially for responsive and mobile web apps. By following a few new web APIs and a number of development practices and guidelines, PWAs are intended to allow developers to build mobile web apps that behave a lot more like natively-installed applications.

Why does this matter? Because, in reality, people primarily use native apps, not web apps, on their phones. According to comScore, people spend 87% of their on-device time in native apps, and only 13% on the mobile web.

And while we can’t completely generalize why this is, native apps have a number of built-in advantages that make users more likely to engage with them over a mobile web experience, including home screen launch icons, push notifications, offline support and better performance. Generally speaking, in the eyes of consumers, native apps are more dependable.

But the other side of this coin is that native app usage is highly concentrated among a few apps, for most consumers. Many studies have found that users tend to use only a few installed apps on a regular basis, meaning that all that time and money you are looking to spend to create a fully-native app that mimics what your web app already does might be a waste if you’re not immensely sticky.

Thankfully, PWAs exist to make it easier for web developers to create mobile web apps that have many of the advantages of native apps, including installability and offline support, without having to creative a fully-native mobile app.

In practice, PWAs center around a new level of care for the experiences your users have while using your app. According to Google, one of the primary drivers of PWAs, PWAs are all about delivering user experiences that are reliable, fast and engaging. They are experiences that have the reach of the web, and which:

  • Load instantly and never become nonfunctional, even in uncertain network conditions
  • Respond quickly to user interactions with smooth, fluid animations and no jank
  • Feel like a native app on the device, and provide an immersive experience

For more info on PWAs, check out Google’s PWA page. For more guidance on building a PWA, or adapting an existing app to the PWA model, you can follow this checklist from Google.

There are some good resources available to help take you through the process of creating a PWA, and you can find a great tutorial series here, complete with code samples you can download. Finally, you’ll need a UI for your PWA, and what better than Kendo UI with support for PWAs! For more detailed information on how to create a PWA with React and Kendo UI, you can read this GIF guide.

Service Workers

One of the key technologies in the PWA umbrella is Service Workers. A Service Worker is essentially a programmable network proxy inside the browser, which allows you to “catch” when the browser needs to make a network request and either dispatch the request, or retrieve the requested information from a cache or local store. What this means is that Service Workers enable developers to deliver an offline capable experience by being able to detect and respond to offline or high-latency conditions in an app. For an in-depth introduction to Service Workers, check out this article from Matt Gaunt at Google. 

Service Workers have support in Chrome and Firefox, but are not yet supported in Safari or Edge. That’s about to change, however. As of version 11.1 for desktop and 11.3 for iOS, Safari will support Service Workers, which is a huge boon for mobile web developers building PWAs. Edge version 17 should provide support for Service Workers, as well.

Line__Blue 2.3

2. What is React?React Logo

React is very popular in the web development world, and unless you’ve been living in a cave on a remote island you can’t possibly have missed hearing about it. And even there, if you had good internet in the cave then you will still have heard of it. Let’s take a quick look at React, it’s history, and the core concepts in React that make it React.

React was created originally at Facebook and, other than brief bump in the road in 2017 over licensing terms, has enjoyed solid growth since its introduction. Depending on which statistics you look at, React can actually be called the most popular JavaScript framework today. What are the key features of React? These include:

  1. Virtual DOM
  2. JSX
  3. Components
  4. Props
  5. State
  6. Lifecycle

Virtual DOM

We’ll spend a bit of time here because this is a very important concept. Like the actual DOM (Document Object Model), the React Virtual DOM is a node tree, except that it’s virtual – it doesn’t directly display. The virtual DOM also contains a list of elements, content and attributes that are represented by JavaScript objects that have a variety of properties.

Each React component has a render function, and when we call that render function a node tree is created from that particular React component. This might be a single component, or it could be rendering child components as well. Whatever it includes, the whole tree is listed out. This same tree is also updated when data models in the components change. This includes state updates or any other data in the components.

That’s the virtual DOM. Now let’s dive into the how the real DOM gets updated. There are three steps involved in updates. First of all, whenever something changes in a component tree, the virtual DOM will be updated and re-rendered. After the virtual DOM has been updated, the difference can be determined between the new virtual DOM and the old virtual DOM, so we know what has actually changed. The next step is to update the real DOM with the list of changes that were derived from the virtual DOM changes.

This is a big deal because updating the real DOM can be very expensive in time and resources. In this way we are performing all of our changes one by one on the virtual DOM first, and the final changes are brought over to the real (and expensive) DOM only once at the end.


JSX is the blending of a bit of JavaScript with a bit of HTML – really an extension to JavaScript. It let’s you streamline your code by mixing the two when appropriate and is used by React.createElement to produce React elements in a more efficient way.


One of the key concepts in both React and other frameworks is the component. To get a sense of how the components vary between frameworks, you can read this comparison of components in different frameworks for more information.

The basic concept behind components is that they are much like JavaScript functions, and they let you break the UI into reusable, independent pieces. Each component has a basic structure that includes some set of inputs and a set of props, and then it returns React elements. The components will always return a render function that includes the elements we want it to display. Components are very basic at their base but they can get very complex if needed. Every component has a render function and that is a key element for each component in React.


Attributes and components get their overall properties from props. That’s how we deal with different attributes and how we pass data into a component. When we pass a prop in by name we can then easily use it while rendering a particular component by using


React gives us a complete set of lifecycle hooks that we can subscribe to and use to control each component. These include functions for mounting, unmounting and updating. They let us have complete control over the lifecycle of each individual component. For example, the constructor can be used to set up an initial state for a component, and then after that we can use other events that we can connect to.


Last but not least, components each have a state that they manage as well. The state can be extracted from the component and set in the component. Updating and dealing with the component state is the responsibility of the developer.

Line__Blue 2.3

Where Did React Come From3. Where Did React Come From?

Like Angular and Vue, React is a popular JavaScript framework. These frameworks are designed to make life easier for developers when they are creating apps. React includes a number of features that help with aspects of typical modern app development and help make complex tasks easier. In the end, by using React you can be more productive and even create a better user experience because the development of complex features will be easier.

React was first created by Jordan Walke at Facebook, and it is still driven by Facebook although there is an active open source community. He was inspired by XHP, which is a PHP-based system, as well other sources. Peter Hunt wanted to use React at Instagram and helped to create a more neutral (non-Facebook) version. Facebook added resources to the development team and decided to open-source the project.

It was released as open source at the JSConf in May 2013. Version 3 was released in July of 2013, version 12 in November of 2014, version 14 in October 2015, version 15 in April 2016, version 16 in September 2017. You may notice I skipped a few releases in my list because I only listed one major release per year, and you can see that it moved fairly quickly in the beginning as major new features were added. As the product matured, the pace of major releases slowed.

React does not try to be a complete application framework, and some people will argue whether it is properly a “framework” (we think it is). React is focused on helping to build the user interface.

It is worth mentioning that React had its share of controversy. The initial public release used a standard Apache 2.0 license. In 2014, Facebook replaced this with a 3-clause BSD license coupled with a separate patents clause. There was much discussion about whether this actually gave Facebook an unacceptable amount of control. In response to user concern, Facebook changed the patent clause in 2015 to be more clear and permissive. However, Apache considered this incompatible with their licensing and controversy continued. Facebook refused to reconsider and projects from several high-profile companies, like WordPress, announced that they were moving away from React. In September 2017 Facebook announced that they would move to an MIT license to meet user’s concerns. React version 16 was released at the end of September 2017 under the MIT license.

Today, over 1,000 people are listed as React authors on the Github React pages.

Line__Blue 2.3

Latest And Greatest With React4. What’s the Latest and Greatest with React?

As of this writing, the current major release version of React is version 16.3.2 (released April 16, 2018). This release and the previous one 16.3.1 (released April 3, 2018) were bug fix and minor enhancement releases. There were a number of new features added in 16.3.0 (released March 29, 2018), however. This release includes some new APIs including a ref forwarding API, a better ref API, and an official context API. There are also new lifecycle methods to help with changes to the legacy lifecycle methods, and you can learn more about these from the short overview below.

Component Lifecycle Changes

The current component API has, over the years, been extended with support for more advanced features in ways that it was not originally intended, and this has caused complications with other areas. Several methods are being deprecated including componentWillMount, componentWillReceiveProps, and componentWillUpdate. In order to minimize disruption, the change will be gradual. Deprecation warnings will be enabled in a future version of 16.x but they will continue to work normally until version 17. In version 17 it will still be possible to use them, but they will be given an UNSAFE_ prefix. An automated script to rename them will also be provided.

At the same time, several new lifecycles are being added. These include:

  • getDerivedStateFromProps – a safer alternative to the legacy componentWillReceiveProps.
  • getSnapshotBeforeUpdate – safely support reading properties from the DOM before updates are made.

New APIs

  • ForwardRef API: this feature allows some components to pass (forward) a ref down to its children. This will help address component encapsulation issues that can arise.
  • CreateRef API: In the past, the callback API has been the recommended way to manage refs over the string ref SAPI. The string ref API, however, was easier to use but had some drawbacks. Now with version 16.3 there is a new option for managing refs that provides the convenience of the string ref API without the drawbacks. Callback refs will still be supported.
  • Official Context API: A new context API has been included in this release that supports static type checking and deep updates, and is also more efficient. While the old experimental context API will still continue working through all of the 16.x release, a new one is now available.

For a detailed list and more information about what’s included in the latest React release, you can check out the official release page.

Line__Blue 2.3

Angular Vs React Vs Vue

5. Is React the Right Choice for My App?

To be fair, there are different frameworks because they solve different problems in different ways. Part of the reason to select one framework over another involves environment, experience and preference. But there are very real differences that can make one more or less appropriate depending on your specific objectives. There are a number of reasons to pick React, including these top 5 reasons. But ultimately, there are some questions you need to consider:

  • Is React still popular?
  • React? Angular? Vue?
  • What are the long-term prospects for React?

Let’s take a quick look at these issues.

Is React Still Popular?

Technologies come and go rapidly in the JavaScript world. What is hot this year might be forgotten next year, and new technologies showing up to take their place. If we want to adopt any new technology, we want to make sure that it will be around for a while and will enjoy support. So where does React fit in to the lifecycle of new technology? First of all, there is a very active development effort around React and a clear roadmap. If we look at all the available statistics, we also see that React is still growing rapidly. The 2017 State of JavaScript and 2018 StackOverflow developer surveys, for example, clearly show this. React is here to stay.

React? Angular? Vue?

If you are looking at React, you are probably considering how React stacks up against the other frameworks currently in wide use. Specifically, that means looking at Angular and Vue. The information on this page is mainly focused on React but it is worth taking a moment to peek at Angular and Vue and see how they compare to React for your application. These last few words are important: for your application. One is not better or worse than the others, but they are different and these differences might make them better or worse for a specific environment and specific application. There are a number of factors to consider when making this choice.

Perhaps even more importantly, you need to look at these factors as they apply within your own organization. What skills does your team have? What future requirements will you need to consider? What will the long-term disposition of this app be? Will you need to share code with other teams in the future? Practical considerations can often outweigh technical concerns. Having said that, here are a few things to think about when you are deciding on a framework:

  • If you want a UI-leaning framework that works well with an ecosystem of companion tools and libraries, React is probably your best choice
  • If you’re looking for an all-in-one solution for a complex app, Angular is a solid choice
  • If you’re looking for a solution that feels like Angular in many ways, includes some simple defaults and can be extended as your app gets more complex, Vue‘s progressive approach makes it a solid choice
  • If you need something that has the assurance of corporate backing, Angular and React provide just that
  • If your development team is fluent in C# or Java and prefers statically-typed languages, they’ll be most comfortable with Angular and TypeScript
  • If your team is made up of experienced JavaScript developers who are well-versed in the latest and greatest language features, React will be a comfortable place to work
  • If your team insists upon separation of HTML, JS and CSS, or operates in an environment where designers and developers collaborate on components, Vue is a good fit
  • If your organization needs long-term support and a security focus, Angular is the best choice.

As with most things, your context is key, here. There is no incorrect choice between Angular, React and Vue, so long as it is informed by your needs. As you consider your choice, we recommend this whitepaper for an in-depth comparison, as well as the following video, which provides an overview of a few other popular web frameworks. This blog’s React vs. Angular comparison is also worth reading so make sure to check it out.

The Move to Single Page Applications (SPA)

Another popular buzzword for web apps is the Single Page Application (SPA). This is, of course, exactly what it says. An application that consists of a single page – a single URL. So why is that anything worth talking about? It really comes along with web applications becoming more complex and more modular in their structure. At some point, it’s easier to reload parts of the page than to load a whole new page, read in the date again, initialize things, etc. So you initialize your environment once, and then just swap parts of the page in and out to change the function of the page. Faster, easier, slimmer. Some users hate them though – no URLs to bookmark. And that’s something to think about.

Why am I even mentioning this here? If you are looking at React, you are working with a web app of reasonable complexity. If your app is still spread out across multiple pages, consider bringing it all into a single page instead. You’ll save in setup overhead which will translate into faster load and response times for your users. Conversely, if you are starting on a single page app, consider whether your users would actually benefit from multiple pages (and multiple bookmark-able URLs). Also – consider whether your SEO team would be happier with multiple pages as well. Maybe not if you are just displaying data records pulled from a database, or if you are behind a firewall and Google can’t see you anyway. What’s right and wrong depends on your unique situation, but make sure you do or don’t move to an SPA based on the right reasons.

Line__Blue 2.3

Getting Started With React6. Sounds Great! Now What Do I Do?

You’ve picked React as the framework for your next project. Great! But life is more complicated than just coding and you should really step back first and consider your development environment along with some of the key decisions you need make as you plan out your React app. A little planning up front will save you a lot of work later.

Things you should consider first include:

  • Your software development tools, including bug trackers, version control, communication and task management
  • Package managers, or tools that help track and manage dependencies from external sources
  • Task runners to help you automate things like testing, linting and more
  • Linters and style checkers, to maintain consistency throughout your team
  • UI components like Material, Bootstrap and Kendo UI
  • Testing tools for units of code and even end-to-end browser testing
  • Your targets and distribution strategy – are you building a mobile app, a PWA?
  • Style guides, state management and performance

Once you have considered these factors and more, you’re ready to roll with React. Thankfully, there’s a great tutorial and some awesome docs on the React web site itself.

Want to take a deeper dive into some specific topics? Here is a blog that looks at the top 3 tips to managing state in React, and one on the top 3 performance tips for using React.

Line__Blue 2.3

Building The Ui Of Your React App7. Creating the User Experience

Today, your web apps form the face of your business and are not simply a tool anymore. That means that just providing basic functionality is not enough, you need to provide an outstanding user experience. There are some basic tools that can help you get there, like Bootstrap and Material, but modern apps need far more functionality that these can provide. Fortunately, we have Kendo UI.

Using Kendo UI to Build Your User Interface

Whether you’ve decided to use Material, Bootstrap or another UI library, chances are that your UI and functional needs extend beyond the built-in HTML components. Instead of building your own components, or cobbling them together from an uncoordinated mess of single-feature libraries and components, the faster approach is to use a robust library of UI components. Kendo UI provides the most popular UI library of native and purpose-built UI components, and is worth considering for your next app. Here are a few of the stellar features of Kendo UI for React:

  • Performance and Speed: the components are engineered specifically for React, and built from the ground-up for React. This enables them to take full advantage of the framework’s native performance capabilities.
  • Installation and Updates: Kendo UI for React is installed as discrete, scoped npm packages. It is easy and unobtrusive to get the latest bits: no need for time-consuming installations. This also means that the latest code is always available immediately.
  • We’ve been doing this for a long time. Progress has been creating UI components for 15 years. Kendo UI has been used in tons of apps so you get all this experience and user feedback folded into the Kendo UI React components.

Check out Kendo UI for React yourself by downloading a free trial today.

Line__Blue 2.3

React Resources8. Resources for Staying Current with React

Web technology is a fast-paced environment and it is important to stay on top of new developments and changes. In addition to the information provided on these pages, we have included a list of other resources you can use to stay on top.

And, of course, you can keep an eye on what people are saying about React. Here are a few suggestions (some of the React team members) for who to follow on Twitter, and there are lots of other people who are contributors to the React community that you will find:

Line__Blue 2.3


Thank you for reading our React resource created by John Willoughby and Tara Z. Manicsic. We hope you have found it useful. Questions or comments? Leave a comment below – we love to hear from you!

Back to Top

Comments are disabled in preview mode.


Please enter your comment!
Please enter your name here