Scribd
Upload
14 views

React 2

There are two main types of components in React: class-based and function-based. Class-based components are more complex and use object-oriented programming, while function-based components are simpler to write with less code. In React, we use JavaScript syntax like import/export and ES6 features. Components must be capitalized and exported, then imported where needed. The file structure for a React project includes public, source, and package.json folders. CodeSandbox is an online editor that allows importing components between index.html, index.js, and app.js files.

Uploaded by

5 Aditya Kr. 8C
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views

React 2

There are two main types of components in React: class-based and function-based. Class-based components are more complex and use object-oriented programming, while function-based components are simpler to write with less code. In React, we use JavaScript syntax like import/export and ES6 features. Components must be capitalized and exported, then imported where needed. The file structure for a React project includes public, source, and package.json folders. CodeSandbox is an online editor that allows importing components between index.html, index.js, and app.js files.

Uploaded by

5 Aditya Kr. 8C
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Components-

There are two types


Class based component- It included OOPs. Even to do a small task you have to write
additional code. It was too complex.
It was considered bulky or oversized.They are quite easy.

Function based component- In this you can do same but in lesser line of codes with
less complexity.They are not quite easy to work.
when you are writing complex functions it was prefferd to
use class based as it was easy to work with.

In React we use ES6 features ( ecma script 6) version of JavaScript .


Inside react wehenever we are importing something we use (IMPORT).
*whatever name of your component created inside it has to be same as the file
name. Component name always start with capital letter eg; Nav.jsx
*If you want to export a component then you have to write-
export default Nav.jsx

* If you want import a component then-


import Nav.jsx from "./Nav.jsx"

./ means whenever you are importing a file from the same folder.It means same
folder.
../ means if you are importing a file from one step back. It means one folder
back.
../../ It means two folders back.

In Node.js you have to work with Npm ( Ndoe Package Manager).


npm- it manages package in a project. You can have multiple packages in a project.
In Node.js - you need to open Terminal--write a command
npx create-react-app .
OR
npx create-react-app filename
Waht is the differnce between them -
* If you use . then your project would be created in the same directory as you
are already in.
* If you use file name then your project would be stored in the same directory
but inse the folder created.

CODESANDBOX inside it you would have 3 folders-

* Public folder- consists html file i.e Index.html


images , videos etc. whatsoever you want to be publicly
accessible you store it in public folder.

* Source folder- consists pre defined files i.e app.js


index.js

* Package.json-

# Index.html file is connected to index.js and this is connected to app.js.

Codesandbosx code-

*injecting a component from index.html to index.js-


<div id= "root">
<app/> (app is a component)
</div>

*ReactDom - it is basically a package used to create a react project.It makes you


capable of using virtual DOM.
whenever you are creating a project you have 2 packages which are
installed - React & ReactDOM

*render - it means display whatever component is inside it inside the given div.It
means loading the given component on to the screen.

*To create a project - npx create-react-app .


OR
npx create-react-app filename

* To run the project- open terminal in thefolder


npm start (then hit ENTER)

AFter running the program it will generate a URL i.e local host 3000. When you
are making a project on offline mode then you can
view the project in http://localhost:3000

COMPONENT-

How it Works?
index.html-> Index some component in index.js file-> setup React -> create VDOM ->
Set a command and target App.jsx.

*App.js is our first component.

You might also like