10 React Concepts That You Need To Know
Hi! Programmers React is a JavaScript library for building user interfaces. Today I will explore 10 React concepts that you need to know. So, let’s go….
1. React
React is a JavaScript library for building user interfaces or UI components. It is developed by Facebook. We can build a single-page application by using React and React-Dom. We can also build mobile applications by using React and React-Native.
2. JSX
JSX stands for JavaScript XML. We can write Html in react by using JSX. JSX just provides Html syntactic sugar in react. JSX converts HTML tags into react elements by using Babel. We can write JavaScript code in JSX by using curly braces { }. Some deferents between Html and JSX, in Html we use class but in JSX we use className.
Code Examples:
// with jsx
const Heading = () {
return <h1 className="heading"> Hello! </h1>
}// without jsx
const Heading = () {
return React.createElement('h1', {className:"heading"}, 'Hello!')
}
3. Components
React is a component-based library. We can create re-useable components in react. we can use a component repeatedly. There are two ways to create a component. They are functional components and class-based components. The functional component is stateless. Now we can use Hooks in the functional component to manage state.
Code Examples:
// functional component
const Heading = () {
return <h1 className="heading"> Hello! </h1>
}// class component
Class Heading extends React.Component{
render(){
return <h1 className="heading"> Hello! </h1>
}
}
4. Props
The props concept looks like an Html attribute. We can pass anything in a component by props. When I declare a component I can pass anything by props and In that component, we can receive props. This props is an object. In this object, we found that what is I passed in the component.
Code Examples:
const Component1 = () {
return (
<div>
<Component2 name='Hero' age={21} />
<Component2 name='Zero' age={0} />
<Component3 name='Alo' age={25} />
</div>
)
}const Component2 = (props) {
return <h1>Helo! {props.name}, age - {props.age} years</h1>
}// we can also use destructure
const Component3 = ({name, age}) {
return <h1>Helo! {name}, age - {age} years</h1>
}
5. Use State Hook
If anything will change by user's interaction or anyway, We should use state. There are two ways to handle state. In the class component, we can use this.state. In the functional component, we should use the useState Hook React.useState(). In useState, we should pass a default value. useState returns a value and a function. The value which will be changed and the function which should be called, when I want to change the value and should pass the updated value in the function. we can destructure the value and the function from the useState hook.
Code Examples:
const Component = () => {
const [name, setName] = React.useState('');
return (
<div>
<h1>Hello! {name}</h1>
<button onClick={()=> setName('Guru')}>Submit</button>
</div>
)
}6. Use Effect Hook
If we want any update in the dom in javaScript, we should use the useEffect hook. In react when the dom is ready, call the useEffect’s function that we pass in the useEffect function. We should pass a function and an array of dependency in the useEffect. When we want to re-render the useEffect function, in dependency we should add that. If we want to call the useEffect for one time, then we should pass the empty array as the dependency. If we want to call an API, we should use the useEffect hook.
Code Examples:
const Component = () => {
const [name, setName] = React.useState('');
const [user, setuser] = React.useState({});React.useEffect(()=>{
setuser({name})
}, [name])
return (
<div>
<h1>Hello! {user.name}</h1>
<button onClick={()=> setName('Guru')}>Submit</button>
</div>
)
}
7. Use Context Hook
In react we can pass anything using props in the child components. But can’t pass anything in the parent component to a child component. So that we can hoisting state to the parent component and we can pass child component. If we need the state many components, we should pass all over components by props. But It is not a suitable way. Now we can Manage the state by using context-API. We should create a context using React.createContext() . we can store the context in a variable myContext and export that we can import it anywhere. then we should wrap all the components that should use the context by the create-context-provider myContext.Provider with JSX. In that JSX we should provide value props. In value props, we should provide a value that we store. we can provide an array, object, or anything in the value props. In which Component we want to use the context, we should use use-context and pass that created context by import thatReact.useContext(myContext) .
Code Examples:
export const myContext = React.createContext();const Component = () => {
const [name, setName] = React.useState('');return (
<myContext.Provider value={name}>
<Component2 />
<button onClick={()=> setName('Guru')}>Submit</button>
</myContext.Provider>
)
}const Component2 = () => {
const name = useContext(myContext); return <h1>Hello! {name}</h1>
}
8. Use Ref Hook
If we want any dom element we should use the useRef hook. It is like as document.getElementById. First of all, we should declare a variable and in this variable, we should assign React.useRef React.useRef()and pass the default value. In useRef hook, we found an object. In this object we found current property. This current property is the dom element that element we refer to. In any JSX element, we can pass ref props. In the ref props, we can pass the use Ref.
Code Examples:
const Component = () => {
const nameRef = React.useRef(null);
const [name, setName] = React.useState(''); const handleName = () => setName(nameRef.current.value);return (
<div>
<h1>Hello! {name}</h1>
<input ref={nameRef} type='text' placeholder='name' />
<button onClick={handleName}>Submit</button>
</div>
)
}
9. Handle Events
If we want to handle events in react, we should pass that event props in the JSX element. In Html, we can set the attribute like onclick, onsubmit, onchange, onfocus, etc. But in the JSX we should pass onClick, onSubmit, onChange, onFocus, etc. And also one thing, if we call a function or we should pass anything in the parameter, we should write an arrow function, and in that function, we should call the function.
Code Examples:
const Component = () => {
const [name, setName] = React.useState('');
const handleName = ()=> setName('Guru')return (
<div>
<h1>Hello! {name}</h1>
<button onClick={()=> setName('Guru')}>Submit</button>
<button onClick={handleName}>Submit</button>
</div>
)
}
10. Default Props Values
In react we can set the default props in a component. In any component, we should pass default props by using componentName.defaultProps={}and we should set an object of props. In this object, we can pass any object properties for any props.
Code Examples:
const Component = ({name}) => {return <h1>Hello! {name}</h1>
}Component.defaultProps = {
name: 'Guru'
}