A simple intro on react…
Programming languages have their own frameworks to build large-scale projects in a decorative way. The framework has inbuilt features to help in making software, websites on a long term project basis. But there are some problems using frameworks like when someone initializes it, it runs with the full structure, which is sometimes bothered developers to maintain the large thing for a simple project. There is an easy way if we use the library if we want to build small projects or work with a portion. The library is not as giant as a framework, it can use any third-party library or feature when it needed.
In javascript, angular is a framework with broad environment features. It can be used for a start-up team to build a multifunctional project. On the other hand, react is just a library, which is popular for a better user interface (UI)of a website, it can use so many third-party features for projects. It’s time to talk about a few things that using in react mechanism.
- Virtual DOM: Document Object Model (DOM) is a document structure, can be used with a programming language and allows language to structure, manipulate and style a website. You might hear about two types of DOM, real DOM and virtual DOM. real DOM is comparatively slow than virtual DOM for its frequent update process. Virtual DOM works with react render() method to make a smooth operation.
2. JSX: It’s actually javascript XML element. We often notice few of html divs and tags in a javascript file, that’s not html elements, just JSX. React elements produced by JSX. If we elaborate on our codes, we can see that JSX compressed the code to look more organised. We can easily check our codes on babeljs.io to get the plain javascript code from JSX element.
3. Default Props: Default props used in react as a component property itself. It used to set a default value for the props argument. If no property is passed, it remains unchanged.
4. State: To pass data through the component tree, the static component can be used. But if we need to pass changeable data that changes over time, we can use a stateful component.
5. Event: To change a stateful component, we use event and we can use a function as an event handler.
6. React.createElement: This method used to represent DOM elements to react. It has so many arguments like div, href, id, title etc.
7. Functions vs Classes: Before, fuctions in react were limited to be used. To make and run stateful components classes were necessary. But after releasing of react hooks, it became more easy for functions. Hooks also introduced a new api to run stateful components with more features.
8. Components vs Elements: A react component is a template, it can be a class or function. Whereas, elements are return from components. Comopnents make our code readable.
9. Hooks: Hooks are used in component to display the stateful elements in UI. They begin with word ‘use’. Hooks are used to change state (useState), work on side effect(useEffect), history(useHistory), location(useLocation), function and objects(useCallback). Hooke only can be used in react function, not in class.
10. Declarative: In javascript, we use declarative style to write components.
That’s a little about react. Please give your feedback according to your opinion. Thanks to all.