- Mô tả qua life cycle React
- Tại sao phải dùng Redux? Giải thích và thuyết phục cho 1 người mới?
- Sẽ in ra thế nào?
console.log(1) for (var i = 1; i < 4; i++) { console.log(i) } console.log(10) - Tại sao để style trước script trên header?
- Viết hàm sao cho
add(3, 5) = 8 add(3)(5) = 8 - Dùng css coding standard nào (bem, ...)
- Dùng Bem css chưa, nó là cái gì, cách dùng như thế nào?
- Dùng postcss chưa
- Dùng css framework nào chưa?
- Bootstrap 3 và 4 khác nhau thế nào?
- Đã viết grid system = css chưa, viết = less, sass hay preprocessor nào chưa, viết như thế nào?
- Server-side rendering (ssr) react là gì?
- Tại sao phải dùng ssr?
- Khi ssr thì trạng thái ban đầu store ko có dữ liệu thì giải quyết thế nào?
- Làm sao để tối ưu 1 trang web bị chậm? Có những cách nào? (js, css, image...)
- Làm sao để biết trang web chậm phần nào (dùng tool)?
- Có tool nào hay website nào hỗ trợ detect trang web chậm ko?
- Trang web có list nhiều post, làm sao để tối ưu
- Làm sao để tối ưu file bundle size rất to mà webpack tạo ra
- Viết slider hay plugin nào đó = js thuần chưa (viết như thế nào)
- Bấm liên tục vào nút next thì xử lý thế nào
- Phân biệt cookie, localStorage, sessionStorage
- Config webpack chưa
- Để thành phần connect api ở đâu trong life cycle react, tại sao để thế?
- Dùng service worker chưa, nó là cái gì?
- Dùng animation frame chưa (1 dạng upgrade của setTimeout), resize liên tục 1 cửa sổ, làm sao hạn chế bắn ra event liên tục
- Làm dự án nhiều nhất là bao nhiêu người? Bao nhiêu frontend?
- Xây dựng bộ kit để code react từ đầu chưa? Hoặc có dùng bộ nào ko?
- ... (1 vài câu nữa ko nhớ ngay được)
HTML Where should you place the Css and Js <script> ? Explain your reason ? should be within , <script> shoulkd be place before body close . Because : -script need time to parse -script can be die, make page load slower -css need to be parse asap to render the page Optimize Performance Have you ever been optimize HTML, CSS, JS, Image ? Using pagespeed/insights to measure performance Have you ever been optimize ReactJs Using lazy loading by router Redux The best way to reusable reducer logic ? Use reducer name
Explain the difference between angular 1 and 2 This uses use JavaScript to build the application Introduced the typescript to write the application Based on controllers concept This is a component based UI approach Not a mobile friendly framework Developed considering mobile platform Difficulty in SEO friendly application development Ease to create SEO friendly applications Have you ever work with angular universal Explain the advantage and disadvantage of SPA In Angular, how you can communicate between children and parent Using @Input and @Output direction Choose correct form control class name which is set to true when value is modified a. .ng-valid, b. .ng-invalid, c. .ng-pending, d. .ng-pristine, e. .ng-dirty, f. .ng-untouched,g. .ng-touched .ng-dirty Example of using Http Inteceptor cache, authentication, error log
View Encapsulation type? ViewEncapsulation.None - No Shadow DOM at all. Therefore, also no style encapsulation. ViewEncapsulation.Emulated - No Shadow DOM but style encapsulation emulation. ViewEncapsulation.Native - Native Shadow DOM with all it’s goodness. Life Cycle: list some life cycle event ngOnChanges: When the value of a data bound property changes, then this method is called. ngOnInit: This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens. ngDoCheck: This is for the detection and to act on changes that Angular can't or won't detect on its own. ngAfterContentInit: This is called in response after Angular projects external content into the component's view. ngAfterContentChecked: This is called in response after Angular checks the content projected into the component. ngAfterViewInit: This is called in response after Angular initializes the component's views and child views. ngAfterViewChecked: This is called in response after Angular checks the component's views and child views. ngOnDestroy: This is the cleanup phase just before Angular destroys the directive/component. Do you know ChangeDetectionStrategy? Have you ever use it to improve performance? OnPush means that the change detector's mode will be set to CheckOnce during hydration. Default means that the change detector's mode will be set to CheckAlways during hydration.
What is the difference between pure and impure pipe?
A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe. For example, any changes to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).
An impure pipe is called for every change detection cycle no matter whether the value or parameters changes. i.e, An impure pipe is called often, as often as every keystroke or mouse-move.
Have you ever use Async pipe? The AsyncPipe subscribes to an observable or promise and returns the latest value it has emitted. When a new value is emitted, the pipe marks the component to be checked for changes.
Explain the lifecycle methods of React components
Mouting
These methods are called in the following order when an instance of a component is being created and inserted into the DOM:
constructor() static getDerivedStateFromProps() (don't need to answer) render() componentDidMount() Updating
An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:
static getDerivedStateFromProps() (don't need to answer) shouldComponentUpdate() render() getSnapshotBeforeUpdate() (don't need to answer) componentDidUpdate() Unmounting
This method is called when a component is being removed from the DOM:
componentWillUnmount() componentDidMount() and render(). Which run first? render() -> componentDidMount() What is Redux? Why use Redux? Redux is a state management library for React
All app data will store in a single source, easy to pass data between components, just connect to Redux store
What are components of Redux? How the data flows through Redux? Action, Reducer, Store, View
View -> Action -> Reducer -> Store -> View (updated)
What are differences between Component and Pure Component? React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison. e.g.
More info: https://reactjs.org/docs/react-api.html#reactpurecomponent
See this pen: https://codepen.io/thanh4890/pen/vbBgVB
What are differences between stateless and stateful component? Stateful is defined as a class, it has lifecycle, state
Stateless is just a function (but with the born of react hook, it lets you use state and other React features without writing a class)
What are higher order components (HOC)? When use? Show me an example Higher Order Component is an advanced way of reusing the component logic. Basically, it’s a pattern that is derived from React’s compositional nature. HOC are custom components which wrap another component within it.
Example: https://reactjs.org/docs/higher-order-components.html
Large bundle file size that compiles with Webpack. How to optimize? webpack ensure https://webpack.js.org/guides/code-splitting/
dynamic import https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
React.lazy, Suspense https://reactjs.org/docs/code-splitting.html#reactlazy
What do you use for testing React app? jest, mocha, expect (included in jest), enzyme What packages do you use for testing React components? enzyme, react-test-renderer What is React server side rendering? Why use? Server will render first state of component. Your app will run faster and SEO friendly Have you ever used GraphQL in React app? (through GatsbyJS, react-apollo, ...)
What are benefits when using GraphQL?
Write query like js object to get needed response data,
don't need to make a request via REST API,
just use fetched data as props
More: https://www.howtographql.com/react-apollo/0-introduction/
I have a login form, after filling user name and password, want to show protected content. How do you do? store login state in localStorage, and redirect to protected route contains proctected content
If not use localStorage, will store in redux state
If not use redux state, will store in react state
Did you join some React communities? Facebook
React Vietnam https://www.facebook.com/groups/reactvietnam Pure React https://www.facebook.com/groups/purereact/ jsland https://www.facebook.com/groups/jsland/ Reddit
https://www.reddit.com/r/reactjs/ Stackoverflow
https://stackoverflow.com/questions/tagged/reactjs More: https://reactjs.org/community/support.html
What is Closure? Write function to do these 2 work ? add(3,5) , add(3)(5) add = (a,b) => b ? a+b : (b) => a+b Can you write arrow function by pure function in ES5 Explain difference between translate(X,Y) and margin(X,Y) , padding(X,Y), which is better ? Do you know about event loop ? Do you know the diffrence between throttle and debounce ? - debounce: run only the last called function, example: resize of window
- throttle: make sure a function be called only one time in a period of time: continous scroll to load new content Do you know requestAnimationFrame ? Explain the difference between requestAnimationFrame and setTimeout code line inside setTimeOut will be executed after all the code in callstack are executed requestAnimationFrame will depends on frame rendering process so it will make ui changes smoothly Do you know about websocket ? Have you ever have problem when working with websocket ? Explain event delegation, Describe event bubbling. What's the difference between host objects and native objects? What is a closure, and how/why would you use one? Difference between 2 events: windows load vs DOMContentLoaded ? The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page). What’s the difference between “var” vs “let” vs “const” What are the result of “console.log(1<2<3)” and “console.log(3>2>1)”? why? console.log(1<2<3) --> true console.log(3>2>1) --> false That is because it is evaluated from left to right Describe how setTimeout(fn,0) works. (has example) What’s the difference between setTimeout. setImmediate and process-nextTick? What’s the difference between == vs === and null vs undefined? What is a Promise? What’s the difference between
async function getAll () {const r1 = await getValueA(); const r2 = await getValueB(); return {r1, r2 }; } vs async function getAll () {const r= await Promise.all([ getValueA, getValueB]); return r.reduce((t,v) => t * v, 0); }
Have you ever been optimize HTML, CSS, JS, Image ? Using pagespeed/insights to measure performance Chrome devtools, Lighthouse (now added to Chrome devtools) are also friendly options to use Have you ever been optimize Angular ? Using OnPush, Using TrackBy, Avoid Computing Values in the Template, Disable Change Detection, Using Lazy Loading Have you ever been optimize ReactJs Using lazy loading by router What tools would you use to find a performance bug in your code? What are some ways you may improve your website's scrolling performance? Explain the difference between layout, painting and compositing.