React Progress

Why use React?

Most popular js framework. Backed by Facebook. Has easier learning curve than angular. You need NPM to run them on your machine.

How to Install React?

Type the following command in command prompt
npm i -g create-react-app
Here i stands for install. Now type
create-react-app [appname]  (capital letter is not allowed).

How to run React?
Use cd [appname] to go in the folder. Type npm start  to run the react application.

How to install bootstrap on your App?
In terminal (on the directory) run the code npm i bootstrap 
Import them in index.js by adding import 'bootstrap/dist/css/bootstrap.css';

React Component:
React component can return only one element. Wrap child elements with parent a parent element.
Use React.Fragment to append without a parent div.
Return should only have html and {expression} JSX expression. Methods must be declared before or after the render()
Create your components in components folder under src folder. Don't forget to import the component in index.js
  
State:
Use {} to encapsulate javascript expression. State is used to store variables for a component. 
state = {
 name: 'Ashwin'
}
Use the state object by this.state.name expression within the return ();

Changes in markup:
class = className
Direct styling is not possible, declare styles for an element as property and inherit it in as JSX expression.

style = {
 fontWeight : 'bold'
}
<h1 style = {this.style}>Hello World!</h1> 

OR

<h1 style = {{ fontWeight: 'bold' }}> Hello World!</h1>

Rendering an array:
define the array as a property
state = {
   arraySamp : ['one','two', 'three']
}
Use the following code to render the array in JSX
<ul>{this.state.arraySamp.map(arrayS => <li key={arrayS}>{arrayS}</li>)}</ul>