React installation steps 🙂
1.software installation
2.react project creation
3.folder structure
step1:install nodejs
node + npm + npx
npm -> node package manager
npx -> node package extractor/executor
cmd> node -v
cmd> npm -v
cmd> npx -v
step2: cmd> npx create-react-app my-app
============== or=============
step2.1: cmd> npm i -g create-react-app
step2.2: cmd> create-react-app my-app
step3: open cmd inside project cmd> npm start
http://localhost:3000/
IDE -----> vs code
3.folder structure
--------------------
1.node_modules -> collection of libraries
2.package.json -> register of node_modules
3.public/index.html
4.src/index.js
5.src/App.js
components -> class,function
1.creating functional component
-----------------------------
1.create a js file inside src folder ex:Sample.js
2.write code : import React from "react";
3.create a function
ex:
function Sample(){}
4.return html code from the function
ex:
function Sample(){
return( <div></div>)
}
5.export function defination
ex: export default Sample;
2.display created component on the browser
------------------------------------------
note : call created(new) component in displayed component to display new component on the browser
step1: App.js
ex:import Sample from './Sample'
syntax:import ComponentName from 'filepath'
step2: App.js
call it like tag in html -> <Sample></Sample>
function to class conversion
-----------------------------
step1: function -> class
step2: () -> extends React.Component
step3: place return code inside render method
function
--------
function abc(a,b,c){
return a+b+c
console.log("hi")
return "hello"
}
x = abc(1,4,5)
y = abc(2,6,3)
z = abc(3,6,2)
class:
------
1.collection of members
member -> property(variable) or method(function)
2.extends(inheritance)
3.class having magic methods,magic methods will execute automatically
ex: constructor,render,lifecycle methods..etc
4.must call super method inside constructor method
5.use "this" keyword to access declared members
interpolation: {}
-------------
Comments
Post a Comment