Questions for myself about React JS & React Native

Image for post
Image for post

This article includes some basic term and fundamentals approach for React JS and & React Native. If you start new and can not understand some terms. I believe you can find good explanations below.

1- What is React really doing ?

React provides tools for us to build our own components and use them just like built-in HTML elements. React is a view library.

2- Explain declarative

A programming model where we describe the result we want to achieve. HTML is declarative.

3- Explain Imperative

Programming model where we describe the steps to achieve our result. JavaScript would be imperative.

4- What is the difference DOM and Virtual DOM ?

DOM is an interface for managing the elements in an HTML page.Virtual DOM is a JavaScript representation of a DOM tree. Everything you do with Virtual DOM does not apply directly to the DOM. It waits for a while and applies all the changes in one step, improving the performance by reducing the events to the minimum.

5- What is the difference JSX and Babel.js ?

JSX is an extension to the JavaScript language that provides an XML syntax. We use Babel.js to translate JSX files into standard JavaScript?

6- What is Components ?

Components are the core building blocks of a React application. They are responsible for rendering data to the screen.

7- How to return double DOM element ?

React component must return only a single virtual DOM element.

8- What is the main axis in React Native apps?

Y Axis

9- Explain flex number

The larger the number the, more space it takes up on the screen.

10- What is the job of reducers?

They listen for a particular action

11- How to customize our components ?

We can use properties ( PROP ) to customize our components. PROP allows us to build reusable and customizable components. In short, PROP is the structure that communicates between the components.

12- What is the difference Functional Component & Class Component

Class components have direct access to your stores state and hold state.

  • Used for dynamic sources of data
  • Can handle fetching data and user events
  • More code to write

Functional components just receive props and render them to the page, then you have a ‘stateless component’

  • Used for presenting static data
  • Can’t handle fetching data
  • Easy to write.

13- Explain Composition

A method of combining many smaller or simpler pieces to create a larger piece.

14- Explain Decompose

Break a large component in to smaller components that can be composed together. Decomposing provides two benefits.

  • First, we can take pieces of repeated code and turn them into a reusable component.
  • Second, it’s easier to work with many small components

15- What is relation between Reducer, State & Action ?

Reducer is a function that returns some data. Reducer has always called two arguments state and action.

Action is plain javascript object that tells the reducer how to change its data.

State is data for our app to use. The State is used for data that is to be used or changed in the current component.

16– When should we break a component into smaller components?

  • When the component has too much markup
  • When the component does too many things
  • When the component is reused

17- Why should I use array.map

array.map function allows me to create a list of JSX elements from an array of JavaScript values

18- What is setState ?

We are using for rendering view. Because React needs to change state for rendering view. We are doing this rendering with setState. We can also use re-rendering with forceUpdate keyword.

19- Explain export default ?

We allow class to be called directly from another JavaScript file.

20- What is the difference const and let ?

The basic difference between them is const and let statements only apply to the block they are in

21- What is advantage of ES6 ?

ES6 allows us to program object oriented with JavaScript. We have one special function; constructor. The constructor is called automatically when a class is created. We can also define static class functions with ‘static’ code. The keyword we are using for inheritance, extends

22- Explain componentDidMount( )

React.Component is our most basic class. Each component has its own lifecycle methods. We collect these methods in 3 groups. Mounting Methods, UnMounting Methods and Updating Methods.

componentDidMount is an UnMounting method. componentDidMount directly affected the Virtual DOM that it needs to be defined. You will call an API, this method is the most convenient place to fetch something.

23- Why should I use CodePush?

Because CodePush allows us to push updates to our apps without going through the traditional App Store updating process such as Apple App Store or Google Play. OTA Updates = CodePush is a tool developed by Microsoft to quickly and easily manage and update your production React Native JavaScript bundles.

24- Is it possible to use React Native with existing native apps?

There are two possible solution. One them is React Native. Another one is Electrode Native. The difference of Electrode Native is React Native code inside the app can be updated over the air without ( CodePush ) forcing users to download a new version of the native app.

25- What is Redux ?

Redux is a framework that provides state management for JavaScript applications. Redux tracks every version of a state and allows to return to the old version. There are some changes that share the same basics as Flux technology.

  • State change logic’i
  • The current state itself

There is a problem loading 2 states on the same object. Redux has store logic. It keeps the object in the store and loses the old object.

26- What are the methods that are invoked after a component’s state or props are changed ?

  • componentWillReceiveProps( )
  • shouldComponentUpdate( )
  • componentWillUpdate( )
  • render( )
  • componentDidUpdate( )

27- What is State ?

State, an object held within React components and managed only by themselves. A structure that is difficult to manage in large applications. State update can not be done directly in application.

28- What is Containers ?

Containers are responsible for fetching data and rendering their components.

29- I need error reporting tools

LogRocket integrates with error reporting tools like Sentry and Bugsnag to add video and logs to every bug report.

30- What is babel-preset doing ?

This translates our React Native code into the language that our IOS and Android simulators will understand.

31- What does it mean to mount a component?

Browsers have a DOM (Document Object Model) structure. This document <html> tag starts with <html> tags, and continues with other <html> tags in <head>, <body>. If a component is mounted, it means that the component is placed in the DOM, and it is visible in the browser.

32- What is Flux ?

Flux is to manage the interface data flowing in the application.

33- What is Flux Structure ?

There are 4 steps;

  • First, Action Creator: If we want to start a process in Flux architecture, we have to apply to the action creator. Action Creator expects type and payload information from us.
  • Second, Dispatcher: When an action is received from the Action Creator, it is responsible for directing that action to the next instance. To do this, the Dispatcher contains a list of all the stores.
  • Third, Stores: Stores all stats in the application. The state update rules are also stored in the Store.
  • Fourth, View: View is responsible for displaying the incoming data to the user.

34- What does componentWillMount do ?

We should not change the state in this method and run the render () method again. This method should only used when rendering the server.

35- What is the difference state and props ?

Props works in read-only mode, where information sent by the parent component is passed to the child component, while state stores the state information within the component.

That’s it. 😃😃😃 Thanks for reading.

You can check my previous article here.

Written by

Health Research Program’s iOS Developer, currently lives in Washington, D.C http://www.about.me/durul

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