Introduction - sameeri/Code-React GitHub Wiki

React Key notes:

  • React is a view library. It can be thought of as the 'V' in an MVC framework. For example, Angular, which is an MVC framework, can use react for it's V.
  • React helps you to think in terms of re-usable components.
  • It helps you build these components, by providing an interface, an API.
  • So essentially it's a component builder.
  • React also helps render, and manage a component.
  • React uses a clever way of representing a DOM structure as a JavaScript object called Virtual DOM.
  • To update any changes on the screen based on data changes, interactions, React just observes the differences and only updates the differences. This makes React super fast.

Building components:

"React is all about building reusable components. In fact, with React the only thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy." - React

  • The React library exposes a global React namespace that developers can interact with.
  • You can use console.log(React) to see what the API looks like.
  • At the core of React, you should try to think about it as a Component Builder.
  • To build a component, the api, createClass(specificationObject) should be used.
  • When you call React.createClass(specificationObject), you are just creating a component definition. That's all. This does not mean, the component will automatically appear on the screen.
  • To make it appear on the screen, you would use another API method, React.render( ReactElement element, DOMElement container) or React.renderComponent( ReactElement element, DOMElement container).
  • This component definition that you create can be used as many times you want in your application.
  • It can be separated out into it's own project as a standalone, and you can build a library of such components for use in all your applications. All your applications use the same components, the same terminology.

What is a specification object?

  • A component specification object specifies details about the Component you are going to create.
  • A component could be simple or could be very complex.
  • The specification object abides by the rules of React.
  • It should have a render() function, that would be invoked by React when it is instructed to render a component onto the screen using React.render().
  • In other words, after you create a component, you would like to use the component and make it appear on the screen, in your application. To do this, you would invoke React.render() and React would call the component's render() function internally, to actually render the component onto the screen.
  • The render() should return a single child(node). The single node can be complex in it's structure.

Component Structure

  • If you take any html element, you can think of it as a component too.
  • We can call them native html components.
  • They have already been specified and the browser, like react is it's manager.
  • Any html component has three things if you observe.
  • Structure, Appearance, Behavior.
  • For example, a button.
  • Each react component would have the same elements as well.
  • React components promote code-reuse, and composition.
  • Thus React provides a higher layer of abstraction to think about your components.
  • A react component can be built using html elements, other react components.
  • A component, if seen as a black box, can have some input sent to it. Input sent to a component is via a JavaScript object and is made available to the component using this.props when react creates an instance of the component. The input, this.props is an immutable object. So you should not try to change it.
  • You can think of a component having an initial configuration and that is this.props.
  • Inside this black box, it can have it's own data. This is described by react as internal state data of a component. This internal data, is provided to the component as this.state. Any data that would change would be stored here. Any data that the component would need(treat is a view-model, for the view you are rendering, if it helps you visualize this concept).
  • The this.state should be only changed(this is a recommendation) via the setState() function.
  • If the this.state object changes via the setState() method, then React would automatically re-render the component.

Component Manager

  • Thus, React is also a component manager. It helps you specify components, create the components for you from such a specification and render it on the screen.
  • In the whole process, React is doing a bunch of stuff.
  • Let's reiterate.
  • A developer wants to create a component.
  • He describes a component and makes a component specification using React.createClass(specificationObject).
  • This description tells React, what the component structure is, how it should appear, and the behavior of the component when a user interacts with it.
  • A developer would now want to use this component.
  • She would use, React.render(Component, DOMElementContainer) or React.renderComponent(Component, DOMElementContainer) to render the component.
  • The component class is found by React, an instance of it is created, and eventually React puts it on the screen.
  • The user interacts with the component, and it might result in some kind of internal data change via setState(), and then this makes React() to re-render the component.
  • But instead of doing a complete re-render, it partially does using a concept called Virtual DOM. It checks against changes and only updates the changes.
  • This diffing and partial re-rendering is what makes React ultra-fast.
  • So, a component, in the view of React has a lifecylce, from specification, to rendering to updating...
  • To enable developer to do things with their components, just as any other framework, library, it provides, certain life-cycle event hooks.
  • These life cycle methods when implemented, React would invoke them internally!
  • The various methods are executed at specific points in a component's lifecycle.