React.js is so far most popular Javascript library in world. Developed and maintained by Facebook, React has gained immense popularity in recent years due to its simplicity, performance, and robustness. Working with user interface is easy and effective with React Component ecosystem. Code written in react ultimately generates a Single Page Application(SPA) which is the dynamic implementation of component tree. New Concept Introduced in React Paradigm is JSX which means Javascript and XML attribution. React facilitates you to declare your own named component such as <MyComponent/> which is transpiled by Babel to browser understandable format and rendered in UI.
The base working methodology of React is completely Javascript. For Beginners, It would be fruitful to learn Javascript Basics Completely before starting with React. Here are few sources from which you can engineer Javascript.
YOUTUBE CHANNEL: TRAVERSY MEDIA, FREECODE CAMP, ACADEMIND, CODING ADDICT, LAMADEV, WEBDEV SIMPLIFIED
Website : Leetcode, mdn docs, w3schools, codeacademy, freecodecamp
Complete understanding of how core javascript works under the hood will help boost knowledge related to React further. React embraces a declarative programming paradigm, where developers describe “what” the UI should look like based on the application state, rather than explicitly specifying “how” to update the UI. React is the use of reusable components. A component in React is a self-contained, independent piece of code that encapsulates its own logic and UI. By breaking down the user interface into smaller, modular components, React promotes code reusability, maintainability, and scalability. These components can be easily combined and composed to create complex interfaces, providing a streamlined development process.
Starting a beginner level project with React and learning from tutorials will boost your understanding on basic React Composition, Containment and other concepts. In project use case React Hooks comes into play and implementing hooks correctly is firstly not noticed. React maintains it UI/UX completely on the state of hooks. So simple loopholes left can lead to errors and bugs.
Foremost point for developer is to be careful with unnecessary state updates, and re-rendering. Developer needs to have knowledge in which state the particular component is. It is good practice to write the logic in the default react hook format. Example
useEffect(() => { const connection = createConnection(serverUrl, roomId) connection.connect() return () => { connection.disconnect() } }, [serverUrl, roomId])
This use case demonstrates the complete useEffect hook which updates the state only if the dependencies changes and after sudden state update the connection is disconnected to ensure the application performance, and optimization. This matters alot for REST API based projects and project with huge data fetching and asynchronous requests.
const [state,setState] = useState(initialstate)
setState((currentState)=>{
currentState = currentState+state
return currentState
})
In this use case the setState function accepts a function which has currentState as parameter and currentState is updated as state changed to latest state on any event triggered. This also prevent your application from loopholes and state update issue.
Concept related to Throttling and Debouncing is also critical in larger projects. Projects that consumes API HTTP requests need to be managed else it will result in triggering unnecessary HTTP request on page rendering as well as it turns out to be costly due to excessive use of Server. In React state update is performed on any Javascript event triggers. On that state update the whole component re-renders again and again which results in unexpected load and of data in network. Lazy Loading, Lodash Webpack Plugin can turn out to improve the performance and speed optimization.
Articles related to Above Concepts: Debouncing & Throttling in JavaScript | by Chidanandan P | Nerd For Tech | Medium , How to Use Debounce and Throttle in React and Abstract them into Hooks (freecodecamp.org)
You can find documentation related to React here: React
You can refer this Youtube channel link in order to know common mistakes developers make: https://youtube.com/@LamaDev
