ReactJS Flashcards

1
Q

What is the purpose of the Build System?

A

In Javascript, it shapes the structure fo your application.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What are most important tasks for a Build System?

A
  1. Managing external and internal dependencies
  2. Running compilers and preprocessors
  3. Optimizing assets for production
  4. Running the development web server, file watcher, and browser reloader
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Why was Yeoman so highly praised?

A

Yeoman workflow with Bower and Grunt is considered the holy trinity of modern frontend development, it solved the problems of boilerplate generation, package management, and common taks running.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is difference between Webpack and Browserify?

A

Browserify - Browsers don’t have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node.

Browserify pushes all features that don’t fit into it’s philosophy of running Node code in the browser into transforms and plug-ins.

At the same time, Browserify expects to be used only in a Node.js project. It recommends making small modules and posting them on NPM, and putting any configuration into the package.json file.

Webpack

Webpack is a very different beast. It learnt from tools such as Browserify, and Require.js and it never tries to actually be compatible with node.js. It is built, from the ground up, to help you manage static assets for the front-end. So, while in Browserify, to read strings from static files, you would use BRFS, which uses the native readFile function in Node, in Webpack, the common thing is to just overload the require function and use a loader that loads files that have names that match a certain pattern.

Webpack also doesn’t have any preference for commonjs over AMD. It supports all modules formats out of the box. So you could write your entire project with AMD, and still use Webpack. Obviously, that code isn’t going to work in Node without some work.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Name a drawback of ES6/7 for ReactJS.

A

Methods are no longer autobound, so you have use ‘bind’ when calling handlers from JSX.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Sidenote: What is the flaw of Inheritance (Java)?

A

Inheritance violates encapsulation, undercutting the most basic of OOP principles.

Quite simply: Inheritance requires children to understand their parents (which I can tell you from personal experience is a dangerous assumption).

Subclassing leads to bloat beacuse children inherit methods from their entire ancestry chain.

Locks new classes into prexisting concrete implementations, introducing brittleness.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q
A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are Decorators?

A

ES7 feature which allows you to augment the behavior of a function or class by wrapping it inside another function.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What are Arrow Functions?

A

This “arrow” method definition not only correctly binds this to the outer scope, but is also considerably shorter, which definitely counts when writing a lot of asynchronous code.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is Destructuring Assignements?

A

Destructuring assignments, introduced in ES6, allow you to have a compound object on the left side of an assignment:

var o = {p: 42, q: true};

var {p, q} = o;

console. log(p); // 42
console. log(q); // true

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Arguments: Default, Rest, and Spread

A
  • Able to set Default Argument… function http(endpoint, method=’GET’){}
  • … rest grabs rest of arugments into array
  • If you dont feel like calling “apply()”, you can just “spread” an array into function arguments.
    • myArguments = [‘foo’, ‘bar’, 123];
    • myFunction(…myArguments)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Generators

A

Generator is a Javascript function whose executino can be paused and then resumed later, remembering its state. Each time the ‘yield’ keyword is encountered, execution is paused, and the ‘yield’ argument is passed back to the calling object…

Exciting part is their ability to stop and resume function execution, which can be used to control asynchronous program flow and finally get rid of those pesky callback functions.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Async Functions

A

ES7 introduces ‘async’ and ‘await’ keywords, and removes the need for a generator library together.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Name positives of generators.

A
  • More concise
  • Straightforward
  • Allow us to use techniques that would be hard to implement with callbacks
    *
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is koa?

A

koa is a middleware library in Node.js using generators. It aims to replace express.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is the killer feature in koa?

A

The middleware chain flows not only downstream (with client request), but also upstream, allowing further modification to the server’s response.

17
Q

How does node.js relate to React?

A

Since node is written in Javascript, supports code sharing between back end and front end, allowing us to build isomorphic React web applications.