React js is a JavaScript library created by Facebook in 2013 for building user interfaces and rendering UI components. It uses a virtual DOM to efficiently update the real DOM and allow building of reusable UI components. React code can be written directly in HTML or using JSX syntax and by setting up a React app with Node.js and NPM. Components are the building blocks of React and can be class or function based. Props and state allow passing data to components and re-rendering components on state changes.

1. React js
Prepared by Alireza Akbari

2. What is React js
 created by Jordan Walke
 In old days we only used JavaScript for change font size and color (like
jquery)
 React is a JavaScript library created by Facebook 2013.
 React is a JavaScript library for building user interfaces.
 React is used to build single page applications.
 React allows us to create reusable UI components.

3. How does react work?
 It’s used for handling view layer for web and mobile apps
 React creates a VIRTUAL DOM (document object model) in memory.
 High speed in processing
 You can write react in two ways:
 you can write React code directly in HTML.
 in order to use React in production, you need NPM and Node.js installed.

4. React in html

5. React in NPM
1. Install NPM and nodejs
2. Type in terminal: “npm install -g create-react-app”
3. npx create-react-app myfirstreact
4. cd myfirstreact
5. npm start

6. What is JSX
 React use JSX (javascript xml)
 JSX allows us to write HTML in React.
 Babel Convert JSx to javascript
 JSX is an extension of the JavaScript language based on ES6, and is translated
into regular JavaScript at runtime.
 With JSX you can write expressions inside curly braces { }
 The HTML code must be wrapped in ONE top level element.
 JSX follows XML rules, and therefore HTML elements must be properly closed.


7. What is component
 Components are independent and reusable bits of code.
 Components are like functions that returns HTML elements.
 Components come in two types:
 Class components
 Function components
 the component's name must start with an upper case letter.
 The component has to include the extend React.Component statement
 The component also requires a render() method, this method returns HTML.

8. Props
 Props are arguments passed into React components.
 Props are passed to components via HTML attributes.
 React Props are like function arguments in JavaScript and attributes in HTML.
 Note: React Props are read-only! You will get an error if you try to change
their value.


9. state
React components has a built-in state object.
The state object is where you store property values that belongs to the
component.
When the state object changes, the component re-renders.
Refer to the state object anywhere in the component by
using the this.state.propertyname syntax:
To change a value in the state object, use the
this.setState() method.