Some Things about React

Tareq Hassan
3 min readMay 7, 2021

--

React is one of the most popular and trending Javascript library which makes our development very easy with some new and smart concepts in the world of making a website or web application. Almost whenever a new learner starts to learn any new thing, some misconceptions mislead him to understands the core concept. So I’m here to share and break some misconceptions. Let’s start.

1.It’s no a framework like angular or view

React is just a library and you need to make all decisions by yourself. It focuses on helping you to build user interfaces using components. It doesn’t help you with server communication, translations, routing, and so on.

2. Virtual DOM:

You can include a JavaScript expression using a pair of curly brackets anywhere within JSX. A JavaScript file containing JSX will have to be compiled before it reaches a web browser. The code block shows some example JavaScript code that will need to be compiled.

3.Expressions in JSX

You can include a JavaScript expression using a pair of curly brackets anywhere within JSX. A JavaScript file containing JSX will have to be compiled before it reaches a web browser. The code block shows some example JavaScript code that will need to be compiled.

4. Components:

A component is a collection of data and properties. Basically, the thing which is SIMILAR IN LOOK, DIFFERENT IN DATA is a component. React is all about components. It increases the re-useability of code.

5. Hooks:

It’s comparatively a new concept in react’s world. It’s nothing but a function with some properties. It manages the changes very efficiently. It can only be usable in functional components, look below.

6. Props And PropTypes In Reac

Props and PropTypes are important mechanisms for passing information between React components. React allows us to pass information to components using things called props (short for properties). Because React comprises several components, props make it possible to share the same data across the components that need them. It makes use of one-directional data flow (parent-to-child components). However, with a callback function, it’s possible to pass props back from a child to a parent component.

7. React Context

The React context API allows you to create global context objects that can be given to any component you make. This allows you to share data without having to pass props down all the way through the DOM tree.

8. Data And Event FLow:

In react application, data flows always maintain top level to bottom level. However, Events and Stats flow from bottom to top-level to handle things efficiently.

9.You NEED Redux / Flux

Yeah I know, In a small React application, you don’t need Redux or Flux for state management. But are you always going to create tiny React Apps? Are you always going to debug your React applications checking messy states in every component? React is not a framework, it’s not a complete solution. So, after developing React Apps for 3–4 months, you’ll feel like hell when your Boss will ask you to debug an app that you developed keeping states & components messy. I’m pretty sure it will take one hour just to find which component’s states are causing that bug!

10. React Performance Test Tools:

To test the performance of a react app, developers use different tools. The most popular tools are- <Profiler />, React Developer tools, Bit.dev, Performance timeline (Browser profiling), etc.

Enjoy React and think in React way. Thank you!

--

--