10 Importance things you need to know about react.

Nowadays react is the most uses the open-source javascript library in the digital world. It was developed by Facebook software engineer ‘jorden walke’ back in 2013 created user interfaces. In this tutorial, I will say 10 important react things.

1. React is a library: Many people think that react is a Framework but it wrong. because a framework has many building rules and regulations, you cannot avoid these rules and regulations. React has flexibility so you can use more third-party tools in react application.
2. React JSX: JSX stands for javascript XML. JSX makes it easy to write HTML in React.

import React from 'react';

const Home = () = {
    <div>
      <h1>I Love JSX</h1>
    </div>
}

Look at the code. and see how easy to write HTML in React.

3. All about javascript: look at the example is not like that. To generate markup dynamically in React you also use javascript.

const app = () = {
react.createElement('p', {},
'Say hello to my boy')
)
}

4. State Management: State is the most important topic in react. When we need to change or update any property value. then we can use react state.

const [loggedUser, setLoggedUser] = useState();
fetch('Api')
then(res => res.json())
then( data => {
  setLoggedUser(data)
}

5. How event handler works: even handler is the most important part in react. when we need to parse the value parent component to the child component, then we can use react event handler.

function handleBtn() {
  alert("Button Clicked!");
}

const myelement = (
  <button onClick={handleBtn}>Click the button!</button>
);


ReactDOM.render(myelement, document.getElementById('root'));

6. Props: React props are attributes like Html. when we need to pass data in the child component. Then we can use props.

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand}!</h2>
  }
}

const myelement = <Car brand="Ford" />;

ReactDOM.render(myelement, document.getElementById('root'));

7. Conditional rendering in react: In the latest react application, we cannot directly use the if-else condition. In this case, we can use conditional rendering.

. inside a {} we can use conditional rendering using the ternary operator.

const app = () => {
   const edited = true;   
   return (
     <div> {edited ? (<UpdateButton onClick={this.handleUpdateClick}     />): (<EditButton onClick={this.handleEditClick} />)}</div>); 
}

In the above example, when “edited” is true, we’ll show the “Update” button to the user. If “edited” is false, the “Edit” button is rendered.

8. It’s declarative: we can write dectaritive style component In React. Let’s look at the previous example with <select>:

<select value={this.state.value} onChange={this.handleChange}>
  {somearray.map(element => <option value={element.value}>
                              {element.text}
                            </option>)}
</select>

In this <select> example you are not using for loop to manually create a mapped collection. You are not saying what should be done just how it should look like.

9. You Might Not Need Flux: Flux is unidirectional data flow architecture. We should think about it as a pattern, not as a framework although Flux is also the name of a framework using flux architecture.

a small react app which is don't need global state or you don't have any problems with tracking the state change. so don't use flux.

10. react render working process: When a state is changed and need to update then it will do componentDidUpdate() and it will call the render function and will say that hey render i need to update so you must re-render again and then render will be re-render again.