10 things you should know about React
1.It’s a Library not a FrameWork
Most of us have a misconception that React is a framework.But reality is React is just a javascript library not a framework. In a framework, some decisions are already made for us , where in React one has to take all decisions by oneself. React doesn’t help with server communication,routing, and so on. It only focuses on building UI using components.Though it doesn’t provide everything but it can easily mix up with other 3rd party libraries as the rich js ecosystem has libraries for everything.
2. JSX
One can write javascript expression anywhere within JSX with a pair of curly brackets.
Example : const Cart(
<a href=”https://facebook.com”;
<h1>Log In</h1>
</a>
);
3. It’s Declarative
In React, Declarative style is used to write components.
Example :
Const array=[‘rajon’,’moka’,’rofiq’];
<div>
{
array.map(arr=> <li>arr</li>)
}
</div>
In this example, we are not using for loop to manually create mapped collection and not saying what should be done.
4.Props in JSX
By surrounding with {} any javascript expression can be passed as prop.
Example : <Addition sum={1+2+3+4} /> . Here props.sum will be 10 as sum will be evaluated.
Props default to true. If no value is passed through props then it defaults to true.
Example : <Addition sum />
<Addition sum={true} />
Above two are same.
5. State in React
There are times when data do not remain static. It needs to change over time. With help of React useState those kinds of changing data can be used.
Example : const [input,setInput] = useState(‘’);
const text =’Rahim’;
setState(text);
Here, using setState text is set and can be used using.So if text is changed to karim then input will be karim.Though here text is static, state is more relevant with dynamic values.Like, in above example, if text is dynamic then input will be changed according to dynamic value.
6. Data goes Down
In react, if data is needed to pass to children component from parent component then it can be done by using props. Data goes down the tree of the components in react. Moreover, props are seen as HTML attribute from JSX pont of view
Example : <Face color={‘white’} />
Here color will be available in child component in this.props.
7. Conditional Rendering
Sometimes it is needed to render something based on some conditions. Like we want to show a div or else something to loggedin users only.In that case conditional rendering can be used in react.
With the help of ternary operators or && operator conditional rendering can be done.
Example : const [isLoggedIn,setIsLoggedIn]=useState(‘’);
isLoggedIn? ‘Hello’ : ‘Sorry’; //ternary operator
{isLoggedIN && <div> <h1>Hello Brothers </h1> </div>} // && operator
8 . No need of Flux
There is a misconception that redux or any flux implementation is needed to manage state.
But if project is small then there is no need of any flux implementation. Small state can be easily enough. No need of global state management.
9. React Virtual Dom
Virtual Dom in react is virtually created DOM by react. In react, every UI is a component and every component has states.React listens to these state changes.When a state is changed react updates its virtual dom.Then it compares updated virtual Dom with the previous version virtual dom.And this process is known as diffing.So, then after knowing which virtual dom objects changed react updates only those objects in real dom.Thats why react is os fast.
.
10 . Node,Npm,Webpack and Babel
Node executes the javascript in react. Node package manager (NPM) manages our packages using tools to run those commands.Babel transpiles our latest es feature codes to olde esr feature codes so that browser can understand. And also transpiles JSX into react.createElement using a react preset.Webpack is the bundler and also what serves your file when you run npm start.
