10 React JS core concepts

#What is React?

React is a JavaScript library. Some of you might think that react is a framework. It’s not a framework. React is used for user interfaces. It’s like another JavaScript library. Framework forces developers to do their code in a specific system. It has already built some features. Sometimes it is helpful sometimes it doesn’t. React work on JSX. JSX means javascript expression. That means it’ll allow you to write HTML code inside your javascript file and write javascript code inside HTML.

#How React Works?

Before React we used browser DOM(Document Object Model) to build web apps. After React comes we have to worry about DOM. React has already done it for us. They create a Virtual DOM inside their file. Every time we update dom they compare it to the older dom using the Diff algorithm and the update only changed dom. React uses babel to compile JSX code and turn it into normal JavaScript code.

Before React Browser DOM API work like this:

document.getElementById(‘root’).innerHTML = `
<div>
Hello HTML
</div>
`;

React DOM API method :

ReactDOM.render(
React.createElement(
‘div’,
null,
‘Hello, World’,
),
document.getElementById(‘root’),
);

ReactDOM.render and React.createElement are the core API methods in react js.

# ReactDOM.render

ReactDOM.render method is basically the entry point of the react code into browser DOM. It has two arguments,

1. The first argument is What to render. That means what element should render in react DOM.
2. The second argument is where to render. It means where to add the created react element.

Example :

ReactDOM.render( what to render, where to render );

If the created element is “h1’ with hello text and that will render in the root element which has root id. The code should like this ;

ReactDOM.render( <h1>hello</h1> , document.getElementId(“root”));

# React.createElement

It is the main method to create a react element instead of using browser DOM API. It had three arguments.

1. Write the HTML tag name inside the quote which you want to create. Like “div”
2. The 2nd argument is for creating attributes. Like title, style, target, etc, or default null,
3. The 3rd argument is for what should be inside your HTML element. Like what you want to put inside your HTML element.

Example :

React.createElement( “HTML tag name” , attribute , “contents” );

If you want to create a tag like this <h1>hello</h1>, react code would like this:

React.createElement(“h1” , null , “hello” )

# Nesting

Nesting elements look like, you want to create an element inside an element. To do the nesting react element you just need to add React.createElement after the third argument. Rest processes are the same as React createElement.

Example :

ReactDOM.render(
React.createElement(
“div”,
null,
“Hello”,
React.createElement(“input”)
),
document.getElementById(‘mountNode2’),
);

# React Fragment

Usually a react element returns one JSX element at a time. Like you can return one div from a react element. If your code like this -

function App() {
return (
<div>
<h3>Hello World<h3/>
</div>
<div>
<h3>Hi<h3/>
</div>
)
}

You can not code like this. It gives you errors. You can return one element. You can wrap these two div tag inside a div tag or you can use React. Fragment.

function App() {
return (
<React.Fragment>
<div>
<h3>Hello World<h3/>
</div>
<div>
<h3>Hi<h3/>
</div>
</React.Fragment>
)
}

Or you can use an empty fragment;

function App() {
return (
<>
<div>
<h3>Hello World<h3/>
</div>
<div>
<h3>Hi<h3/>
</div>
</>
)
}

#Creating components using functions

Creating react functional components is like creating a normal function. Just different that you have to call function Name First letter in capital and return JSX from function. LIke normal function, you can return one element at a time. That means you can return one JSX element.

Example :

function Button() {
return (
<button type=”submit”>Submit</button>
)
}
// render this component in the root
ReactDOM.render(<Button /> , document.getElementById(“root”))

#Advantages of using Components.

Components are like some part code. It’s highly used in frameworks and libraries. Components are reusable, readable, and easy to use. It makes code cleaner and light-wight. Like, if you want to use some code in different places you can make a component, that will help you to use your code in different places by calling/importing the component.

Example :

You want to use a button in different components. You can use like -

// share component
function Button() {
return (
<button type=”submit”>Submit</button>
)
}
// Use button component inside another component name Header 
function Header() {
return (
<div>
<h1>Hello World</h1>
// button component
<Button />
</div>
)
}

#Props Argument.

Props’ argument is one of the basic things in react. In the HTML tag, we know attributes. In react when we call a component, we can pass data one to another component by using attributes. It basically creates an object. We can use the attributes data by using props argument in component function and we can read data by using props. attributes name.

Example :

// component with props
function Button(props) {
return (
// use props data by props.title
<button type=”submit”>{props.title}</button>
)
}
// Use button component inside another component name Header
function Header() {
return (
<div>
<h1>Hello World</h1>
// button component with title attributes
<Button title=”Submit Button” />
</div>
)
}

##Hooks in react

Hooks are like a simple function but it has extra ability to do more work. Hooks are most popular in react development and their popularity increases day by day.

#useState Hook

useState Hook is most commonly used in react. It is used for state management where you store something and update store data. When you console useState hook. You can see it has two arguments one is store data and one is a call back function that updates state hook.

useState hook structure : const {stateStore, useStateStore} = useState(initialValue);

Example:

Increase count;

function Home() {
const {count , setCount} = useState(0);
return (
<div>
<h1>{count}</h1>
<button onClick={() => setCount(count + 1)} >increase< button />
</div>
)
}