React context

 Component reusesability

It means code is written one times but can be used in different project.

Component Configuration

Configuration refer that you can modify the component property as per the need

Javascript xml and html

 Hello Developers!!

I know you are confused between html and JSX . As, I have mentioned in one of my blog that JSX have html like syntax. Let's learn the actual different between them.

                                                                   JSX vs HTML

• Adding custom styling to an element uses different syntax. In html we use internal,external or inline css. There is difference in using inline css with JSX  whereas external css is same and inline css need to be added in .html file in public folder. 

          inline css in JSX syntax : 

          style={{backgroundColor:"red", border:"1px ridge", width:"20px"}}

          note: first bracket represent js variable and second represent js object.

• Adding a class to an element uses different syntax. class is a keyword in JavaScript so, we use className instead of class in JSX syntax .

• JSX can reference JavaScript variables.

         <button> {buttontext}</button> 

          here {buttontext } is a variable.You cannot reference js variable in html file.

Form in react

 Let's learn how to build form in react

import React from 'react';
import ReactDOM from 'react-dom';

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }
  myChangeHandler = (event) => {
    this.setState({username: event.target.value});
  }
  render() {
    let header = '';
    if (this.state.username) {
      header = <h1>Hello {this.state.username}</h1>;
    } else {
      header = '';
    }
    return (
      <form>
      {header}
      <p>Enter your name:</p>
      <input
        type='text'
        onChange={this.myChangeHandler}
      />
      </form>
    );
  }
}

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




React Css

There we will learn about the css syntax in react

This is how we make styling in react

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

React hook

 Let's learn lifecycle hook in this blog

useState hooks

 Hooks clarification

Lifecycle method

 Let's understand lifecycle method in this blog

ComponentWillMount is executed before rendering, on both the server and the client side. 

ComponentDidMount is executed after the first render only on the client side. This is where AJAX requests and DOM or state updates should occur. This method is also used for integration with other JavaScript frameworks and any functions with delayed execution such as setTimeout or setInterval. We are using it to update the state so we can trigger the other lifecycle methods. 

ComponentWillReceiveProps is invoked as soon as the props are updated before another render is called. We triggered it from setNewNumber when we updated the state.

 ShouldComponentUpdate should return true or false value. This will determine if the component will be updated or not. This is set to true by default. If you are sure that the component doesn't need to render after state or props are updated, you can return false value. 

ComponentWillUpdate is called just before rendering.  

ComponentDidUpdate is called just afterrendering.

Functional vs class component

 Today we will understand difference between functional and class component

The most obvious one difference is the syntax. A functional component is just a plain JavaScript function which accepts props as an argument and returns a React element.  A class component requires you to extend from React.Component and create a render function which returns a React element. This requires more code but will also give you some benefits which you will see later on.

State

Because a functional component is just a plain JavaScript function, you cannot use setState() in your component. That’s the reason why they also get called functional stateless components. So everytime you see a functional component you can be sure that this particular component doesn’t have its own state.If you need a state in your component you will either need to create a class component or you lift the state up to the parent component and pass it down the functional component via props.

Webpack

 Le't look what exactly webpack is in react

Webpack is a modular build tool that has two sets of functionality — Loaders and Plugins. Loaders transform the source code of a module. For example, style-loader adds CSS to DOM using style tags. sass-loader compiles SASS files to CSS. babel-loader transpiles JS code given the presets. Plugins are the core of Webpack. They can do things that loaders can’t. For example, there is a plugin called UglifyJS that minifies and uglifies the output of webpack.

Babel

 Today we will learn about babel. what babel is and its work.

As any language, Javascript also has versions named ECMAScript (short for ES). Currently, most browsers support ES5. ES5 used to be good even though it was painful to code in it. Remember, this not reading from inside callback functions? The new version of Javascript, ES6, also known as ES2015 (specs of the language were finalized in June 2015) makes Javascript great again. If you want to learn about ES6, check out the links at the end of this article. All the great features of ES6 come with one big problem — majority of browsers do not fully support them. That’s when Babel comes to play. Babel is a JS transpiler that converts new JS code into old ones. It is a very flexible tool in terms of transpiling. One can easily add presets such as es2015, es2016, es2017, or env; so that Babel compiles them to ES5.

Accessing props

 Let's understand how to access props through class component.

import React from "react";

// Class Component

class Basic extends React.Component {

  // constructor is used for initialization and writing super

// will call the

 //constructor of the class react.component[parent class]

  //this refer to the current object of the class

  constructor(props) {

    //this keyword is coming from super by react.component 

//therefore you will 

//get error when run it

    // state also work like props to assign value

    super(props);

    //accessing props in class component using this keyword

    console.log(this.props);

    this.state = { name: "computer", price: "200" };

  }

  render() {

    return (

      <div>

        <p>hello</p>

        <h1>

          {/* {this.state.Productname} {this.state.price} */}

          {this.props.productname}

          {this.props.price}

          {this.state.name}

          {/* {this.props} */}

        </h1>

      </div>

    );

  }

}

export default Basic;

//ReactDom.render(<Car />, document.querySelector("#root"));

Accessing props

 In previous blog we have seen how to pass props. Now we will understand how to access those props by functional component.

import React from "react";

//we have passed props as a parameter in function component

const SelectQuestion = (props) => {

  return (

    <div>

//accessing props property question

     {props.question.title}

    </div>

  );

};

export default SelectQuestion;

Passing props from component

 Today's we will understand how to pass props from component .

import React from "react";

//showquestion component is imported

import ShowQuestion from "./ShowQuestion";

const  question= [

  {

    title: "what is react",

  },

];

//functional component

const App = () => {

  return (

    <div>

//showquestion is a component that we have imported and we

//have passed props items

      <ShowQuestion question={question} />

    </div>

  );

};

export default App;

Props vs State

 We have hear many time about props and state. Let's see much more about them.

        

                                                                    Props vs State

• Props get passed to the component whereas state managed within the component.
• Props can be passed as function parameter.State is a variable declared in the class component.
• There is no state in functional component. Functional component have props.You can use state in function component through hooks.
• Props are immutable[handle by parent cannot changed by children]. Whereas state can be changes[it managed inside the component so, component have right to change them].
• In class state can be accessible as {this.state.key}. Whereas in function component need to use useState hook to use state.
• In functional component props can be access as {props.key}. Whereas, in class component props is access as {this.props.key}.
• You can use setState method to modify state in class. And  useState hook in functional component to modify and set state.