Week 14 - Session 1 - React (Bind Methods, Render Lifecycle)

blog image source
Following on from the previous sessions;
- Intro to React
- React (Class, Stateful Components, Event Handlers)

Bind Methods: One of the reasons to use React for development, is its popularity is that it relies heavily on all of the Javascript. On a basic level, it is taking a component’s state, a Javascript object, and using Javascript functions to manipulate that state. The page is then rendered to reflect those changes.

 The value of `this` depends on how the function was called, not where or when it was defined. Also, it is not affected by scope, like a variable would be. This means, that whenever you pass a function down another function, this will not refer to the same value. There are at least five ways to handle this context in React:
  • Use React.createClass
  • Bind in Render
  • Use Arrow Function in Render
  • Bind in Constructor
  • Arrow Function in Class Property
React Render Lifecycle: React enables to create components by invoking the React.createClass() method which expects a render method and triggers a lifecycle that can be hooked into via a number of so-called lifecycle methods.

 To get a clear idea of the lifecycle we will need to differentiate between the initial creation phase, where the component is created, and state and props changes triggered updates as well as the component unmounting phase.
  • Initialization - In this phase, the React component prepares for the upcoming tough journey, by setting up the initial states and default props.
  • Mounting - After preparing with basic needs, state and props, our React Component is ready to mount in the browser DOM. This phase gives hook methods for before and after mounting of components.
  • Updation - This phase starts when the react component has taken birth on the browser and grows by receiving new updates. The component can be updated by two ways, sending new props or updating the state.
  • Unmounting - In this phase, the component is not needed and the component will get unmounted from the DOM.

5 Approaches for Handling `this` - https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56
ReactJs component lifecycle methods - https://hackernoon.com/reactjs-component-lifecycle-methods-a-deep-dive-38275d9d13c0
Understanding the React Component Lifecycle - https://plnkr.co/edit/0cN0tu?p=preview)

Popular posts from this blog

Week 9 to 12 - Learning with MCR Codes

Image
My experience with  @MCRcodes   as a Quality Assurance Tester.  This is an evening part-time coding boot camp based in central Manchester which runs for 24 weeks, from February 2018 to July 2018. Week 9 (April 2018) - After spending two decades using the internet, I finally have an understanding how it works now, and the communication between the server and the client. Nice to create and run a simple server using Express and I now know what API actually means now, I think. Really appreciate how amazing and powerful the npm  package manager really  is, and looking forward to installing other future packages.  We have now started our back-end programming journey. Session 1 -  The Internet, the Web, HTTP Session 2 -  Web APIs & Express Week 10 - Really enjoying creating and reading test units for server assignments. Additionally, learning s ynchronous/a synchronous programming has been a tease.   Unfortunately, I was unable to attempt few classes due to unplanned c
Read more

Week 8 - Session 1 - JavaScript in the Browser

Image
blog image source HTML document as a nested set of boxes. Tags such as <body> and </body> enclose other tags, which in turn contain other tags or text. There is an object, which we can interact with to find out things such as what HTML tag it represents and which boxes and text it contains. This representation is called the Document Object Model, or DOM for short. The global binding document gives us access to these objects. Its documentElement property refers to the object representing the <html> tag. Since every HTML document has a head and a body, it also has head and body properties, pointing at those elements. When a web page is loaded, the browser creates a Document Object Model of the page, which is an object oriented representation of an HTML document, that acts as an interface between JavaScript and the document itself and allows the creation of dynamic web pages: JavaScript can add, change, and remove all of the HTML elements and attributes in the page
Read more

Week 9 - Session 1 - The Internet, the Web, HTTP

Image
blog image source The internet, a worldwide network of computer networks, a llows transfer of information between networks, and the information is transferred using the internet protocol suite (IP/TCP). One of the most commonly used services on the internet is the world wide web (www). A primary mode of transferring data (resources) over the internet for billions. The application protocol that makes the web work is hypertext transfer protocol. blog image source As web developers, we are mainly interested in HTTP,  a protocol that web browsers and web servers use to communicate with each other over the Internet.  The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers. HTTP works as a request-response protocol between a client and server. A web browser may be the client, and an application on a computer that hosts a website may be the server. How does the Internet work? -  https://developer.mozilla.org/en-US/docs/Learn/Common_
Read more