# REACT NOTES

(notes written from codeevolution youtube channel)

Two ways of creating a react app

1. npx: npx create-react-app <project_name>
2. npm: npm install create-react-app -g, create-react-app<project_name>

- NOTE:
-- we never modify the html file in the app, react takes care of it
`<div id="root"></div>`

### Components:
component represents part of the user interface


Same component can be used with different properties to display different information. Eg: left sidenav and right sidenav


component code is placed in js file
we can also have components with .jsx extension

In react there are two types of components,

1. stateless *functional* component:
- These are javascript functions, they return html which describes the UI

 function Welcome(props){
     return <h1> Hello, {props.name}</h1>
 }

2. stateful *class* component:
- class components are the regular es6 classes that extend the Component class from the react library
- must contain render method returning HTML

 Class Welcome extends React.Component{
     render(){
          return <h1> Hello, {props.name}</h1>
     }
 }

Components are building blocks of any react application

### Functional Components:

they are just javascript functions, they optionally recieve object of properties, referred to as props and return HTML(jsx) which describes the url


### Class Components:

Class components are like functional components, they also recieve props as input and return HTML(jsx), class component also maintains a private internal state..

Comparison between functional and class components:


But react hooks lets us use state and other react features without using class.

JSX:

1. JSX is extension to javascript language syntax
2. write XML like code for elements and components
3. JSX tags have a tag name, attributes and children
4. JSX is not a necessity to write React applications

JSX makes react code simple, elegant and readable..

JSX translates into react.createElement which in turn uses the react library

##### JSX DIFFERENCES:

Class -> className
for -> htmlFor
camelCase property naming convention
onlick -> onClick
tabindex -> tabIndex

PROPS:

these are used to pass values from app.js to component, can be accessed using this key word in class based component

props or properties are immutable, their values cannot be changed

STATE:
Apart from props, there is an other way to influence what is rendered on the screen, that is state of the component