Repository files navigation

Learn React with me and Buy a coffee for me |@dhruvparmar2310

• I have started learning React from the scratch from freeCodeCamp.org Youtube channel.
• React Course - Beginner's Tutorial for React JavaScript Library [2022] | freeCodeCamp.org
• I also prefer this channel as wellCodevolution

Watch the ReactJS - Documentary

Also watch thisInterview Questions

ReactJs is a Javascript library and it is maintained by Facebook in 2011. It was released by May, 2013. According to Jordan Walke, React is an efficient, declarative, and flexible open-source JavaScript library for building simple, fast, and scalable frontends of web applications.

It is used for developing complex and interactive web and mobile UI. It follows the component based approach which helps in building reusable UI components.

Features:

• It uses the virtual DOM instead of the real DOM.
• It uses Server Side Rendering.
• It follows uni-directional data flow or data binding.
• Because of JSX, code’s readability increases.

Real DOM:

• It updates slow.
• Can directly update HTML.
• Creates a new DOM if element updates.
• DOM manipulation is very expensive.
• Too much of memory wastage.

Virtual DOM:

• It updates faster.
• Can’t directly update HTML.
• Updates the JSX if element updates.
• DOM manipulation is very easy.
• No memory wastage.

• It was created and maintained by Facebook.
• Easy to reuse the code.
• React is declarative (it tells you what you want and build the actual UI).

• There are two methods to create react app :

• Open the terminal after installing node
• Type the below syntax:

npx create-react-app <your-project-name>

• after creating react app folder, run the below syntax to start the server

npm start

• Now try to change the content in src/App.js

npm install create-react-app -gcreate-react-app <project-name>

• "node_modules" : it contains all the dependency installed.
• "public" : it contains three files
  • favicon.ico
  • index.html (contains div with)
  • manifest.json
• "src" : index.js (we speacify the root components which is named as component and DOM element contain 'root' id which will be controlled by React.)

It is an config file of React. It contains keywords, license, author, version, name, dependencies and many more.Also refer the official documentation ofPackage.json

To createpackage.json file run the below command.

npm init

to modify the version, name or author anything. run the below command as shown in example.

npm config set init.author Dhruv Parmarnpm config set init.license MITrm package.jsonnpm init --y

Hererm package.json is used to remove old file.

• When we runnpm start command in terminal, the browser will serve index.html present in "public" folder.

npm start

• Stateless function
• Stateful class (it contains render method which returns HTML.)

1. Functional Component :

   • It is simple function.
   • use functional component as much as possible.
   • the main advantage to use functional component is "Absence of 'this' keyword".
   • It is mainly responsible for UI.
   • It is Stateless Component.

2. Class Component :

   • More feature rich.
   • It maintain their own private data.
   • It has complex UI logics
   • It provides lifecycle hooks.
   • It is Stateful Class.

Hooks are the new feature proposal which lets you use states and other react features without writing a class. React Hooks are a function type that allows you to hook into React state and lifecycle features. Previously, If you write a function component and notice that you need to apply some state to it all you have to do is, change that functional component into a class. But with the new update, you can just use a Hook inside the function component, making the refactoring procedure easy.

Also Refer :

• Types of Hooks in React Js
• useForm | Type of Hook

JavaScript XML (JSX) - it is the extension to Javascript language syntax. JSX tags as a tag name, attributes and children. It is not necessary to write React Application but JSX makes your code simpler and elegant. Where XML is Extensible Markup Language.

There are some rules about JSX :

• class -> className
• for -> htmlFor
• camelCase property naming convension :
  • onclick -> onClick
  • tabindex -> tabIndex

props stands for properties.props are the arguments passed into React components.

eg: if I wanna print list of Employee

• Dhruv
• Sina
• Clark

Hereprops plays an important role. Make a component in src folder and create one .js file and write the below code.

importReactfrom'react'constEmployee=props=>{//console.log(props);//return <h1>Hello, Dhruv</h1>return<h1>Hello,{props.name}, and your age is{props.age}</h1>}exportdefaultEmployee

Now write the below code in "App.js" after importing "Employee.js" file in "App.js"

function App() {  return (    <div className="App">      {/* Demo of props */}      {/*<Employee />      <Employee />      <Employee /> */}            <Employee name="Dhruv" age='21' />      <Employee name="Sina" age='34' />      <Employee name="Clark" age='15' />    </div>  );}

It will return only one element. If I wanna print the child element of first Employee then add this content in .js file which you have created...

constEmployee=props=>{return(<div><h1>Hello,{props.name}, and your age is{props.age}</h1>{props.children}</div>)}

also add this content in App.js file

<Employee name="Dhruv" age='21'>    <p> You are from India.</p></Employee>

React component as a built-instate object. Thestate object is where you store property values that belongs to the component. When thestate object changes, the component re-renders.state is managed within the components.state can be changed butprops cannot be changed becauseprops is immutable.

Rules forsetState() method:

• Always use thesetState() method, never try to modify thestate directly.
• Sometimes code has to be updated after the state has been updated? So place that code in the callback function which is nothing but the second parameter ofsetState() method.

Create one class constructor, add the below code in class component.

constructor(){super()//create a state empty objectthis.state={//code}}

classSubscribeextendsComponent{constructor(){super()this.state={message:'Welcome to my Youtube Channel'}}changeMessage(){//calling setState() method, which accepts an object, which is nothing but new state of the component. It can have two parameters, first will accept the object and another will be `callback` function.this.setState({message:'Thank you for Subscibing...'})}render(){//demo of statereturn(<><span>Dhruv Parmar</span><h3>{this.state.message}</h3><buttononClick={()=>this.changeMessage()}>Subscribe</button></>)}}

It is one of the feature of ES6, which unpacks the values from array or properties from an object into distinct variables. In react, destructuring ofprops andstate improves code readablity.

There are two ways of destructuring:

• in parameter
• in the function body

• There is no need of writing props.name while destructuring.
• Here, basically we are abstracting the name and occupation from the props object.
• In JSX, we can use {name} and {occupation} instead of {props.name} and {props.occupation} directly respectively.

Create one functional component and write the below code:

constGreet=({name,occupation})=>{return(<divclassName='container'><p>Hello, I am<spanclassName='heading'>{name}</span> and I'm a<spanclassName='heading'>{occupation}</span></p></div>)}

and add the element inApp.js, as given below

<Greet name='Dhruv Parmar' occupation='Jr.Web Developer' /><Greet name='Sina' occupation='Youtuber of Advance Javascript' />

It is quite similar to first method, after watching the demo you will come to know the difference.

constGreet=props=>{const{name, occupation}=propsreturn(<divclassName='container'><p>Hello, I am<spanclassName='heading'>{name}</span> and I'm a<spanclassName='heading'>{occupation}</span></p></div>)}