Let’s Cook React together to serve out!

AJ Auntor React.js blog
Photo By Alien holololo

01. What is React JS?

02. React Component.

import React, { Component } from 'react';

class MyComponent extends Component {
render() {
return <p>React Component</p>
}
}

export default MyComponent;
import React from 'react';

const FunctionComponent = () => (
<div>
<MyComponent />
<p>A Function Component</p>
</div>
)

export default FunctionComponent;

03. How works React hooks ?

04. UseState in React Js.

import React, { useState } from 'react';

//create your forceUpdate hook
function useForceUpdate(){
const [value, setValue] = useState(0); // integer state
return () => setValue(value => value + 1); // update the state to force render
}

function MyComponent() {
// call your hook here
const forceUpdate = useForceUpdate();

return (
<div>
{/*Clicking on the button will.. force to re-render like force update.. does */}
<button onClick={forceUpdate}>
Click to re-render
</button>
</div>
);
}

05. React.js useEffect.

06. What About JSX ?

const element = <h1>Welcome to Auntor World!</h1>;

07. Purpose of JSX.

const element = React.createElement(
"h1",
null,
"Welcome to Auntor World!"
);

08. JSX Expression embedding.

import React from "react";

const Hello = () => {
const name = "Auntor";

return (
<div>
<h1>Hello,, {name}</h1>
</div>
);
};

export default Hello;
import React from "react"

const Total = () => {
return (
<h1>Total {10 + 7}</h1>
)
}

export default Total;
import React from "react"

const FormatName = () => {

const user = {
firstName: 'AJ',
lastName: 'Auntor'
};

const formatName = (user) => `${user.firstName} ${user.lastName}`;

return (
<h1>
Good Morning, {formatName(user)}!
</h1>
)
}

export default FormatName;

09. Why Need Context API in react.js ?

10. React Element render.

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

Software Engineer (Front End)