Notes

reactDoc.docx
==============

Index:

• Basic
• Flow Type
• ES6 Feature
• Arrow function
• Map
• Spread operator:
• Formik
• Styled Component
• Flex and Grid
• Links


Basic:

React will efficiently update and render just the right components when your data changes.


Unidirectional data flow and Flux − React implements one-way data flow which makes it easy to reason about your app. Flux is a pattern that helps keeping your data unidirectional.

It covers only the view layer of the app.

Note: Create React app
If you want to do it, here are the steps to follow:
1. Make sure you have a recent version of Node.js installed.
2. Follow the installation instructions to create a new project.

npm install -g create-react-app
create-react-app my-app
cd my-app

The Following things are required to make a react component
1. react
2. react-dom
3. react-router-dom

React Component
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
React.component is an abstract base class so it rarely makes sense to refer to React.Component directly. Instead, you will typically subclass it, and define at least a render() method.
Normally you would define a React component as a plain JavaScript class:

class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>; // All the content comes under a single DOM Element
}
}




Flow Type:

Normal :

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

concat("A", "B"); // Works!

concat(2, 5); // Works!

Class :
class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>; // All the content comes under a single DOM Element
}
}


With Flow:

// @flow

function concat(a: string, b: string) {
return a + b;
}

type Props = {}

type State = {
chooseValid2FA: string[]
}

class Greeting extends React.Component <Props, State> { //props is mandatory field
render() {
return <h1>Hello, {this.props.name}</h1>; // All the content comes under a single DOM Element
}
}

Now you’ll get a warning from Flow if you try to use numbers.


The primitive types appear:

true; //boolean
"hello"; //string
3.14; //number

new Boolean(false);
new String("world");
new Number(42);


// @flow
function method(x: number, y: string, z: boolean) {
// ...
}
method(3.14, "hello", true);


// @flow
function method(x: Number, y: String, z: Boolean) {
// ...
}

method(new Number(42), new String("world"), new Boolean(false));


ES6 Feature

1. Arrow function:
function definition:

o function TestFun ()
{
alert("hi normal function");
}


o TestFun =() => {alert("arrow function ")}


o TestFun =() => alert("arrow function ")

o TestFun = arg=>alert(arg) // single argument didn’t required ‘()’

o function TestFun (){
return("normal function ");
}

o TestFun = ()=>{return "arrow function"}

o TestFun =()=>{return("arrow function ");}

o TestFun =(()=>(" arrow function "))

Function call:

TestFun ();
TestFun (5)



2.map:

var materials = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];

Var a=materials.map(function(material) {
return material.length;
}); // [8, 6, 7, 9]

materials.map((material) => {
return material.length;
}); // [8, 6, 7, 9]

materials.map(({length}) => length); // [8, 6, 7, 9]



3.Spread operator:
(i)Array

var a = ['a','b','c'];
var b = ['d','e','f'];
var c = a.concat(b);


A = [5, 6, 7, 8]
B = [...A , 9, 0] //[5, 6, 7, 8,9,0]
C = [...A, ...B]

myFunction=(v, w, x, y, z)=> {
console.log(v, w, x, y, z)
}
var args = [0, 1];

myFunction(-1, ...args, 2, ...[3,2]);


(ii)Object:

var obj1 = { foo1: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo1: 'bar', foo: "baz", x: 42, y: 13 }



FormiK

Installation code:
npm i formik --save
1. Getting values in and out of form state
2. Validation and error messages
3. Handling form submission
Why not Redux-Form?
By now, you might be thinking, "Why didn't you just use Redux-Form?" Good question.
1. According to our prophet Dan Abramov, form state is inherently ephemeral and local, so tracking it in Redux (or any kind of Flux library) is unnecessary
2. Redux-Form calls your entire top-level Redux reducer multiple times ON EVERY SINGLE KEYSTROKE. This is fine for small apps, but as your Redux app grows, input latency will continue to increase if you use Redux-Form.
3. Redux-Form is 22.5 kB minified gzipped (Formik is 9.2 kB)
There are two ways to use Formik:
• withFormik(): A Higher-order Component (HoC) that accepts a configuration object
• <Formik />: A React component with a render prop
import { withFormik } from 'formik';
import { Formik } from 'formik';



List of Properties

• values,
• touched,
• errors,
• dirty,
• isSubmitting,
• handleChange,
• handleBlur,
• handleSubmit,
• handleReset,




Some basic functionality:

initialValues={} //you can set initial values
validate={values => {}} //your validation part comes under this vaildate


Styled Component

1)import styled from 'styled-components'

(1) const Dropdown = ReadonlyIcon.extend`
margin: 10px 30px 10px 20px;
`

(2) export const ReadonlyIcon = styled.div`
margin: 10px 30px 10px 20px;
${props =>
props.ReadonlyIcon &&
`cursor: not-allowed;`}
`


2)import { injectGlobal } from 'styled-components'

injectGlobal`
body {
margin: 0;
padding: 0;
font-family : ${SC_REGULAR};
background-color: ${PRIMARY_BACKGROUND_1};
font-size:${SC_REGULAR_SIZE_1}
}



3)import styled, { keyframes } from 'styled-components';

const fadeIn = keyframes`
0% {
opacity: 0;
}
100% {
opacity: 1;
}
`;

const FadeInButton = styled.button`
animation: 1s ${fadeIn} ease-out;
`;




Flex and Grid // Instead of float and 12 column grid
Flex:
• justify-content
• align-items
• flex-direction
• order
• align-self
• flex-wrap
• flex-flow
• align-content

Grid
Grid Classes basic
The Bootstrap grid system has four classes:
• xs (for phones - screens less than 768px wide)
• sm (for tablets - screens equal to or greater than 768px wide)
• md (for small laptops - screens equal to or greater than 992px wide)
• lg (for laptops and desktops - screens equal to or greater than 1200px wide)
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
grid-column-start: 1;
grid-column-end:4
}


Links:

TypeScript : https://www.typescriptlang.org/
Formik : https://github.com/jaredpalmer/formik
ES6 : https://babeljs.io/learn-es2015/
Flex : http://flexboxfroggy.com/
Grid : http://cssgridgarden.com/