Photo by rawpixel via unsplash

Important
This article is not a list of questions to expect on an interview and complete answers to them. The point of this post is to show what questions I ask, what I’m looking for in an answer and why there are no bad answers.
If you want a list of “best react interview questions 2018” check out https://github.com/sudheerj/reactjs-interview-questions

Part of my job is performing the so called “technical interviews” during which I evaluate potential candidates that are applying for a “Frontend Developer with React” position.

If you’ve ever Googled “react interview questions” (or any other “[tech] interview questions”) you’ve…


Source: http://www.itv.com/news/meridian/2016-04-25/simons-blog-funny-signs/

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…


“OK, but no”

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. …


One of the most important things a developer should learn is how to (properly) debug an application in his language of choice. Knowing that not only allows you to easily find sources of errors in your code, but also teaches you about the inner working of the language thus preventing you from making the same error in the future.

I will cover a couple of techniques and tools you will find useful when developing ReactJS applications. …

Bartosz Szczeciński

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store