10 Basic Fundamental concept of React
1. What is react ?
React is a JavaScript library — one of the most popular ones, with over 100000 stars on Github.
React is not a framework (unlike Angular, which is more opinionated).
React is an open-source project created by Facebook.
React is used to build user interfaces (UI) on the front end.
React is the view layer of an MVC application (Model View Controller)
2. What is JSX ?
- JSX Stands for JavaScript XML.
- JSX Allows us to write html in react.
- JSX Makes it easier to write and add html in react.
3.What is the react component?
Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render function.
4. React Props:
React props are like function arguments in javascript and attributes in html.
to send props into a component,use the same syntax as html attributes :
Add a “brand” attribute to the truck element:
Example : Const myelement = <truck brand =”Ford“ />
The component receives the argument as a props object:
Example: Use the brand attribute in the component :
React components have a built-in state object.
The state object is where you store property values that belong to the component.
When the state object changes, the component re-renders.
6.Creating the state object
The state object is initialized in the constructor :
Example: Specify the state object in the constructor method:
7.Using the State object
Refer to the state object anywhere in the component by using the this.state.property name syntax:
Example:Refer to the state object in the render () method :
8.React Event:
Just like HTML, React can perform actions based on user events.React has the same events as HTML : click, change, mouseover etc.
9.React Adding:
React events are written in camelCase syntax:
onClick instead of onclick.
React event handlers are written inside curly braces:
onClick={shoot} instead of onClick=”shoot()”.
Example:
<button onClick={shoot}>Take the Shot!</button>
10.Event handlers: A good practice is to put the event handler as a method in the component class:
Example :Put the shoot function inside the Football component:
