Introduction to react JS
Introduction to react JS
1. React JS
React Js is defined as a JavaScript library for building user interface. It’s not a framework.
Types of React JS
· Class base
· Function base
Class base: This is a old version of React JS. Class base react js is more difficult as a begginer.
Function base: This is new version of React JS. Function base react js ease as a beginner when react hooks coming.
2. Difference between framework and library
Framework: Framework is a platform that provides for building or developing application.
Framework upsides: Usually tells us what to do. Framework create a great teams that build a large application. Framework tools like angular JS, Vue.JS etc.
Framework downsides: A framework is built by writing a lot of code. That means get a more loading time and as a result application decrease performance.
Library: Library is building or room that collection of books, materials and media for use by the public in an institution.
Library upsides: libraries focus only how to use it that means giving us a full control of your application and that your choice what you want which makes the application smoother.
Library downsides: Usually simply the learn framework rules and focus on building application but a library has making application as your wish. As a result your application is to be dirty and ruin. So you need to care of it. Library tools like react and jquary.
3. What is JSX?
JSX is allows us to write in HTML elements in JavaScript and place them in the Dom without any methods.
For example:
const name => <h1> my name mehedi </h1>
JSX expression: JSX will execute the expression and return the result.
For example: const count = <h2> I am {20 + 2} years old. </h2>
4. React hooks
React hooks are the new featured for react new 16.8 version. It allow us to use state and other react hook featured without writing classes. It doesn’t work in classes.
Rules of Hooks:
· Only call hooks at the top level
· Only call hooks for react functions.
Pre-requisites for react hook
· Node version 6 or above
· Npm version 5.2 or above
· Create-react-app tool for running the react app
How to use react hook below the example:
1. import React, { useState } from ‘react’;
2.
3. function CountApp() {
4. // Declare a new state variable, which we’ll call “count”
5. const [count, setCount] = useState(0);
6.
7. return (
8. <div>
9. <p>You clicked {count} times</p>
10. <button onClick={() => setCount(count + 1)}>
11. Click me
12. </button>
13. </div>
14. );
15. }
16. export default CountApp;
5. What is react component?
React component is a independent and reusable in code. They serve the same purpose of JavaScript functions and return html via render() function.
Components are two types:
· Class components
· Functional components
Create a class component
When a creating a react components, the components name must start with an uppercase letter.
The class components include extends React.Components statement and requires a render() and return html
Example:
class Name extends React.Component {
render() {
return <p>Hi, I am a Mehedi</p>;
}
}
Create functional component
Here the structure of function is same. And return html
For example:
function Name() {
return <h2>Hi, I am also a Mehedi</h2>;
}
6. How to work react conditional rendering?
React conditional rendering is a term of described the ability to render a different user interface markup if a condition is true or false
If/else conditional rendering: below the example:
1.LoggedInUser component
Function LoggedInUser(props){
Return <div>
<h1> welcome back </h1>
<span>Log In</span>
</div>
}
2.LoggedOutUser component
Function LoggedOutUser(props){
Return <div>
<h1> Sign In, please </h1>
<span>Log Out</span>
</div>
}
3. When we will use conditional rendering
function LoggedStatus(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <LoggedInUser />;
}
return <LoggedOutUser />;
}
ReactDOM.render(
<LoggedStatus isLoggedIn={false} />,
document.getElementById(‘root’)
);
7. How react props work
React props allow you to send data- including numers, strings, functions, object and arrays etc to a component when you call on that component. If you have multiple component, you will send the data from one to another component.
For example: JSX Code
const projectData = [
{
title: “Diamond World”,
description: “A fullstack diamond world app using React JS, Node JS, MongoDB, Bootstrap”,
code: “https://github.com/mdmahdi77/Diamond-World-Client",
live: “https://last-assignment-f788f.firebaseapp.com/",
image: diamondWorld
},
{
title: “Food Stall”,
description: “Food Stall is a food searching app using HTML5, CSS3, Bootstrap, JavaScript and Netlify”,
code: “https://github.com/mdmahdi77/assignment-5",
live: “https://youthful-leavitt-be35f7.netlify.app/",
image: foodStall
},
{
title: “Cruise Queen”,
description: “Cruise Queen is a ticket booking app using HTML5, CSS3, Bootstrap, JavaScript”,
code: “https://github.com/mdmahdi77/ninja-tickets",
live: “https://loving-thompson-33f36f.netlify.app/",
image: cruiseQueen
},
{
title: “English Premier League”,
description: “English Premier League is sports related app using HTML5, CSS3, React js and netlify”,
code: “https://github.com/mdmahdi77/english-premiar-league",
live: “https://elated-bassi-4506d7.netlify.app/",
image: league
},
{
title: “Panda Commerce”,
description: “Panda Commerce is e-commerce app using HTML4, CSS3, Bootstrap and netlify”,
code: “https://github.com/mdmahdi77/panda_commerce_bootstrape",
live: “https://wonderful-sammet-2165fe.netlify.app/",
image: panda
}
]
const Project = () => {
return (
<section className=”backgroundAll”>
<Navbar></Navbar>
<div className=”container”>
<div className=”mt-5">
<h2 className=”text-center headerAll”>Projects</h2>
</div>
<div className=”row py-5">
{
projectData.map(project => <ProjectCard project={project}></ProjectCard>)
}
</div>
</div>
</section>
When you props other components
const ProjectCard = (props) => {
const { title, description, code, live, image } = props.project
return (
<div className=”col-lg-4 col-md-6 col-12 my-sm-3 my-3 text-center”>
<div class=”card h-100">
<img style={{ height: ‘200px’ }} src={image} class=”card-img-top” alt=”…” />
<div class=”card-body”>
<h5 class=”card-title text-white”>{title}</h5>
<p class=”card-text text-white”>{description}</p>
<div className=”siteLink”>
<div className=”githubLink”>
<a href={code} target=”_blank” className=”text-white”><FontAwesomeIcon className=”icon mr-1" icon={faGithub} />Github</a>
</div>
<div className=”liveLink”>
<a href={live} target=”_blank” className=”text-white”>Live Project</a>
</div>
</div>
</div>
</div>
</div>
);
8. What Is flux?
Flux is an architecture that facebook uses internally when working facebook. It’s a not framework or library. It’s a new kind of architecture that complements react and the concept of indirectly data flow.
There are some roles of flux such as:
· Action
· Dispatcher
· Store
· Controller view
9. How to optimize performance in react js?
Few optimizing performance technique in react js
· Use immutable data structures
· Function/stateless components
· Multiple chunk files
· Using production mood flag in webpack
· Dependency optimization
· Avoid inline fuction definition in the react function
· Throttling and debouncing event action in javascript
· Avoid using index as key for map
· Avoiding props in initial state
· Spreading props on dom elements
10. What is the virtual dom?
Virtual DOM is an in-memory representation of real DOM. It is a lightweight JavaScript object which is a copy of Real DOM.
Updating virtual DOM in ReactJS is faster because ReactJS uses
1. Efficient diff algorithm
2. Batched update operations
3. Efficient update of subtree only
4. Uses observable instead of dirty checking to detect the change
