Top 10 Things You Should Learn About React

Muhammad Shahnewaz
May 7 · 3 min read
If you want to be a react developer, you must know these 10 things.

Introduction: React is a Javascript library for building interactive and fast user interfaces or, UI components. It makes it easier to build dynamic web applications. Because it required less coding and offer more functionality. On the other hand, coding mostly gets complex very quickly in javascript.

01. JSX: It means Javascript syntax extension. It’s used to describe that what the user interface should look like. By using JSX, We can write HTML structure in the same file that contains javascript code. It makes the code easier to understand and debug. It sets HTML to javascript code. In this given example, I show you how JSX is implementing to react.

Example:

Implementing JSX

02. Virtual DOM: DOM means Document Object Model. DOM represented an XML or HTML document as a tree structure in which each node is an object representing a part of the document. Virtual DOM is a lightweight and representation of the actual elements that are being created for our page. Manipulating a real document object model is much slower than manipulating virtual DOM. Because nothing gets drawn on the screen. Virtual DOM changes only that object in the real DOM instead of updating all the objects when the state of an object changes. Virtual DOM gets updated when the state of an object changes.

Example:

how virtual DOM works

03. Components: It’s the building blocks of react application. It is small or big are reusable, composable, and stateful bits of code. We define small components then put them together to form a bigger one. We can reuse a single component in multiples UI. We call the function the same input and they give us the same output. We can reuse functions as needed and compose small to large functions. In react, components are exactly the same as input is a set of props and their output is a description of a UI.

Example:

04. Hooks: A hook in a react component is a call to a special function. All hooks functions start with the word ‘use’. Some of them can be used to provide a functional component with stateful elements like ‘useState’ and others can be used to manage side effects like ‘useEffect’. It can only be used in functional components. We can't use them in class components.

Example:

05. State: It’s a built-in react object that is used to contain data about the component. A component state can change over again. When the state changes then the components re-renders. The changes in state can happen as a response to user action and these changes determine the behavior of the component.

Example:

06. Props: It is a react build-in object which stores the value of tags attributes and works similar to the HTML attribute. It provides a way to pass data from one component to another component in the same way as arguments are passed in a function.

Example:

07. PropsTypes: React props provide a way to pass data from one component to another component in the same way. We can use the propsType for validating any data which we are receiving from props. PropsTypes are also objects where keys are the props name and values are their types.

Example:

08. Expressions in JSX: We can put any valid JavaScript expression using a pair of curly brackets in JSX. Only expressions can be included inside these curly brackets. We can’t include a regular if-else statement but a ternary expression is okay.

Example:

09. Webpack: It minimizes code for only production mode. Remember, we only need to do this for production builds. We shouldn’t apply TerserPlugin in the development. Because it will hide useful react warnings and make the builds much slower.

Example:

10. Constructor(): The constructor in a react component is called before the component is mounted. In the react component, When we implement the constructor then we need to call the (super(props)) method before any other statement. If we do not call the (super(props)) method then (this.props) will be undefined in the constructor.

Example:

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Muhammad Shahnewaz

Written by

Web Developer

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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