Ninna evaro React.JS meeda tutorial adigaru ga.... idi follow aipo

[Spartan]

aws-amplify vadtunnam which has react library

[dasara_bullodu]

50 minutes ago, JANASENA said:

Hi bro thank you for your post. 

BTW can you pls explain me in simple language

1. difference between functional and class components. 

2. What are props and state. 

3. Forms and Maps in React. 

 

Thank you. 

@JANASENA telsindi chepta

 

1. Components can be declared as both Functional and class components ...
 

functional components ante they are declared as methods 

JS class components ante declare component as typescript class..  eg. “classname extends react.component“ (import react)

 

2. every react class component has props and state

props ante they are passed as html attributes to classes ..

for eg. <MyClass abcd=“dummy”/> ..

deeniki MyClass constructor(props) ani icchi.. props.abcd ni access cheskovacchu

 

state ante oka json object.. constructor lo key values initialize chestav. 
 

everytime state value change aithe component reload chestundi...

for eg.. this.state={“key”:”value”} ani constuctor lo icchi... tarvatha onclick method lo this.setState(“key”:“newvalue”) ani iste ...state maari component refresh autundi

so react lo just aa component refesh cheytaniki state ni refesh cheste saripotundi... this is the most important feature in react

 

3. Form/Map antha idea ledu bhayya.. Basically nenu bootstrap forms cheskoni state refresh chestunna

 

[dasari4kntr]

1 hour ago, JANASENA said:

Hi bro thank you for your post. 

BTW can you pls explain me in simple language

1. difference between functional and class components. 

2. What are props and state. 

3. Forms and Maps in React. 

 

Thank you. 

can i explain as per my knowledge...but i am changing the order for better explanation...

 

2. What are props and state. 

for example , if you add two numbers in C language.
 

void add(int:a, int:b) {

c=a+b;

printf(c);

}

from the above code...
 

Quote

 

a, b variables as props...

c is the sate

printf is the return statement  in render method.

 

with one minor difference

props are immutable...

and state is mutable...thats why in react we write this as
 

this.setstate({

c:a+b

})

 

1. class component vs functional component

this guy has better explanation. please follow this article. basically functional components are simple to write so your final bundle size will be less and your code will be clean.

https://overreacted.io/how-are-function-components-different-from-classes/

steeled from this URL..

 

3. Forms and Maps in React. 

Forms(<input type="form" />)...i dont think you are going to use this in react. Because in react you dont follow traditional web application style where you post data to another page.

in react you are just using components. which are two types. controlled and uncontrolled.

for sending data to webservices you use fetch or axios..etc that too with in that component or event. (or some other place if your using redux)

MAP is not react related. is ES6 (javascript) function.

for example..

const temp =[1,2,3,4,5,6,7,8,9];

const result = temp.map(x=>{ return x%2===0});

console.log(result);

Quote

it prints... [false, true, false, true, false, true, false, true, false]

it do for-each in the array and creates new array for result.

 

 

[dasari4kntr]

1 hour ago, Spartan said:

aws-amplify vadtunnam which has react library

aws-amplify ante CLI tool...

are you hosting your react app as server-less app?

[Spartan]

3 minutes ago, dasari4kntr said:

aws-amplify ante CLI tool...

are you hosting your react app as server-less app?

cli tool also it has lots of integration capability with AWS..

anduke using it..like Auth, Analytics, Logging etc ki extra coding or libraries rayanavasaram ledu..

yes serverless hosting S3--> Cloudfront.

[Thokkalee]

Good discussion guys.. 

anyone using elastic search?

[Spartan]

3 minutes ago, Thokkalee said:

Good discussion guys.. 

anyone using elastic search?

Using Kibana....

[dasari4kntr]

1 minute ago, Thokkalee said:

Good discussion guys.. 

anyone using elastic search?

BRO...my fav topic

 

i have my own logstash scripts in my own bitbucket profile..

 

i dont kow kibana much...but can manage in elastic search, logstash

 

[Spartan]

@dasari4kntr @JANASENA

React ES5 and ES6 ki main difference is the Function and Classes criteria...

they went from classes functions,..

and back again becoz of community feedback

[Thokkalee]

1 minute ago, Spartan said:

Kibana....

Elastic + Logstash + kibana 

[Spartan]

Just now, Thokkalee said:

Elastic + Logstash + kibana 

yes ELK

[dasari4kntr]

10 minutes ago, Spartan said:

@dasari4kntr @JANASENA

React ES5 and ES6 ki main difference is the Function and Classes criteria...

they went from classes functions,..

and back again becoz of community feedback

React ES5 and ES6 ki main difference is the Function and Classes criteria...

no...

ES5 ES6 are javascript related...not react..

for eaxmple..small difference i will tell you..

in ES5..there is no "Const" variable declaration

in ES6 that is introduced...

 

Functional Component and Class Component is react related...

react version 16.7..they introduced react hooks which makes all react developers move from class components to functional components.

 

by using the functional components...code looks clean..and the final bundle size will be less ...so it easily downloads in the user browser...

 

[BeautyQueen]

Thread antey ela undali .. 10 members ki panikivache thread .. eroju e thread ye highlight!!!

#GoDevelopers

[dasari4kntr]

4 hours ago, Mr Mirchi said:

React with typescript baga vaduthunnaru baa

yes pichha pichhaga...

 

we tooo

[Thokkalee]

Anyone using Open policy agent? Or work on the security side?