How React works

10 things you need to know about React

Now a day, React is most popular JavaScript library. For frontend development we use React.js. To learn core things of React, we should learn React basic fundamentals like how react work and so on. So, now I discus about 10 most important basic fundamental topic about react which help you to understand how React work. Let’s start…

1. Not a Framework

React is not a JavaScript framework like jQuery, Angular etc. It’s a JavaScript library. In Framework there are some decisions made for you. In library you need to make all decisions by yourself. It doesn’t help you with server communication, translations, routing and so on.

2. JSX

JSX means JavaScript XML. JSX provides syntactic sugar for the React.createElement(component, props, children) function. It’s like HTML but not HTML. You can make your own component in JSX. To create user Component, component name must be capitalized. Otherwise React can’t understand that properly. JSX support to write HTML inside JavaScript.

example:

const Func = () => {

return <h1>Tanvin Ahmed</h1>

}

In this case h1 tag is a JSX. Browser is not support JSX. JSX convert in JavaScript using Babel compiler then we show output in browser screen.

Learn More

3. How to render React in browser

Web application run is depend on browser DOM. If each logical operation browser DOM get reload, then it make very slow application. User can’t get friendly performance. For that reason React come with virtual DOM. It’s work very smartly. Virtual DOM is like browser DOM. When React app is running React create Virtual DOM and compare with browser DOM and identify is there is any different with virtual DOM and browser DOM. If found any change, only this specific part change in browser DOM and it’s help browser to do more efficient performance. That’s why React is most popular now a day in whole world.

Learn More

4. How Virtual DOM and diffing Works

Virtual DOM is create when React app running. Virtual DOM is like a browser DOM.

example:

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

In this example we show that ReactDOM.render() method is main method which render whole React app in browser. This method have 2 arguments.

  1. First what to render in browser. This is always a React element.
  2. Second where to render that React element in browser. In this example we define an Id “node”, in where element render in browser.

In React.createElement() insert the element which is render in browser. This method have many arguments.

  1. First argument is HTML tag like div, h1, p, small, main, header, section etc.
  2. Second argument is attributes. Like calssName, type, href, src etc. If attribute not present, it will be null.
  3. Third is String which is provided in HTML tag. In this example ‘Hello React’.

When react app render it create Virtual DOM and Compare with Browser DOM by using diffing algorithm. Diffing algorithm help to find any change between virtual DOM and browser DOM. If found any change React only change this particular part of browser DOM, does not discard what has already been rendered. That’s why React application is much faster. For that reason React is most popular JavaScript library in whole world.

Learn More

5. Component

In React application, Component is most important part. Actually, React is a component based JavaScript library. It’s work with component.

example:

const Hi() => <h1>Tanvin Ahmed</h1>

const App = () => {

return <Hi></Hi> // component

}

output: Tanvin Ahmed

In this example we can easily understand what is component. Component is like a function. You can reuse it by passing props as arguments and without passing props also. In next point we discus about props. You can make functional component not only JSX. We can show huge list with a single line of code using component. A component may have child.

Syntax: <Component props={passing props}>Child</Component>

If any component have no child, then you can write this component like

<Component />

Suppose, we have 100 item product data and we want to convert it in a list item. Let’s do ite with component.

const listData = [‘Apple’, ‘Orange’, ‘Banana’ ………];

const app = () => {

//child component

const List (props) => <li>{props.listItem}</li>

return (

//parent component

<div>

<ul>

{

listData.map(listItem => <List listItem = {listItem}></List>) // map is JavaScript build in method to iterate array and return value.

}

</ul>

</div>

);

}

output:

  • Apple
  • Orange
  • Banana
  • …….

Learn More

6. props

props is an object which help to transfer data from one component to another component. Props always transfer data from up to down of DOM tree. That’s means only parent component data can transfer for child component by using props. A clear idea about the props can be found from the example above.

you can give default props value like ES6 function default parameter.

example:

const App = () => {

const name = ‘’;

Name.defaultProps = {

name: ‘Tanvin’

}

const Name(props) => <h1>{props.name}</h1>;

return (

<div>

<Name />

</div>

);

}

output: Tanvin

In this example we show that if you don’t provide any props value, it return default props value, otherwise, it return the props value that you given.

Learn More

7. prop-types

You can predefine what type of props are allow on your component like string, number, object etc. It’s very useful when you make a large application. In future other developer clearly understand what type of props accept this component. For that you must install a package.

npm install --save prop-types

Then you can predefine the value type.

example:

import PropTypes from ‘prop-types’;

const App = () => {

const name = ‘Tanvin’;

Component.propTypes = {

name: PropTypes.string,

}

const Component = (props) => <h1>{props.name}</h1>

return (

<Component name={name} />

);

}

In this example if you give number value of name variable, it give you an error.

Learn more

8. state

React mainly render depend on state. When state change, React re-render the application. In React you can implement any functionality, you must declare state. Without state you can not store data for use in application.

Syntax: const [state, setState] = useState();

You can define in useState() what type of data store in this state. Like useState({}) that means, you store object type data, useState(‘’) that means, you store string type of data. Every interaction in React devend on state.

Learn More

9. Managing side effect

In React app, side effect is very common thing. Your application will be damage if you can’t handle that. useEffect() is a build in hook which handle side effect. useEffect() control execution of logic. In useEffect() we can give dependency for re-render application.

Syntax : useEffect(() => {}, []);

In [] we can give dependency. If we don’t give any dependency only provide empty [], it render only one time.

example:

const App = () => {

useEffect(() => {}, [])

} // render one time

Learn More

10. Optimizing Performance

Initially React use many clever technique for minimize the number of browser DOM operation to display perfect result. Using React you automatic get faster and optimizing User interface. Still there are some process to make more optimize app.

You can use production build. By default, React includes many helpful warnings. These warnings are very useful in development. However, these make React larger and slower so you should make sure to use the production version when you deploy the app. It will optimize your application.

Learn More

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store