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.
How to 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:
For existing React project we can follow below steps for installation:
How to 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:
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:
- Setup React. - Setup folder with npm and git. - Create HTML and Javascript (React) file.
- Setup webpack. - Install webpack. - Add configuration file.
- Setup Babel. - Install babel. - Configure webpack to use babel.
- Build and run.
- Extra useful configs. - Babel config for CSS files.
Happy learning. Best of luck everyone.
Top comments (1)
IDK man..create react app isn't such a good tool.