Getting Started with React App

So I thought about to write posts from React technology since it is very popular and commonly used these days.

Introduction

React is a JavaScript library that is used to build user interfaces. So it's a frontend technology. It helps to develop complex UIs as well as when the data changed, React will update the particular data UI.

Piece of code called as 'components' in React. So that there could be many components in one React app.

BTW React is the best way to develop advanced UI in an efficient manner.

Create React App

You can create a new project by just giving a single command but first, you need to set up the environment.

Install NodeJS & NPM from here.

Keep in Mind ❗❕❗

There is a matching NPM version for each NodeJS version. Otherwise, it will crash your app. The mentioned link will download the matching pair. Don't worry. This is for those who have downloaded them separately.

Once the download and installation are completed you can check whether those are downloaded properly by giving the following commands on PowerShell / Command Prompt.

To check the node version: node -v

To check the NPM version: npm -v

(In my case node version is v15.5.0 & the npm version is 7.3.0.)

Next, see how to create an app.

Now you can create your app from the below command. (Create a new folder where ever you need to create a project and then open Command prompt in that file destination.)

     $  npx create-react-app my-first-app

Go to created project folder

     $  cd my-first-app

To start application

     $  npm start

Now you will see the default template of the app with React logo.

Important Dependencies

You can see the already installed dependencies in the package.json file under the dependencies section. The dependencies help to develop projects like plugins in other words.

Here are some mostly used dependencies:

react-router-dom (DOM bindings) - npm install react-router-dom
react-bootstrap (For styling) - npm install react-bootstrap
react-select (Select dropdown) - npm install react-select
axios (Integrate backend and frontend over HTTP) - npm install axios

"dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-select": "^4.3.1",
    "web-vitals": "^1.1.2"
  },

Common dependencies I've used for projects.

You can find any more dependencies from here.

React Libraries for Styling

Since React is frontend technology and hoping to develop nice UIs we need to use libraries for styling.

There 4 main styling libraries:

Bootstrap
Material UI
Ant Design
Semantic UI

Summary of each library that I found from other resources.

Conclusion

React is the best technology to develop any complex UI and full-stack project.

If you have any questions regarding this you can shoot a comment below 😊.