ReactJS

1. ReactJS
2. Features of ReactJS
3. ReactJS – Components
4. Types of Components
5. ReactJS – Props
6. ReactJS – State
7. ReactJS – Event Handling
8. ReactJS – Event Binding
9. music-app

---

1. ReactJS
1) React is a JavaScript library.
2) Open source.
3) Reusable component based
4) Maintained by Facebook.

---

2. Features of ReactJS
1) JSX – JavaScript extension. We can write html structures in the same file that contains JavaScript code.
2) Virtual DOM – React keeps a lightweight representation of the Real DOM known as Virtual DOM. Manipulating Virtual DOM is faster than manipulating Real DOM. When the state of an object changes, Virtual DOM changes only that object in the Real DOM instead of updating all the objects.
3) Architecture – MVC (Model, View and Controller).  React is the View which is responsible for the applications look and feel.
Model == Data related logic
View == UI logic
Controller == Interface between Model and View
4) Data Binding – React’s one-way data binding keeps everything modular and fast. A unidirectional data flow means that when designing a react app you often nest child components within parent components.
5) Extensions – React goes beyond simple UI and has many extensions for complete application architecture support. It provides server-side rendering and supports mobile app development. React can also be extended with Flux and Redux, among others.
6) Debugging – React applications are extremely easy to test due to a large developer community. Facebook even provides a small browser extension that makes React debugging faster and easier.

---

3. ReactJS – Components
1) Building Blocks – Components are the building blocks of React application that represent a part of the user interface.
2) Re-usability – A component used in one area of the application can be reused in another area.
3) Nested – A component can contain several other components.
4) Render – A component must defined a render method that specifies how the component renders to the DOM.
5) Passing Properties – A component can also receive props. These are the properties passed by its parent to specify specific values.

---

4. Types of Components
1) Stateless Functional Components: They are JavaScript functions. They return HTML. Can be contained in .js or .jsx file.
2) Stateful Class Components: Regular classes that extend the Component Class. They must contain a render method that returns HTML. Can be contained in .js or .jsx file.

---

5. ReactJS – Props
1) Components can pass their properties from parent component to child component.
2) Properties help to make components more dynamic.
3) Its important to define all the props, their types and their default value.
4) Props in a component cannot be changed.

---

6. ReactJS – State
1) A state object stores the values of properties belonging to a component.
2) A state can be modified based on the user action or network changes.
3) Every time the state of some data changes, React re-renders the component to the browser.
4) The state object is initialized in the constructor.
5) The state object can also store multiple properties.
6) this.setState() is used to change the value of the state object
7) setState() function performs a shallow merge between the new state that you provide and the previous state.

---

7. ReactJS – Event Handling
1) Every application revolves around handling and listening to events in order to do something else in reponse.
2) Event Handling in React follows two major conventions.
a) React events are named using camelCase
b) With JSX you pass a function as the event handler, rather than a string.

<button onClick={displayMessage}>Click Me </button>
//Verify onClick has camelCase
//displayMessage is function pass as event handler

---

8. ReactJS – Event Binding
1) Event binding tells the browser which function is called when a particular event occurs.
2) Event binding in React can be achieved in following ways:
a) Bind the handler in render method using ‘this’ keyword
b) Arrow functions in the render method
c) Binding the event handler in the constructor
d) Arrow function as a class property

---

9. music-app
In Visual Studio terminal execute: npm init react-app music-app
In VS > File > Open Folder > Select Folder (music-app)

---