DEV Community: E.Tulasi Ram

React SetUps and File Structure

E.Tulasi Ram — Tue, 03 Sep 2024 16:20:59 +0000

1. Install Node.js and npm

Node.js is a JavaScript runtime that allows you to run JavaScript on the server side, and npm (Node Package Manager) is a tool for managing packages (libraries) for Node.js.

Download and install Node.js from Node.js official website. The installation includes npm, so you don't need to install npm separately.
Verify installation:

node -v
npm -v

These commands should print the versions of Node.js and npm if the installation was successful.
2. Create a New React Project
Using npx (recommended):

Open a terminal (Command Prompt on Windows, Terminal on macOS/Linux).
Run the following command:

npx create-react-app my-react-app

Replace my-react-app with your desired project name. This command uses npx to run create-react-app without installing it globally.

3. Navigate to Your Project Directory

Change to your project folder:

cd .\my-react-app\

4. Start the Development Server

Run the development server:

npm start

This command starts the development server and opens your application in the default web browser at http://localhost:3000. The server will automatically reload the page whenever you make changes to the source code.

5. Explore the Folder Structure

Here’s a breakdown of the folder structure created by create-react-app:

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── components/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── reportWebVitals.js
├── .gitignore
├── package-lock.json
├── package.json
└── README.md

public/: Contains static files that are served directly by the server.

index.html: The main HTML file where your React app is injected.
favicon.ico:The icon displayed in the browser tab.
src/: Source code of the React app.
index.js: Entry point that renders the root component.
App.js: Main React component to edit and display content.
node_modules/: Installed npm packages.
package.json: Project metadata, dependencies, and scripts.
package-lock.json: Locks dependency versions.
.gitignore: Files and directories to be ignored by Git.
README.md: Documentation for your project.

Create a React Component

React components can be either class-based or function-based. Function components are more common, especially with the use of Hooks. Here's an example of a simple function component:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

This component returns some JSX, which looks like HTML but is actually JavaScript.

Call(),Apply(),Bind() Methods

E.Tulasi Ram — Wed, 14 Aug 2024 11:33:32 +0000

Call() :

Call() method is used to invoke a function directly by passing the reference which is points to the 'this' variable inside method.

Apply():

Apply() method is similar to call method but only differeces is it takes the 2nd arguments has a array list of of the parameter which is passed to the function.

Bind():

Bind() method does not directly invoke the method but gives to the copy of the exactly same method which can be invoke later.

Promises

E.Tulasi Ram — Wed, 14 Aug 2024 10:46:46 +0000

Why Promises required?

Callbacks is a great way when we are dealing with basic cases like minimal asynchronous operations.But when we are developing a web application that has lots of code, then working with Callback will be messy. This excessive Callback nesting is often referred to as Callback hell.
To deal with such case we use promises instead of Callbacks.

How does promises work ?

Promises is an object which represents the eventual completion or failure of an asynchronus operation and return a single value
based on the operation being rejected or resolved.
It has three states

Pending

2.Fulfilled

3.Rejected

Pending:It is the initial state of each Promise. It represents that the result has not been computed yet.
Fulfilled:It means that the operation has completed.
Rejected:It represents a failure that occurs during computation.

Creating a promise

In JavaScript, we can create a Promise by using the Promise() constructor.
syntax

const promise = new Promise((resolve,reject)=>{...});

Example

 let Promise = new Promise((resolve, reject)=>{  
    let a = 3;  
    if(a==3){  
        resolve('Success');  
    }  
    else{  
        reject('Failed');  
    }  
}); 
Promise.then((message)=>{  
    console.log(message)  
}).catch((message)=>{  
console.log(message)  
})

Output
Success

Promise methods

The Promise methods are used to handle the rejection or resolution of the Promise object.

.then()

This method invokes when a Promise is either fulfilled or rejected. This method can be chained for handling the rejection or fulfillment of the Promise. It takes two functional arguments for resolved and rejected.

Example

let success = (a) => {  
    console.log(a + " it worked!")  
  }  

  let error = (a) => {  
    console.log(a + " it failed!")  
  }  

  const Promise = num => {  
    return new Promise((resolve,reject) => {  
      if((num%2)==0){  
        resolve("Success!")  
      }  
      reject("Failure!")  
    })  
  }  

  Promise(100).then(success, error)   
  Promise(21).then(success,error)

output
Success! it worked! Failure! it failed!

.Catch()

It is a great way to handle failures and rejections. It takes only one functional argument for handling the errors.

Example

const Promise = num => {  
    return new Promise((resolve,reject) => {  
      if(num > 0){  
        resolve("Success!")  
      }  
      reject("Failure!")  
    })  
  }  

  Promise(20).then(res => {  
    throw new Error();  
    console.log(res + " success!")  
  }).catch(error => {  
    console.log(error + " oh no, it failed!")  
  })

OutPut
Error oh no, it failed!

Array Methods

E.Tulasi Ram — Tue, 13 Aug 2024 16:20:45 +0000

Map(),Filter(),Reduce()

Absolutely! Understanding the array methods map(), filter(), and reduce() is essential for anyone learning JavaScript, especially for students who are diving into frameworks like React.js. These methods are not only powerful for data manipulation but also align well with functional programming principles, which are prevalent in modern JavaScript development. Let's explore each of these methods in detail.

Map()

Description:

It's return the new array by applying function to each element in original array.
The map() method in JavaScript does not manipulate the original array;

Filter()

Description:

The filter() method creates a new array containing all elements that pass a test implemented by the provided function.
The filter() method in JavaScript does not manipulate the original array;

Reduce()

Description:

The reduce() method processes the each element in an array and reduces into single value.
The reduce method does not change the original array.