May 7, 2021
Start with React js
Introduction
In JavaScript, there are so many librarys in the world. At this time “React js” library is the most popular one of them. React created by Facebook. It helps us to build UI components effectively. Today I discuss react js very simple way.
Create React App & Live in website
At first, you need to create React project. you can follow my instruction:
1. go to the project folder where you create using command prompt,
2. Write this “npx create-react-app my-app” command,
3. Wait some time, after complete installation you need to go to your new my-app folder directory, using the command “cd my-app”.
4. Now your React app ready to live, use this command to live this app “npm start”
congratulations, you create your first React app and live it on the website.
VIRTUAL DOM
Instead of manipulating the browser’s DOM directly, React creates a virtual DOM in memory. Where you need to manipulate DOM, React first manipulates virtual Dom then it changes the browser DOM. It helps us when browser DOM contains nodes in a large number.
In React, Virtual DOM exists which is like a lightweight copy of the actual DOM. It’s exactly the same as DOM but it has limitations to do directly change the layout of the document. Manipulating DOM is a slower process to do, but Virtual DOM is lightweight and fast.
“JSX” in React
Writing code in Rect with JSX (JavaScript XML) to create DOM elements that are rendered in React DOM. We can’t write HTML in JavaScript, XML solved this problem to use JavaScript and HTML together in the same file. JSX will compile before it reaches the web browser. This process handle with Bebel.
Components in React
Facebook created React to divide UI into separate pieces, and those pieces are called components. you can see the Facebook timeline, there are 4 parts such as:
1. Top (search bar, timeline, watch, marketplace, group, your profile, settings)
2. Left (groups, pages, shortcut information)
3. Middle (Timeline where we scroll/newsfeed)
4. Right (chat list)
This particular part is a component and easy to handle and write code.
Functional & Class Component
The functional component is a simple & plain JavaScript function that returns a React element. There is no need to write a render method. That is easy to write & using hooks inside the component.
The class component is used for complex UI logic & more feature than the functional component. Using state & lifecycle methods inside the component. Allow “this” keyword in the component.
UseState() Hook
The useState() is a Hook that allows you to have state variables in functional components. In this hook, there are two elements. The first one is the initial state and the second one is a function that use for change the initial state value. look at this syntax:
the state is the initial state & setState is a function that helps to change the state value.
React Props
I discuss the functional component before, this is like a JavaScript function so you know every function has parameters to accept arguments. so you can pass an argument into a component using props. It’s very simple to use. At first, you need to pass an argument like an attribute in the component calling tag. for example:
In this image, there is SingleService is the name of the component that looks like an HTML tag and service is an attribute to receive it from the props. Then we use this data after receiving and restructuring props.
React Events
Every time we need to any interaction with the website to get something or do something. JavaScript handle this by using events. For example, when we click the button/layer/image it returns something, it happens for the click event. The developer creates functionality into this event and it works after someone clicks. In react, you can use this but few changes from JavaScript event. because you will write code in JSX. At first, declare an event attribute in the HTML tag, then you need to call a function inside this event attribute like: “onClick={yourFunction}”. after finishing declaring part you need to call this function before components return keyword. Then you create functionality to your event what you want after anyone clicks it.
