Introduction to react JS

Introduction to react JS

1. React JS

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 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?

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

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?

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?

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

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?

There are some roles of flux such as:

· Action

· Dispatcher

· Store

· Controller view

9. How to optimize performance 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?

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store