What are Redux, Typescript, Webpack, WebSocket and Base64? How we install or use in our New and Existing project?

I just learned new technology and am still learning. Those are Redux, Typescript, Webpack, WebSocket and Base64. Now I write below some short notes about this topic from their documentation.

Redux: Redux – A predictable state container for js apps. It…


This content originally appeared on DEV Community and was authored by DEV Community

I just learned new technology and am still learning. Those are Redux, Typescript, Webpack, WebSocket and Base64. Now I write below some short notes about this topic from their documentation.

Redux: Redux - A predictable state container for js apps. It works with any UI layer; it has a large ecosystem of addons to fit our needs. It helps us to write application that behave consistently, run in different environments and easy to test. It’s devtools make easy to trace when, where, why and how our application’s state changed.

Typescript: TypeScript is a strongly typed programming language that builds on javascript. It gives us better tooling at any scale.

Webpack: It is a module bundler. It’s mainly used to bundle JavaScript files for usage in a browser.

WebSocket: The WebSocket API is an advanced technology that makes it possible to open a two interactive communication session between the user’s browser and a server. With this API, we can send messages to a server and receive event-driven responses without having to poll the server for a reply.

Base64: It is a encode-decode schemes that represent binary data in sequences of 24 bits that can be by four 6-bit Base64 digits.

Now I told how we add Redux in ours react project!

React Redux is the official React UI bindings layer for Redux. Below I take a image for installation Redux on React in a new Project

Installation:

Image description

For existing React project we can follow below steps for installation:

Image description

Now I told how we add Typescript in ours react project!

When we install or add typescript command on our react project. This command is automatically setup typescript compiler, webpack, babel etc on our react project

Installation:

Image description

After installation we see that our file extension will be on .tsx format. But if we rename file .ts format; this code will show error. Because typescript file name will be on .tsx extension format.. Than we will continue our projects.

Setup react with webpack and babel

  1. Setup React. - Setup folder with npm and git. - Create HTML and Javascript (React) file.
  2. Setup webpack. - Install webpack. - Add configuration file.
  3. Setup Babel. - Install babel. - Configure webpack to use babel.
  4. Build and run.
  5. Extra useful configs. - Babel config for CSS files.

That’s all from today. Best of luck everyone.


This content originally appeared on DEV Community and was authored by DEV Community


Print Share Comment Cite Upload Translate Updates
APA

DEV Community | Sciencx (2022-02-25T13:16:58+00:00) What are Redux, Typescript, Webpack, WebSocket and Base64? How we install or use in our New and Existing project?. Retrieved from https://www.scien.cx/2022/02/25/what-are-redux-typescript-webpack-websocket-and-base64-how-we-install-or-use-in-our-new-and-existing-project/

MLA
" » What are Redux, Typescript, Webpack, WebSocket and Base64? How we install or use in our New and Existing project?." DEV Community | Sciencx - Friday February 25, 2022, https://www.scien.cx/2022/02/25/what-are-redux-typescript-webpack-websocket-and-base64-how-we-install-or-use-in-our-new-and-existing-project/
HARVARD
DEV Community | Sciencx Friday February 25, 2022 » What are Redux, Typescript, Webpack, WebSocket and Base64? How we install or use in our New and Existing project?., viewed ,<https://www.scien.cx/2022/02/25/what-are-redux-typescript-webpack-websocket-and-base64-how-we-install-or-use-in-our-new-and-existing-project/>
VANCOUVER
DEV Community | Sciencx - » What are Redux, Typescript, Webpack, WebSocket and Base64? How we install or use in our New and Existing project?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/02/25/what-are-redux-typescript-webpack-websocket-and-base64-how-we-install-or-use-in-our-new-and-existing-project/
CHICAGO
" » What are Redux, Typescript, Webpack, WebSocket and Base64? How we install or use in our New and Existing project?." DEV Community | Sciencx - Accessed . https://www.scien.cx/2022/02/25/what-are-redux-typescript-webpack-websocket-and-base64-how-we-install-or-use-in-our-new-and-existing-project/
IEEE
" » What are Redux, Typescript, Webpack, WebSocket and Base64? How we install or use in our New and Existing project?." DEV Community | Sciencx [Online]. Available: https://www.scien.cx/2022/02/25/what-are-redux-typescript-webpack-websocket-and-base64-how-we-install-or-use-in-our-new-and-existing-project/. [Accessed: ]
rf:citation
» What are Redux, Typescript, Webpack, WebSocket and Base64? How we install or use in our New and Existing project? | DEV Community | Sciencx | https://www.scien.cx/2022/02/25/what-are-redux-typescript-webpack-websocket-and-base64-how-we-install-or-use-in-our-new-and-existing-project/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts