React Basics Guide

React is a javascript library for creating interactive user interfaces(UI).
React uses a declarative style of programming which makes things predictable and easier to debug and build encapsulated components that manage their own state and then use them to make complex UIs.

What is react?

• React is an abstraction.
• Makes you think your application in terms of State i.e. State is the function of the view.
• It’s very time and cost effective only updates the part of the DOM and compares it with VDOM(created by react a virtual DOM) re-renders the whole app.
• Predictable top-down data flow.
• It’s component-based

Let’s start by making a simple component :

Component above is an example of React class component which is then converted into ES 5 classes.

Here Class HelloWorld is an example of React v.16 previously it was React.createClass() which is deprecated.

1. render() is a method of React which is used for templating re-renders the tree which will be turned into HTML.

2. Render methods can contain arbitrary logic. Different people structure their render methods in different ways. Many use inline logic in their JSX structures, including ternary statements and map on an array or rendering is to keep all logic outside of the main JSX structure, for clarity.

ReactDOM.render initializes React library and creates tree and outputs to HTML.

2. JSX

const element = <h1>Hello, world!</h1>;

JSX is syntax extension to javascript which helps us write HTML tags in react classes that are rendered in a component as the final result.
JSX tags are turned in Reac.createElement() which returns plain javascript objects

React.createElement("div", null, "Hello World")
// first argurment is thingToRender 
// second argument is {props}
// third argument is [ childerns] here text node

we can escape JSX using curly braces which will be then translated as normal JS syntax

const MyComponent = () => {
    const someString = "Something else to display";

    return (
        <div className="class1 class2">
           Hello World!
          {/* <div>Commented out code</div> */} // comments in react
           <div>{someString}</div>
           <div>{28 + 14}</div>
        </div>
    );
}

3. Props

Props shorthand for Properties attributes which are passed to components in React is simple objects which are passed from parent to child.
Props are read-only, props are combined into single object present as this.props for class components.

class HelloWorld extends React.Component {
    
    render() {
        return (
            <div>Hello {this.props.name}!</div>
        );
    }
}

ReactDOM.render(
    <HelloWorld name="XYZ"/>,
    docment.getElementById('root')
);

• Anything can be passed as a prop: Primitives, objects, arrays, functions, component types, rendered components.
• React also includes PropTypes which provides runtime checking of props in development.

4. State

Well, State can be defined as which can be changed directly by the component, You can think of the state as any data that should be saved and modified without necessarily being added to a database — for example, adding and removing items.

Here the state is an object which can be modified by the component.

• A state is private to component and can be changed, unlike props.
• A State object is available via this.state which can be read directly.
• A state is updated by calling onClick={this.setState({conunter++})}.
• Every time you call setState() react triggers re-render.
• A state should not be modified directly as might not know.

5. Events

React handles Event.
Event handlers declared in the component are managed by the framework.
React events are very similar to DOM events only difference is syntactic handling eg: click is onClick(camel-cased). Another difference is that you cannot return false to prevent default behavior in React. You must call preventDefault explicitly.

6. Conditional Rendering

Conditional rendering in react is same as conditions in javascript we use javascript operator like if or the conditional operator and for inline conditinals, we use ternary operators.

function GreetIfTrue(props) {
  const counter = props.counter;
  if (counter) {
    return <h1>hello</h1>;
  }else{ 
   return <h1>Try again</h1>;
  }
}

7. Component Lifecycle methods

Class components can have various lifecycle methods that will be called by React at an instance. Any class component can implement some or all of these methods(see everything ages even a component goes through it).

• componentWillMount: Fired once, before initial rendering occurs, the component will mount. All tasks needed to be done before mounting of a component is done here(executes before the first render).
• componentDidMount: Fired once, after initial rendering occurs. Actual DOM elements can be accessed here(executed after the first render) can make AJAX call in here.
• shouldComponentUpdate : Fired before rendering. This method is more like a question should the component update based on the props received and state of a component.
• componentDidUpdate: Fired after the component's updates are made to the DOM.
• componentWillReceiveProps : Fired when a component is receiving new props.
• componentWillUnmount : Fired immediately before a component is unmounted from the DOM or This is executed just before the component gets removed from the DOM.

8. Lists and Keys

we use the map() function to take fruits and display them in a list.we can build collections of elements and include them using curly braces {}

const fruits = ['apple','mango','dragon fruit','berries'];
const fruitsList = fruits.map((fruit) => <li>{fruit}</li>);

Keys help React identify which items have changed, are added, or are removed.

const fruits = ['apple','mango','dragon fruit','berries'];
const fruitsList = fruits.map((fruit,i) => <li key={i}>{fruit}</li>);

It’s all Just Javascript.