Scribd
Upload
19 views

React Next Js

Uploaded by

Syed Noor Ali 2021-CE-36
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
19 views

React Next Js

Uploaded by

Syed Noor Ali 2021-CE-36
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

React

Default Export:
When you use a default export in React (or JavaScript in general), you can choose
any name you want for the import. This flexibility allows you to tailor the import
name to fit the context in which you’re using the component.

Default Export:
```javascript
// MyComponent.js
const MyComponent = () => <div>Hello</div>;
export default MyComponent;
```

Importing with a Different Name:


```javascript
// AnotherFile.js
import RenamedComponent from './MyComponent';

const App = () => <RenamedComponent />;


```
In this example, `MyComponent` is exported as a default export, but when
importing it in `AnotherFile.js`, you can rename it to `RenamedComponent`. This is
particularly useful for avoiding name conflicts or for improving readability based on
the context in which the component is used.

Real DOM
The Real DOM is the actual Document Object Model in the browser, which is slower
to manipulate and update.
If I want to update something, whole DOM tree will get updated.

Virtual DOM
The Virtual DOM is an in-memory representation of the real DOM that allows for
efficient updates and rendering in web applications.
Make multiple copies of Real DOM. Compares them and identifies where the change
is to be made and updates the changed part, , stopping the whole DOM/page to
render again/re-load
React works on Virtual DOM.

Fragments
Empty html tags: <> </>
So, we return a single thing from the function, we use fragments. We add
other tags to fragments.

Making Variables in React


‘standard’ way of making variables in react is by using “Use State Hook”

1st variable in array: constant


2nd variable in array: function: to update the value
Folder Structure:
 App is the main folder
 Globals.css Is the main css file
 Page.js k papa hein layout.js
 Layout.js: main landing page (imports fonts, css)

React Components:
We don’t write whole code in a single file. We make components.

In the above image, page.js is used as a landing page where all the components are
merged together to form a landing page. Here we can see, we are using Header
component which is defined in Header.js. We make html closing tag-like thing to use
imported components.

You might also like