Getting started with react

Poornima Gowda — Tue, 03 Sep 2024 13:18:39 +0000

Firstly, React is a popular JavaScript library for building UI, especially for single-page applications. It allows developers to create reusable components and efficiently manage the state of their applications. In this blog, I'll go through the process of setting up a React project and many more.

Prerequisites
Before getting into the react or creating react project, you must have to install the following tools.

1. Node.js: you can download the latest version of Node.js from the official website: https://nodejs.org/en.
2. Code Editor: You can use any editor that you comfortable with, I highly recommended to use VSCode.

How to create a project

Open command prompt or your terminal.
Run the following cmd

//Replace my-app with the name of your project.
npx create-react-app my-app

//navigate to your project directory
cd my-app 

//this cmd helps us to run our script
npm start

Folder Structure

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

1. node_modules: A directory where all the dependencies like libraries and packages required by your project are stored.

2. src: The source folder that contains all your React application code. This is where you write the components, styles, and logic for your React application.

3. package.json: A JSON file that contains metadata about your project and the dependencies it requires. It manages the project's dependencies, scripts, version, and other things.

Promises In Javascript

Poornima Gowda — Tue, 20 Aug 2024 06:01:33 +0000

In javascript, promises are one of the techniques to deal with asynchronous operations that introduced in the ES6. If you are working on like fetching data or waiting for timer using setTimeout method, much easier to manage and more readable.

What is Promises?

A promise is an object that represents the eventual completion/ failure of an asynchronous operation and its resulting value. it can be in one of three states.
1.Pending: The initial state, Operation is ongoing, neither
fulfilled nor rejected.
2.Fulfilled: The operation completed successfully.
3.Rejected: The operation failed.

Syntax

const myPromise = new Promise((resolve, reject) => {})

Firstly, we have to use a constructor to create a Promise object by using new Promise(),This is called executor. It takes a single function with two parameters: resolve() and reject().
And resolve is executed when the operation is successful. Otherwise, reject is executed when operation fails.

Consuming process:
So, we can't access promises directly, to handle the promise result we have to use .then() & .catch() method

myPromise.then(() => {
    //console here..
}).catch(() =>{
   //error
})

.then() - It is used to handle the result of a Promise once it has been resolved (successfully completed) or rejected (failed).
.catch() - This method is invoked when promise is rejected or some error has occurred in execution. This method is used for handling errors.

DEV Community: Poornima Gowda

Getting started with react

Promises In Javascript

What is Promises?

Syntax