Scrum

A Better Way Of Building Products 

Scrum is a management and control process that cuts through complexity to focus on building products that meet business needs.

Management and teams are able to get their hands around the requirements and technologies, never let go, and deliver working products, incrementally and empirically.

Scrum itself is a simple framework for effective team collaboration on complex products.

Scrum Glossary

The Scrum Glossary is meant to represent an overview of Scrum-related terms.

 Some of the mentioned terms are not mandatory in Scrum, but have been added because they are commonly used in Scrum.

The Scrum Framework

Scrum is simple.

It is the opposite of a big collection of interwoven mandatory components.

 Scrum is not a methodology. Scrum implements the scientific method of empiricism.

Scrum replaces a programmed algorithmic approach with a heuristic one, with respect for people and self-organization to deal with unpredictability and solving complex problems.

The below graphic represents Scrum in Action as described by Ken Schwaber and Jeff Sutherland in their book Software in 30 Days taking us from planning through software delivery.  

The Scrum Values

 Although always considered to be a part of Scrum and often written about, in July 2016, the Scrum Values were added to The Scrum Guide.  

These values include Courage, Focus, Commitment, Respect, and Openness.

The Roles of the Scrum Team

The Scrum Team consists of a Product Owener, the Development Team, and a Scrum Master.

Scrum Teams are self-organizing and cross-functional.

Self-organizing teams choose how best to accomplish their work, rather than being directed by others outside the team.

Cross-functional teams have all competencies needed to accomplish the work without depending on others not part of the team.

The team model in Scrum is designed to optimize flexibility, creativity, and productivity.

The Scrum Events

Prescribed events are used in Scrum to create regularity and to minimize the need for meetings not defined in Scrum.

All events are time-boxed.

Once a Sprint begins, its duration is fixed and cannot be shortened or lengthened.

The remaining events may end whenever the purpose of the event is achieved, ensuring an appropriate amount of time is spent without allowing waste in the process.

The Scrum Events are:

• Sprit
• Sprint planning
• Daily Scrum
• Sprint Review
• Sprint Retrospective

Scrum Artifacts

Scrum’s artifacts represent work or value to provide transparency and opportunities for inspection and adaptation.

Artifacts defined by Scrum are specifically designed to maximize transparency of key information so that everybody has the same understanding of the artifact.

The Scrum Artifacts are:

• Product Backlog
• Sprint Backlog
• Increment

State and Lifecycle 

 

➞Consider the ticking clock example from one of the previous sections.

➞So far we have only learned one way to update the UI.

➞We call ReactDOM.render() to change the rendered output:

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

➞In this section, we will learn how to make the Clock component truly reusable and encapsulated. It will set up its own timer and update itself every second.

➞We can start by encapsulating how the clock looks:

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

➞However, it misses a crucial requirement: the fact that the Clock sets up a timer and updates the UI every second should be an implementation detail of the Clock.

➞Ideally we want to write this once and have the Clock update itself:

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

➞To implement this, we need to add "state" to the Clock component.

➞State is similar to props, but it is private and fully controlled by the component.

➞We mentioned before that components defined as classes have some additional features. 

➞Local state is exactly that: a feature available only to classes.

⟹Converting a Function to a Class

➞You can convert a functional component like Clock to a class in five steps:

1. Create an ES6 class with the same name that extends React.Component.
2. Add a single empty method to it called render().
3. Move the body of the function into the render() method.
4. Replace props with this.props in the render() body.
5. Delete the remaining empty function declaration.

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Clock is now defined as a class rather than a function.


➞This lets us use additional features such as local state and lifecycle hooks.

⟹Adding Local State to a Class

➞We will move the date from props to state in three steps:

1) Replace this.props.date with this.state.date in the render() method:

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

2) Add a class constructor that assigns the initial this.state:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Note how we pass props to the base constructor:

  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

Class components should always call the base constructor with props.


3) Remove the date prop from the <Clock /> element:

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

