10 Basic ReactJS Things
Ello There Mate!!! If you haven’t watched FRIENDS, you won’t get ‘Ello there’! Don’t go yet! I know if you’re thinking about if I’m writing this article about FRIENDS. NO! Well, if Reactjs is your friend, you should probably read it! Enough gibberish. Today, I’m gonna show you some basic things you can dig up when you have free time.
ReacJS’s power comes from components. Well, before React, we had something called JQuery(other frameworks and libraries too) and honestly it made making websites a little bit comfortable. But it wasn’t too comfy though! Developers had to make sure they know every line they are coding and when they had to find an specific line they had to pull their hair out because it was imperative. What does imperative mean? It means you have to tell your program specifically and exactly what to do next one by one. For the big websites this is the reason behind pulling your hair out. Because you have to track everything that is going on with the program. Every action on your website is dependant on another action which is dependant on another action when you code with JQuery. You will get it if you see any JQuery code. But with ReactJS, this problem has been solved by components. Components is reusable. Learn more about components here https://reactjs.org/docs/react-component.html
2. Virtual Dom
React created something called virtual dom. It is an object which paints everything in the websites. It has some powers. One of the power of virtual dom is it can detect if any component in the previous page has been used in another component. Can you guess what is the benefit here? Well, before, when you go to one page from another, browsers had to load the whole page. But virtual dom detects if any part of the website matches with the previous page’s elements or components. When they do it, the whole page doesn’t reload from the top if any part get matched. It only renders new elements/components. That is why it is so powerful. Because it is reusable, user-friendly. Now the web has become more fun because of this reusablity power. Learn more about virtual dom here: https://reactjs.org/docs/faq-internals.html#:~:text=The%20virtual%20DOM%20(VDOM)%20is,This%20process%20is%20called%20reconciliation.
In HTML, there is attribute like id or title where elements can be assigned. React elements can also have list of attributes when it gets rendered. Props are arguments passed into components. You can send multiple data inside props to components. Visit the official react props article: https://reactjs.org/docs/render-props.html
JSX is HTML like syntax, not HTML. When you coded in ReactJs for the first time, you must’ve thought that the below code is just HTML. No, it isn’t!
States are simply objects that is changble. When any website’s state changes, it re-renders the page. Developer have to make sure that they keep track of states that is changing. State management can be tough. React has libraries to manage states. Redux is a very popular state management package. For small websites, react internally has concluded state hook. Read this https://reactjs.org/docs/hooks-state.html#gatsby-focus-wrapper
6. Higher Order Component
Components often share functionality with each other. As components are used more and more, it becomes difficult to track for the developers. So the developers uses another component’s functionality when it can be reusable. They take argument and uses it to their need. Array methods such as filter and map are example of these. Know more about higher order component:https://reactjs.org/docs/higher-order-components.html
7. Context API
Previously, I talked about state. Context API is one of the way to manage state between components. Context API is helpful because data doesn’t have to pass manually through every components. It can be used anywhere in a react application. Know about the uses here:https://reactjs.org/docs/context.html
React uses several techniques internally to increase its productivity performance wise. Production build, browserify, brunch, rollify, single file builds are such techniques that a developer can use to increase its performance. Learn more:https://reactjs.org/docs/optimizing-performance.html?fbclid=IwAR3Uxb4v-qAHDPsB2PYhPhABbIhmnlm2zQYR88Od7x2OMVvgzxnUl9pvbyQ
When it comes to libraries, react has tons of it. Integrating with other libraries and publishing your desired website with what works well with react is what you want. Well, you need to make the decision for this. But don’t really use a lot of libraries if you can. Because websites become heavy when you use a lot of libraries. You need to make sure you use the right one.
10. React Ecosystem
React has a great ecosystem. You can use npm packages along with babel, webpack, react-router, redux and so on. They just happen to work so well with react. The developer community in ract is so big that if you’re stuck at anything, most probably you can find a person that has provided your solution.
That’s it for today!!! That was so random. I hope the newbie developers will be benefitted a little by this article. Thanks for reading. SEE YA!!👋👋👋