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.
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
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 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.
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.
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.