#JSX #Component lifecycle #Context Api

# JSX :

JSX is a JavaScript Extension Syntax used in React to easily write HTML and JavaScript together.

const jsx = <h1>this is jsx </h1>

This is simple JSX code in React. But the browser does not understand this JSX because it's not valid JavaScript code. This is because we're assigning an HTML tag to a variable that is not a string but just HTML code.

So to convert it to browser understandable JavaScript code, we use a tool like Babel which is a JavaScript compiler/transpiler.
You can set up your own babel configuration using Webpack as I show in this article. Or you can use create-react-app which internally uses Babel for the JSX to JavaScript conversion.

React jsx code like :

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

export default function App( ) {
return <h1>hello world </h1>
}

# Component lifecycle :

In ReactJS, every component creation process involves various lifecycle methods. These lifecycle methods are termed components’ lifecycle. These lifecycle methods are not very complicated and are called at various points during a component's life. The lifecycle of the component is divided into four phases. They are:

1. Initial Phase
2. Mounting Phase
3. Updating Phase
4. Unmounting Phase

Each phase contains some lifecycle methods that are specific to the particular phase. Let us discuss each of these phases one by one.

1. Initial Phase
It is the birth phase of the lifecycle of a ReactJS component. Here, the component starts its journey on a way to the DOM. In this phase, a component contains the default Props and initial State. These default properties are done in the constructor of a component. The initial phase only occurs once and consists of the following methods.

• getDefaultProps()
• getInitialState()

2. Mounting Phase
In this phase, the instance of a component is created and inserted into the DOM. It consists of the following methods.

• componentWillMount()
• componentDidMount()
• render()

3. Updating Phase
It is the next phase of the lifecycle of a react component. Here, we get new Props and change State. This phase also allows to handle user interaction and provide communication with the components hierarchy. The main aim of this phase is to ensure that the component is displaying the latest version of itself. Unlike the Birth or Death phase, this phase repeats again and again. This phase consists of the following methods.

• componentWillRecieveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate()

4. Unmounting Phase
It is the final phase of the React component lifecycle. It is called when a component instance is destroyed and unmounted from the DOM. This phase contains only one method and is given below.

componentWillUnmount()
This method is invoked immediately before a component is destroyed and unmounted permanently. It performs any necessary cleanup-related task such as invalidating timers, event listener, canceling network requests, or cleaning up DOM elements. If a component instance is unmounted, you cannot mount it again.

*# Context Api : *

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

For a more in-depth definition, it provides a way for you to make particular data available to all components throughout the component tree no matter how deeply nested that component may be.

example :

const App = () => {
  return(
    <ParentComponent theme = "light"/>
  );
}

const ParentComponent = (props) => (
  <Child theme = {props.theme} />
)

const Child = (props) => (
  <Grandchild theme = {props.theme} />
)

const Grandchild = (props) => (
  <p>Theme: {props.theme}</p>
)

In the example above, we specified the application theme using a props in the ParentComponent called theme. We had to pass that props to all components down the component tree to get it where it is needed which is the GrandChild component. The ChildComponent had nothing to do with the theme props but was just used as an intermediary.

Now, imagine the GrandChild component was more deeply nested than it was in the top example. We would have to pass the theme props the same way we did here which would be cumbersome. This is the problem that Context solves. With Context, every component in the component tree has access to whatever data we decide to put in our context.

Create with context api :
To create a context, we use React.createContext which creates a context object. You can pass in anything as an argument to React.createContext. In this case, we are going to pass in a string which is the current theme mode. So now our current theme mode is the “light” theme mode.

import React from "react";

const ThemeContext = React.createContext("light");
export default ThemeContext;

To make this context available to all our React components, we have to use a Provider. What is a Provider? According to the React documentation, every context object comes with a Provider React component that allows consuming components to subscribe to context changes. It is the provider that allows the context to be consumed by other components. That said, let us create our provider.

Go to your App.js file. In order to create our provider, we have to import our ThemeContext.

Once the ThemeContext has been imported, we have to enclose the contents of our App component in ThemeContext.Provider tags and give the ThemeContext.Provider component props called values which will contain the data we want to make available to our component tree.

function App() {
  const theme = "light";
  return (
    <ThemeContext.Provider value = {theme}>
      <div>
      </div>
    </ThemeContext.Provider>
  );
}