The topic of security on the frontend part can be separated into two purposes:

• keeping your client and their data secure
• keeping your clients away from things they should not have access to

The first part is a very vast topic that covers things like cross-site-scripting (XSS), cross-site-request-forgery (CSRF), CORS and other topics related to how browser keep your data from leaking out to attacker or preventing attacker from performing actions in your name.

The second part is more concerned with “how do I limit my users from accessing certain parts of my site” — things like members only section…

Introduction of modern JavaScript frameworks / libraries that focus on creating interactive websites or Single Page Applications the way that pages are displayed to a visitor has changed a lot.

Before the advent of applications fully generated by JS, in the browser, HTML was returned in response to the HTTP call — be it by returning a static HTML content file, or by processing the response via server side languages (such as PHP, Python or Java) and responding in a more dynamic way.

A solution like this allows us to deliver responsive sites that work a lot faster than standard…

The release of 16.3 introduced some new life-cycle functions, which replace existing ones to provide better support for the new asynchronous nature of React.

This article is an update on the previous one, which talked about the “old” lifecycle, thus it’s not going to focus on all of the lifecycles, only the new ones.

static getDerivedStateFromProps(nextProps, prevState)

The new function which main responsibility is ensuring that the state and props are in sync for when it is required. It’s main job is replacing componentWillReceiveProps

gDSFP is a static function and as such has no access to this — you are instead expected to…

At the stage of last JSConf.is conference, Dan Abramov unveiled a new feature / API for React called React Suspense. In case you missed it, you can re-watch the talk on YouTube:

In short: the new feature allows you to defer rendering part of your application tree until some condition is met (for example data from an endpoint or a resource is loaded).

Why do we need this?

Delaying displaying content is possible already, all one has to do is check if the data is loaded, and if not, show a spinner — if it’s as simple as that why do we need this?

…

React 16.3-alpha just hit npmjs and can be downloaded and added to your project. What are the biggest, most interesting changes?

Update 05.02.2018 — I’ve previously made some wrong observation about the createContext behavior, this section was updated to reflect the actual behavior of the factory function.

New context API

Context API was always a thing of mystery — it’s an official, documented React API but at the same time developers warned us not to use it because the API might change with time, and it was missing some documentation on purpose. Well, that time is now — the RFC phase has passed…

If you ever worked with an AJAX call, you are probably familiar with the following error displayed in browser console:

React provides developers with many methods or “hooks” that are called during the life-cycle of an component, which allows us to update the UI and application state. Knowing when to use which of them is crucial to properly understanding how to work with React.

Update:

React 16.3 introduced two more life-cycle methods and depracated few of them, be sure to check up the follow-up at https://medium.com/@baphemot/understanding-react-react-16-3-component-life-cycle-23129bc7a705

constructor

constructors are the basic of OOP — this is a special function that will get called whenever a new object is created. It’s very important to call a special function super in cases where our…

At times you might want to have some information available to your application from outside sources — maybe you’re embedding your application in some bigger website and want to access data that is already present (for example data of authorized user).

Passing data to the application at run time is known as “initialization”, “bootstrapping” or “state hydration”. Lets go through couple of solutions.

Important:

Please note that allowing data from outside of your application to be accessed inside of React might open you to attacks such as XSS or CSRF. …