Developer Anchubby

For developing mobile application like Instagram with react native and typescript,  this writing explains how to use moment package and make a basic styling. This article is continued one from previous article. 1. Preparation Make a project and install CocoaPods. $ npx @react-native-community/cli@latest init InstaTest react-native-template-typescript Install following packages. $ cd InstaTest $ npm i --save-dev @types/react-native $ npm i --save-dev @faker-js/faker $ npm i react-native-paper $ npm i react-native-safe-area-context $ npm i moment $ cd ios $ npx pod-install $ cd .. react-native-paper, react-native-safe-area-context is for MD3Colors object, which will be used for color in app. moment package is for showing time in app. npx pod-install is for linking the package to iOS. Copy the previous fake data to current project directory. $ cp -r ../FakerTest/src . 2. Making component for fake data Make Person.tsx and Person.style.ts in src/copy. This Person componen...

For developing mobile application like Instagram with react native and typescript,  this writing explains how to configure fake data for development purpose. 1. Set up for iOS and android Follow the guideline in  https://reactnative.dev/docs/set-up-your-environment 2. Create react native project and make App.tsx npx @react-native-community/cli@latest init ProjectName Template $ npx @react-native-community/cli@latest init FakerTest react-native-template-typescript During creating project you will see whether to install CocoaPods. Enter y to install. ✔ Downloading template ✔ Copying template ✔ Processing template ✔ Installing dependencies ✔ Do you want to install CocoaPods now? Needed for running iOS project … yes ⠇ Installing Ruby Gems If you didn't install it, don't worry. You can install CocoaPods later as below. CocoaPods is needed for iOS development. $ cd ios $ rm -rf Pods Podfile.lock $ pod install --repo-update Make App.tsx as below. This is minimal c...

    This writing explains How to publish your own pakcages 1. Make your account and login  Make an account in npm website. ( https://www.npmjs.com/ ) Login to your account with: npm login $ npm login It will redirect to the browser and you can login there. 2. Make your own source code Make your own source code. File name should be same as in the main property of package.json so that npm know this file is the entry point of your package. package.json { "name": "npmtest" , ... "main": "index.js" , ... } index.js module.exports = () => { return 'hello package' ; }; 3. Publish your package You can publish your package with following command. $ npm publish It will show some error because the name npmtest is already being used by others.  $ npm publish ... npm error code E403 npm error 403 403 Forbidden - PUT https://registry.npmjs.org/npmtest - You do not have permission to publish ...

   This writing explains node package version and some of npm commands. 1. Node package version Node packages always have three-digit versions. The reason for the three-digit version numbering is that it follows the SemVer (Semantic Versioning) version numbering scheme. If the version is 1.3.4, The first digit 1 is major version. If it is 0 it means it is under initial development. From 1 it means official version. A major version is released when the contents of a package have been modified to the point where they are no longer backward compatible. The second digit 3 is minor version. Minor versions are updated when it is backward compatible. The third digit 4 is patch version. A patch version is released when a problem with an existing feature has been fixed rather than when a new feature has been added. If the major version of a package you depend on has been updated, you should be careful as there is a high possibility that it will be incompatible with your exist...

  This writing explains how to manage packages with package.json. It includes dependencies between packages, package-lock.json, devDependencies, peerDependencies etc. 1. Dependencies If you install some packages, you will see the name of package will be listed in dependencies in package.json. For example if you install Express; $ npm install express { "name": "npmtest" , ... "license": "ISC" , "dependencies": { "express": "^4.21.2" } } In addition, folder named node_modules is created. There are the installed packages. You clearly only installed Express, but it contains multiple packages. These are the packages that Express depends on. Even a single package depends on many other packages, and those packages depend on yet more packages. This complex dependency relationship is why package.json is needed. 2. Package-lock.json Package-lock.json is also created when you install some packages. In...