Understanding React

Some basics of react in simple words:

what are props?

props – props are like html attributes and pass this to any component. so, component will have access to props.

what is state?

state is an object that lives with the component and responsible for keeping track of changing data within component. that change could be result of user interaction like click etc.

In other words, state is an object that lives inside a component and holds the data for self need or for its children.

When DOM Re-render?

Only when internal state or external props get changed, then component will re-render

what is ref?

ref allows us to react to reference an actual dom node on the page.

stateless component

stateless arrow function syntax can be used instead of regular class XYZ extends React.Component.

const Header = (props) => ();

For more check this article.

React Context

Explained clearly on official documention: https://reactjs.org/docs/context.html#dynamic-context

getDefaultProps

The result of getDefaultProps() will be cached and used to ensure that this.props.value will have a value if it was not specified by the parent component.

componentWillMount()

Triggered before render().

componentDidMount

Called after render. Can access refs. The componentDidMount() method of child components is invoked before that of parent components. This is the place to call external libraries, use setTimeout, make ajax requests

shouldComponentUpdate(nextProps, nextState) – Update only

called when there are new props or state changes. return false to prevent a render. good for performance.

componentWillReceiveProps(nextProps) – Update only

Called before render when props change. Access to old props. It is not triggered after the component is mounted.

componentWillUpdate(nextProps, nextState)

Invoked immediately before rendering when new props or state are being received. Not called for the initial render. Cannot use setState in this method. Use componentWillReceiveProps instead. Use this as an opportunity to perform preparation before an update occurs.

render

Triggered when the state changes.

componentDidUpdate(prevState, prevProps) – Update only

Access to prevState, prevProps Use this as an opportunity to operate on the DOM when the component has been updated.

componentWillUnmount

Clean up event bindings, etc.

React CheatSheet

https://reactcheatsheet.com/

Controlled Form Inputs

Form is stateful and this is only stateful part of UI. Inputs are not stateful and display the data that are provided with. One we edit text, we will dispatch change event via onChange call back and our form handles and stores in state. Then it passes the new value to input component. This entire pattern is known as controlled form inputs

Use of Render Method in React?

Each time the component render/re-render, it has to execute all the statements in it. To make sure view is in sync.

Advertisements

VS Code Extensions

These are the best extensions that i configured to enable best features and rich UX as shown below..

Some of the VS Code features here..

Rename All Occurrences

Refactoring is a necessary aspect of writing and maintaining clean code, but it can be quite the headache — especially when you’re refactoring a large module or an otherwise huge chunk of code. So instead of hunting through dozens of files just to rename a variable or method, let VS Code do it for you.

If you select a variable/method and hit F2, you can edit the name and it will change every instance of that variable’s name throughout the entire current working project.

If you only want to change within the current file, use the Command + F2 (on Mac) or Ctrl + F2 (on Windows) keyboard shortcut and VS Code will spawn a cursor at every instance throughout the current file.

Go to Definition

When you’re programming or scripting, often times you’ll run into a variable or method that you don’t recognize. So what do you do? You could spend several minutes searching for the right file, or you could press Command (on Mac) or Ctrl (on Windows) key and click the variable/method with your mouse. VS Code will take you to it’s definition right away.

Or you could just hover your cursor over the variable/method along with pressing the Command (on Mac) or Ctrl (on Windows) key, it will shows you the definition right in line where your cursor is.

Edit Multiple Lines at Once

If you ever need to insert or delete multiple instances of text throughout a document, all you have to do is create multiple cursors. You can do this by holding down Option (on Mac) or Alt (on Windows) and clicking anywhere in the text. Every click creates a new cursor.

This is particularly useful for things like HTML, where you might want to add many instances of the same class or change the format of several hyperlinks.

Few More here
https://medium.com/@i_AnkurBiswas/pro-tips-for-visual-studio-code-to-be-productive-in-2018-d5252e914561
https://dev.to/seankilleen/vscode-tip-watching-files-1hkk

Shortcuts

mac: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
windows: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

React Redux Vs Context API

Folks,

I am not sure of the many points that covers in different articles explaining Redux Vs Context API.

Context API: https://reactjs.org/docs/context.html

In my experience, the difference i found is,

Context API cannot change the states and its only meant to carry

Also, if you are using router in your project where you carry the context in parent and used child as a router, in that case context will not work.

Say,

App->xyz(parent) -> abc(child)

If you use provider in parent and access abc using router(localhost:3000/abc) without App/xyz, then you are not carrying your context and it will not work in that way. In this case, you have to use Redux alone.

In simple words,

redux is like a ‘var’ keyword, where you can use/access and also update the value in that variable. ( I mean you can access state and also update the state)

context API is like a ‘const’ keyword, you can only use/access it and cannot update it.