React — you need to know
What is react?
React is a JavaScript library for building user interface or UI components. It’s created for fast and interactive user interface for web & mobile application.
Why react?
React is popular front-end JavaScript library. It is a easy to learn and beginner friendly front-end library. You can building a fast and interactive web and mobile applications with more functionality. It is components base library, that’s why you can create re-useable components. There are a lot of reason, you should learn react and create attractive user interface.
How React works?
React works with virtual dom. virtual dom is a real dom clone JavaScript object. when we change any data, react put the change in virtual dom and compares virtual dom with real dom. virtual dom changes only the change data in real dom instead of updating all of the objects. manipulating the real dom slower than virtual dom. that’s why react use virtual dom to increase the performance.
Some of react things — all you need to know
- Don’t confused react with framework:
React is a library not a framework. I say framework is a complete package, where library isn’t. more easily, this is the framework where some decision, method already made for you. but in react you should take all decision by yourself. react main focuses is building user interface. It’s doesn’t help for server commutation, route and so more. but a framework provide you all in on package.
2. JSX (JavaScript XML):
We write html in react, but it’s not html markup that’s we using for browser. It’s is react syntactic sugar, called JSX. JSX allow any valid javascript code, where we need to write. but html mark don’t allow to use javascript in html tag.
import React, { useState }from 'react'
const App = () => {
render ( <div>
<h1>This JSC (Javascript XML), not html markup.</h1>
</div>
)}
export default App;
3. Declarative:
In react, we use declarative style for components. because of it’s look like more predictable, readable and easy to debug.
example:
import React, { useState }from 'react'
const App = () => {
const names = [ 'salam', 'karim', 'rahim', 'akbar', 'shahid']
render ( <div>
<h1>All Names</h1>
<ul>
{
names.map(name => <li>{name}</li>
}
</ul>
</div>
)}
export default App;
4. Components:
React is a components-based front-end library. It’s make react more beautiful. you can re-use any components where and how you need. you can easily create complex UIs using components. Using components in JavaScript you can easily pass the rich data instead of JavaScript template.
import React, { useState }from 'react'
const App = () => {
render ( <div>
<h1>This is react components.</h1>
</div>
)}
export default App;
5. One way data flow:
In React, data goes one way. It’s goes from parent to child using props. props is html attribute, html is jsx. you don’t able flow data from children to parent element.
6. State:
Every time we used static data in UI, isn’t correct for modern web application. we need to create some stateful components, where state will change over time or user interaction.
see example with react hooks:
import React, { useState }from 'react'
const App = () => {
const [count, setCount] = useState(0)
render ( <div>
<h1>Counter: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increase Counter</button>
</div>
)}
export default App;
At first, we declare a state with default value 0. when user click the button state data will change with new data. parent will tell all child components for this state is changed you all should do updating with new data. react will re-render with new data by calling render() method.
7. Conditional Rendering:
Sometimes we need to render something when condition is matched, they not render when condition isn’t matching. There are so many way do this in react. we use ternary operator for seeing an example.
import React, { useState }from 'react'
const App = () => {
const [isLoggedIn, setLoggedIn] = useState(false)
render ( <div>
{
isLoggedIn ? '<h1>Hello, Mr. John</h1>' : '<h1>you need to login first</h1>'
}
<button onClick={() => setLoggedIn(true)}>Login</button>
</div>
)}
export default App;
Summary:
There are so many things we didn’t mention there, they are help you build fast and interactive user interfaces. If you want to learn or need to know more about react, just read their documentation.