REACT JS NOTES

  REACT NOTES

React is a Javascript library for building user interface.

It is not a Framework. React knows only one thing that is to create an awesome UI.

History of React

1: React was first designed by Jordan Walke who was part of the Facebook team.

2: It was first deployed for Facebook's news feed around 2011.

3: In 2013, React was open sourced at JS conference.

Why React ?

1: Created and maintained by Facebook.

2: It has a huge community on github.

3: Component Based Architecture.

ReactJS Advantages

1: React uses a declarative approach.

2: Resuable Code.

3: Component Based Approach 

4: DOM updates are handled gracefully.

5: React is designed for speed, speed of implementing the application, simplicity, and scalability. 

Component based approach

A Component is one of the core building blocks of React. In other words, we can say that every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier.

DOWNLOAD NODE.JS

THEN CHECK FROM CMD, NODE VERSION

 TYPE 1:

npm install -g create-react-app

now can create project 

create-react-app my-app

  TYPE 2:

THEN OPEN FOLDER WHERE YOU WANT TO CREATE NEW REACT APP

npx create-react-app my-app

Enter that folder

cd my-app

and start npm, local development serve.

npm start

DOWNLOAD VS CODE, INSTALL 

SIMPLE REACT SNIPPET

PRETTIER

CHANGE THE THEME LIKE , ayu mirage

-----------------------------------

Props get passed to the component

Props are immutable (cannot be changed/modify)

Props - Functional Components

this.pros - class components.

-----------------------------------

https://jeoschmoe.io/api/v1/vinod

-------------------------------------

tachyons.io like bootstrap

npm install tachyons

import tachyons

-----------------------------------

codesandbox

for online react running.

------------------------------------

npm install react-router-dom

for react routing methods.

-------------------------------------

for install php api connection with react

npm install axios

--------------------------------------

--------------------------------------

Making Table of New Request:

Database name "project1":

Table name "leaves":

type: vacation, sick leave, floating holiday, jury duty, earn leave

id:

type:

fromdt:

todt:

reqto:

title:

details:

status: 0=> no res, 1=> accepted

created-at:

----------------------------

post data

const [user, setUser] = useState ({

  name:"",

price:"",

desc:""

});

input names are these...

const {name, price, desc } = user;

const OnInputChange = e =>{

setUser({ ...user, [e.target.name]: e.target.value });

};

const onSubmit= async e => {

e.preventDefault();

await axios.post('php localhost api link', user);

alert('data inserted');

};

<form onSubmit={e=> onSubmit(e)}>

in all inputs

 onChange={ e=> OnInputChange(e)}

in all inputs value is 

 value={name of input}