We will later add the timer code back to the component itself.


The result looks like this:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

Next, we'll make the Clock set up its own timer and update itself every second.

⟹Adding Lifecycle Methods to a Class

➞In applications with many components, it's very important to free up resources taken by the components when they are destroyed.

➞We want to set up a timer whenever the Clock is rendered to the DOM for the first time. This is called "mounting" in React.

➞We also want to clear that timer whenever the DOM produced by the Clock is removed. This is called "unmounting" in React.

➞We can declare special methods on the component class to run some code when a component mounts and unmounts:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

These methods are called "lifecycle hooks".

➞The componentDidMount() hook runs after the component output has been rendered to the DOM. This is a good place to set up a timer:

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

Note how we save the timer ID right on this.

➞While this.props is set up by React itself and this.state has a special meaning, you are free to add additional fields to the class manually if you need to store something that is not used for the visual output.

➞If you don't use something in render(), it shouldn't be in the state.

➞We will tear down the timer in the componentWillUnmount() lifecycle hook:

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

➞Finally, we will implement the tick() method that runs every second.

➞It will use this.setState() to schedule updates to the component local state:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

➞Now the clock ticks every second.

➞Let's quickly recap what's going on and the order in which the methods are called:

1) When <Clock /> is passed to ReactDOM.render(), React calls the constructor of the Clock component. 

➞Since Clock needs to display the current time, it initializes this.state with an object including the current time. 



2) React then calls the Clock component's render() method. This is how React learns what should be displayed on the screen. 


➞React then updates the DOM to match the Clock's render output.


3) When the Clock output is inserted in the DOM, React calls the componentDidMount() lifecycle hook. 

➞Inside it, the Clock component asks the browser to set up a timer to call tick() once a second.


4) Every second the browser calls the tick() method. Inside it, the Clock component schedules a UI update by calling setState() with an object containing the current time. 

➞Thanks to the setState() call, React knows the state has changed, and calls render() method again to learn what should be on the screen. 

➞This time, this.state.date in the render() method will be different, and so the render output will include the updated time. 

➞React updates the DOM accordingly.


5) If the Clock component is ever removed from the DOM, React calls the componentWillUnmount() lifecycle hook so the timer is stopped.

➞Using State Correctly

There are three things you should know about setState().

➞Do Not Modify State Directly

For example, this will not re-render a component:

// Wrong
this.state.comment = 'Hello';

Instead, use setState():

// Correct
this.setState({comment: 'Hello'});

The only place where you can assign this.state is the constructor.

⟹State Updates May Be Asynchronous

➞React may batch multiple setState() calls into a single update for performance.

 ➞Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.


➞For example, this code may fail to update the counter:

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

➞To fix it, use a second form of setState() that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument:

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

➞We used an arrow function above, but it also works with regular functions:

// Correct
this.setState(function(prevState, props) {
  return {
    counter: prevState.counter + props.increment
  };
}); 

⟹State Updates are Merged

➞When you call setState(), React merges the object you provide into the current state.

➞For example, your state may contain several independent variables:

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

➞Then you can update them independently with separate setState() calls:

  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

➞The merging is shallow, so this.setState({comments}) leaves this.state.posts intact, but completely replaces this.state.comments.

⟹The Data Flows Down

➞Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn't care whether it is defined as a function or a class.

➞This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it.

➞A component may choose to pass its state down as props to its child components:

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

➞This also works for user-defined components:

<FormattedDate date={this.state.date} />

➞The FormattedDate component would receive the date in its props and wouldn't know whether it came from the Clock's state, from the Clock's props, or was typed by hand:

function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

➞This is commonly called a "top-down" or "unidirectional" data flow. 

➞Any state is always owned by some specific component, and any data or UI derived from that state can only affect components "below" them in the tree.

➞If you imagine a component tree as a waterfall of props, each component's state is like an additional water source that joins it at an arbitrary point but also flows down.

