DEV Community


Posted on

Guidance of how React works

Hi Guys, I am new to this programming language and i have the basic of HTML & CSS. Currently i am learning about javascript and reactjs because i have an assessment of creating a movie app using reactjs and API. My concern is right now that im scared that i won’t be able to do the assessment. Can someone guide for me to understand better about it? #react #javascript #movieapp #programming #webdeveloper

Top comments (3)

lexlohr profile image
Alex Lohr

React is based on 3 simple concepts:

  • jsx (XML in JS) virtual DOM
  • memoization
  • reconciliation during render cycles

JSX is an extension to JS that allows you to write React.h('div', null, 'text') as <div>text</div> inside your JSX code. Both create a virtual DOM object that can be reconciled with the actual DOM.

Memoization is a technique by which you cache results of a function until certain properties change. This is used for handling side effects through useEffect and useLayoutEffect and costy calculations with useMemo and useCallback and state with useState and useRef.

When you mount a react component with ReactDOM.mount(<Component />, document.body), the first render cycle (mount phase) is started; all hooks are memoized and the initial DOM fragment is constructed inside document.body, directly followed by the layout phase in which useLayoutEffect side effects are applied. Whenever a property in the render tree changes, a new virtual DOM is constructed in the render phase, reconciled, then comes the layout phase again - until the unmount phase.

pmudra profile image
Philipp Mudra

Even though Alex is right about these main concepts, a good thing about React is that you don't need to know all this in detail when you start learning.

There are many good ways to get started with React. Make sure to look into the official docs & tutorial as they are well done IMO. Also make sure to look into Create React App. That said there are so many resources out there for any level of experience. You really just have to search for them.

You can do it!

rounakcodes profile image

Well answered!
A counter and todo app will attract an audience and sell but no one cares to teach these fundamentals first. And we all know who suffers the most!