React Fundamentals (ReactJS)
React is not a framework, It is an open-source JavaScript library and it is used for building user interface. React also use JavaScript.
How to create and start a React app?
npx create-react-app appName
Write this command on your terminal and press enter.
cd appName
Write this command on your terminal for the change directory.
npm start
and Write this command on your terminal to start this app.
JSX
JSX is a sentence extension of JavaScript.
<button className=’btn btn-success’>Click Me </button>If a tag has no children, then you can use a self-closing tag.
<div className=’nav’/>Components:
You have to write the Component’s Name first letter in Uppercase.
<Home></Home>
and User-defined function name first letter must be in Uppercase.
function Add( x, y ){return x + y;}
Props in Component:
If you want to pass any JavaScript Expression from one component to another component, you can use props.
<Home data={data}/>// Now you can read this data from Home component.
State in Component.
React has a built-in state object. In state object, you can store value and read value when you need it in the component.
State Declaration
const [ stateName, setStateName ] = useState(parameter);// you must import useState
Here setStateName used for store value and stateName used for reading value
const [ name, setName ] = useState(‘’);Virtual DOM:
Virtual DOM is the representation of the real DOM. DOM stands for Document Object Model. It represents the UI of your react application. The process of DOM is slow. But virtual DOM is faster than real DOM. It is a copy of the actual dom and kept in the browser memory in the form of a javascript object. Mainly. DOM is a programming interface of HTML and XML. Usually, React maintain two virtual dom, one contains updated virtual dom and another contains pre-updated virtual dom.
Conditional Rendering:
Conditional rendering is a term that can use to render different terms of the interface if the condition true or false.
In conditional rendering, you can use if-else statement or ternary operator.
<div> { isTrue ? ‘It is true’ : ‘It is false’ }</div>
Functional Component:
A functional component is a JavaScript function that returns JSX.
Create a functional component called Person
function Person (){ return <h1>Fahim Ahammed</h1>}
On the other hand, to create a functional component, you can use the arrow function.
const Person = () =>{ return <h1>Fahim Ahammed</h1>}
Events in React:
React events write in Camel Case syntax. For example onClick instead of onclick.
<button onClick={handleClick}>Click Me</button>React Life Cycle:
In react, each component has life cycles. There are three phases of react life cycles. They are- Mounting, Updating, and Unmounting.
Mounting means putting elements into the dom.
Updating means updating an element or component.
Unmounting means remove an element from the DOM.
