Understanding The React Source Code — Initial Rendering (Class Component) IV

Understanding The #ReactJS Source #Code IV:  via @hackernoon #Javascript

  • /App.css’;class App extends Component { constructor(props) { super(props); this.state = { desc: ‘start’, }; }render() { return ( div className=”App” div className=”App-header” img src=”main.jpg” className=”App-logo” alt=”logo” / h1 “Welcom to React” /h1 /div p className=”App-intro” { this.state.desc } /p /div ); }}export default App;App@App.jsAs mentioned, the component above is rendered…
  • /App.css’;class App extends Component { constructor(props) { super(props); this.state = { desc: ‘start’, }; } render() { return React.createElement( ‘div’, { className: ‘App’ }, React.createElement( ‘div’, { className: ‘App-header’ }, React.createElement( ‘img’, { src: “main.jpg”, className: ‘App-logo’, alt: ‘logo’ } ), React.createElement( ‘h1’, null, ‘ “Welcom to React” ‘ )…
  • Initialize designated data structure:The step is the same as well:1) ReactDOMContainerInfo[ins] represents the container DOM element, TopLevelWrapper is instantiated (TopLevelWrapper[ins]) and is set to alongside the initialization of other properties;3) Again, mountComponentIntoNode is the cross point of upper and lower half, within which returns a complete DOMLazyTree that can be…
  • After those operations complete, the logic processes to the first ramification that is specific to class a `ReactCompositeComponent` from `ReactElement[1]`This step strips the wrapper and creates another ReactCompositeComponent instance to reflect the class component, App.The designated data structure:The call stack in | | | /* we are here */ |…
  • _renderedComponent = child; var markup = transaction, hostParent, hostContainerInfo, debugID); // scr: 3)…// scr: DEV code return designated data structure:The call stack in | | | upper half | /* we are here */ | |Same as in {post two}, the most important task of this step is to instantiate…

Understanding The React Source Code I
Understanding The React Source Code II
Understanding The React Source Code III
Understanding The React Source Code IV (this one) We have completed the rendering…

Understanding The React Source Code — Initial Rendering (Class Component) IVPhoto by Joshua Sortino on UnsplashUnderstanding The React Source Code IUnderstanding The React Source Code IIUnderstanding The React Source Code IIIUnderstanding The React Source Code IV (this one)We have completed the rendering process of a simple component. This time we are going to explore more ramifications of this process by discussing how a class component (a typical one we might use in everyday development) is rendered.Files used in this article: the same as post one and twoI use {} to reference the previous post that is relevant to the methods (or logic process) being discussed.The component named App is similar to what I gave in the beginning of post one, in which we considered it too complex for beginners. But since we have leveled-up a bit, it does not look that daunting anymore.import React, { Component } from ‘react’;import logo from ‘./logo.svg’;import ‘./App.css’;class App extends Component { constructor(props) { super(props); this.state = { desc: ‘start’, }; }render() { return ( div className=”App” div className=”App-header” img src=”main.jpg” className=”App-logo” alt=”logo” / h1 “Welcom to React” /h1 /div p className=”App-intro” { this.state.desc } /p /div ); }}export default App;App@App.jsAs mentioned, the component above is rendered using:ReactDOM.render( App /, the babeled code:import React, { Component } from ‘react’;import logo from ‘./logo.svg’;import ‘./App.css’;class App extends Component { constructor(props) { super(props); this.state = { desc: ‘start’, }; } render() { return React.createElement( ‘div’, { className: ‘App’ }, React.createElement( ‘div’, { className: ‘App-header’ }, React.createElement( ‘img’, { src: “main.jpg”, className:…

Understanding The React Source Code — Initial Rendering (Class Component) IV