➞To show that all components are truly isolated, we can create an App component that renders three <Clock>s:

function App() {
  return (
    <div>
      <Clock />
      <Clock />
      <Clock />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

➞Each Clock sets up its own timer and updates independently.

➞In React apps, whether a component is stateful or stateless is considered an implementation detail of the component that may change over time. 

➞You can use stateless components inside stateful components, and vice versa.

Components and Props

➞Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

➞Conceptually, components are like JavaScript functions. 

➞They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.

⟹Functional and Class Components

➞The simplest way to define a component is to write a JavaScript function:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

➞This function is a valid React component because it accepts a single "props" object argument with data and returns a React element. 

➞We call such components "functional" because they are literally JavaScript functions.

➞You can also use an ES6 class to define a component:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

➞The above two components are equivalent from React's point of view.

⟹Rendering a Component

➞Previously, we only encountered React elements that represent DOM tags:

const element = <div />;

➞However, elements can also represent user-defined components:

const element = <Welcome name="Sara" />;

➞When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. 

➞We call this object "props".

➞For example, this code renders "Hello, Sara" on the page:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

➞Let's recap what happens in this example:

1. We call ReactDOM.render() with the <Welcome name="Sara" /> element.
2.  
3. React calls the Welcome component with {name: 'Sara'} as the props.
4.  
5. Our Welcome component returns a <h1>Hello, Sara</h1> element as the result.
6.  
7. React DOM efficiently updates the DOM to match <h1>Hello, Sara</h1>.

➞Caveat:

➞Always start component names with a capital letter.

➞For example, <div /> represents a DOM tag, but <Welcome /> represents a component and requires Welcome to be in scope.

⟹Composing Components

➞Components can refer to other components in their output. 

➞This lets us use the same component abstraction for any level of detail. 

➞A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.

➞For example, we can create an App component that renders Welcome many times:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

➞Typically, new React apps have a single App component at the very top. 

➞However, if you integrate React into an existing app, you might start bottom-up with a small component like Button and gradually work your way to the top of the view hierarchy.

➞Caveat:

➞Components must return a single root element.

         ➞This is why we added a <div> to contain all the <Welcome /> elements.

⟹Extracting Components

➞Don't be afraid to split components into smaller components.

➞For example, consider this Comment component:

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

➞It accepts author (an object), text (a string), and date (a date) as props, and describes a comment on a social media website.

➞This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Let's extract a few components from it.

➞First, we will extract Avatar:

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

➞The Avatar doesn't need to know that it is being rendered inside a Comment. 

➞This is why we have given its prop a more generic name: user rather than author.

➞We recommend naming props from the component's own point of view rather than the context in which it is being used.

➞We can now simplify Comment a tiny bit:

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

➞Next, we will extract a UserInfo component that renders an Avatar next to user's name:

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

➞This lets us simplify Comment even further:

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

➞Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. 

➞A good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be a reusable component.

⟹Props are Read-Only

➞Whether you declare a component as a function or a class, it must never modify its own props. 

➞Consider this sum function:

function sum(a, b) {
  return a + b;
}

➞Such functions are called "pure" because they do not attempt to change their inputs, and always return the same result for the same inputs.

➞In contrast, this function is impure because it changes its own input:

function withdraw(account, amount) {
  account.total -= amount;
}

➞React is pretty flexible but it has a single strict rule:

➞All React components must act like pure functions with respect to their props.

➞Of course, application UIs are dynamic and change over time. 
 
➞State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.

 React authentication

➞Components - The Types and API
➞Props
➞State
➞JSX

⟹Components - The Types and API

React is basically about components.

A ReactJS app is just one big component made up of interoperable smaller components. Working with ReactJS means you are thinking in components most of the time.

An example of a component is an HTML 5 tag, say <header>. 

A header can have attributes, it can be styled and also possess its own behaviour. In ReactJS, you'll be able to build your own custom component using ES6 like so:

 class CustomComponent extends React.component {

render() {

  return '<h3> This is my custom component !!!</h3>';

  }

}

So, your component will now be <CustomComponent></CustomComponent>.

React provides some methods that are triggered at various points from creating a component up until the component is destroyed. 

This is called the Component's Lifecycle. 

You can declare methods to hook into the component's lifecycle to control the behaviour of components in your app. 

Some examples of these lifecycle hooks are componentDidMount(), componentWillMount(), componentWillUnmount(), shouldComponentUpdate(), componentWillUpdate() and more.

 ⟹componentWillMount() : 

This method is called before the component is initially rendered. So it is called before the render method is executed. You can't perform any type of DOM manipulation here because the component isn't available in the DOM yet.

 ⟹componentDidMount() :

This method is called right after the component has been rendered. So it is called immediately after the render method has been executed. It's the best place to perform network and AJAX calls.

 ⟹componentWillUnmount() : 

This method is called right before the component is removed from the DOM.

 ⟹shouldComponentUpdate() : 

This method determines if a re-rendering should occur or not. It is never called on initial rendering and it's always called before the render method.

 ⟹componentWillUpdate() : 

This method is called as soon as shouldComponentUpdate returns true. It is called just before the component is rendered with new data.

There are also methods like render and setState that you can use to render an element on the DOM and set the state of a component respectively.

Take this example for a spin and watch how these lifecycle hooks work. Observe the sequence of logs in the browser console.

import React, { Component } from 'react';
import { render } from 'react-dom';

class Experiment extends Component {

  componentWillMount() {
    console.log("This will mount");
  }

  componentDidMount() {
    console.log("This did mount");
  }

  componentWillUnmount() {
    console.log("This will unmount");
  }

  render() {
    console.log("I am just rendering like a boss");
    return <div>I got rendered!</div>;
  }

}

render(
  <Experiment />,
  document.getElementById("root")
);

⟹Props

Props is the short form for properties. Properties are attributes of a component. 

In fact, props are how components talk to each other. A tag in HTML such as <img> has an attribute, a.k.a prop called src that points to the location of an image.

In React, you can have two components, FatherComponent and SonComponent. Let's see how they can talk to each other.

class FatherComponent extends React.Component {
   render() {
      return <SonComponent quality="eye balls" />;
   }
}

 ⟹FatherComponent

 class SonComponent extends React.Component {
    render() {
      return <p> I am a true son. I have my father's "{ this.props.quality }" . </p>;
    }
}

⟹SonComponent

Now, when the page is served and a <FatherComponent> is called, I am a true son. I have my father's eyes will be rendered on the page.

⟹State

When developing ReactJS applications, it is important to know when and when not to use state in components. 

The question now is: When do I use state?, When do I use props? Props are data that the component depends on to render correctly. 

Most times, it comes from above, meaning it is passed down from a parent component to a child component. 

Like props, state holds information about the component but it is handled differently.

For example, the number of times a button was clicked, user input from a form, etc. 

When state changes in a component, the component automatically re-renders and updates the DOM.

Inside a component, state is managed using a setState function.

class Layout extends React.Component {
  constructor() {
    super();
    this.state = {
      position: "right"
    };
  }

  render() {
    return (
      { this.state.position }
    )
  }
}

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }

  render() {
    return (
      <button onClick={() => this.updateCount()} >
        Clicked {this.state.count} times
      </button>
    );
  }
} 

Now, this works great for simple applications like the one we'll build in this tutorial. 

For medium and large apps, it is recommended to use a state management library like Redux or MobX to avoid big balls of messy code and also to help you track every event happening within your app.

⟹JSX

Initially, looking at JSX seems awkward. 

JSX is the combination of HTML and JavaScript code in the same file. 

You can decide to name the extension of the file .jsx or just .js. An example of JSX is:

class Layout extends React.Component {
  render() {
    return <p>Hello {this.props.layoutStructure ?  'Frontend layout' : 'Backend Layout'}</p>;
  }
}