Understanding The React Source Code — Initial Rendering (Simple Component) I

  • var childrenLength = arguments.length — 2; if (childrenLength === 1) { props.children = children; // scr: one child is stored as object } else if (childrenLength 1) { var childArray = Array(childrenLength); for (var i = 0; i childrenLength; i++) { childArray[i] = arguments[i + 2]; // scr: multiple children…
  • …var ReactElement = function(type, key, ref, self, source, owner, props) { // This tag allow us to uniquely identify this as a React Element $$typeof: REACT_ELEMENT_TYPE,// Built-in properties that belong on the element type: // scr: ————– ‘h1’ key: // scr: ————– not of interest for now ref: // scr:…
  • The name TopLevelWrapper explains what it does — wrap the top level element (of the component tree passed through render()):An important definition here is that of TopLevelWrapper, I type three stars here *** for you to CTL-f, as you might need to come back to this definition later:…var TopLevelWrapper = function() {…
  • The only line that is effective before the logic processes to next step is… var nextWrappedElement = { child: nextElement, that it should be easy to see how the target object of this step is constructed with React.createElement, the function we just examined in the last a `ReactCompositeComponent` using `ReactElement[2]`The…
  • In our context, it checks the ReactElement[2]’s type (i.e., TopLevelWrapper) and creates a ReactCompositeComponent accordingly.function shouldHaveDebugID) { var instance;… } else if (typeof node === ‘object’) { var element = node; var type = element.type;… // Special case string values if (typeof element.type === ‘string’) {… } else if {……

UI updating, in its essential, is data change. React offers a straightforward and intuitive way to program front-end Apps as all the moving parts are converged in the form of states. Code review of…
Continue reading “Understanding The React Source Code — Initial Rendering (Simple Component) I”

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…
Continue reading “Understanding The React Source Code — Initial Rendering (Class Component) IV”

React Users Petition Facebook to Re-license React.js after Apache Software Foundation Bans BSD+Patents License in Dependencies – WordPress Tavern

React Users Petition Facebook to Re-license React.js after Apache Software Foundation Bans…

  • Hopefully this morning’s guidance to PMCs can be adjusted since I don’t think any of us see a bunch of extra engineering effort as a desirable thing across the ASF projects which are already making use of RocksDB

    In light of the ASF Legal Affairs Committee’s decision to disallow the BSD+Patents License in Apache projects, ASF member Joan Touzet opened an issue on the React repository urging Facebook to consider re-licensing React.js under Apache License v2.0 and GPL 2:

    This has led to a lot of upset and frustration in the Apache community, especially from projects requiring similarly-licensed code as direct dependencies – the chief of these being RocksDB.

  • Although the re-licensing of RocksDB solves that particular project’s problem, ASF’s ban of Facebook’s BSD+Patents license means other widely used technologies from Facebook, including React.js, are still banned.
  • Greg Stein, commenting on behalf of ASF, clarified the reasons behind the organization’s decision to ban Facebook’s BSD+Patents license:

    Stein said it was not ASF’s lawyers who made the decision but rather the organization’s policy decision to “disallow FB/BSD+Patent license to be mixed into the software the Foundation releases to users.”

  • The termination provision in Facebook’s BSD+Patents License continues to be unpopular and is regarded suspiciously by many open source project maintainers.
  • Robert Pierce, a partner at El Camino Legal, contends that the license termination provision ought to be impermissible in an open source license because it exists to protect Facebook from patent litigation that is completely unrelated to React code:

    Facebook touts React.js as open source software.

The Apache Software Foundation issued a notice over the weekend, indicating that it has added Facebook’s BSD+Patents license to its Category X list of disallowed licenses for Apache PMC members. This is the license that Facebook uses for most of its open source projects.
Continue reading “React Users Petition Facebook to Re-license React.js after Apache Software Foundation Bans BSD+Patents License in Dependencies – WordPress Tavern”