zenius

1. Push logic upwards / Keep it dumb - it(refers to Reusable Component) 
2. Allows extra props to be passed into the component.


<!--
 Software development is an art and it is not all about writing code, it is all about writing good code. 
 As I love to say software development is not about getting to the end goal, it is a journey and getting to that 
 understanding makes life more interesting 
 as you strive to not only get to the end but also understand everything that 
 will lead you to the end of your goal. Happy Coding!

zenius

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”*.


When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> 
and results in a string 'div' or 'span' passed to React.createElement. 
**Types that start with a capital letter like <Foo /> compile to React.createElement(Foo)** 
and correspond to a component defined or imported in your JavaScript file.

zenius

A function must pass two tests to be considered “pure”. 
1. Same inputs always return same outputs
  const add = (x, y) => x + y;

  add(2, 4); // 6

2. No side-effects
  A few examples of side-effects are: 
    1. Mutating your input
    2. console.log

zenius

Functions can be data too !!!
Pass them as data like boolean, number, string and Array. 

const isEven = (num) => num % 2 === 0;  // here "function" is assigned to variable "isEven" 
const result = [1, 2, 3, 4].filter(isEven); // here function "isEven" is passed as an argument.

console.log({ result }); // { result: [ 2, 4 ] }

***A function that takes and/or returns another function is called a higher-order function. 
It’s “higher-order” because it operates on functions besides basic data types.***

zenius

Getting functions to work together is function composition. 

const uppercaseString = (string) => string.toUpperCase(); 
const reverseString = (string) => string.split("").reverse().join("");  

const upperAndReverseName = (string) => { 
  const upperCasedName = uppercaseString(name); 
  return reverseString(upperCasedName); 
}; 

zenius

/*Unary function */

function unary(fn){
  return function unaryDecorator(first){
    return fn.call(this, first);
  }
}

zenius

Your template is the data model which your Sitecore items will instantiate, and 
your Rendering is a reference to the code you’re writing in Visual Studio that brings that data to the page.

zenius

 The architecture pattern described by Helix is often referred to as Component-based Architecture or Modular Architecture.

zenius

1. Project Layer - The Project layer provides the context of the solution. 
This means the actual cohesive website or channel output from the implementation, 
such as the page types, layout and graphical design. 
It is on this layer that all the features of the solution are stitched together into a cohesive solution that fits the requirements.

Least stable layer

***Project layer adheres to "Stable Dependencies Principle" ***

2. Feature layer-  contains concrete features of the solution as understood by the business owners and editors of the solution, 

zenius

The content fields for business and presentation logic all live in Interface Templates – 
never in Page Type templates or Datasource Templates. Therefore, these content fields live with the logic that use them