Having a git flow is a great idea for each developer who does not want to face with too much of conflicts. So read this post if you need a practical and useful git flow.
\n\n\n\nIf you’ve been forked a repository from another repository, it’s recommended to run the following commands after cloning your forked repository:
\n\n\n\ngit remote add upstream [base repository address]\n\ngit fetch upstreamThis section is a common git flow for those repositories which is forked from another repository, and those which is not. So it doesn’t matter which one do you use. It’s recommended to follow the following git flow to decrease the potential risks.
\n\n\n\nI recommend you to create a local branch for yourself and always coding in that branch:
\n\n\n\n# create a new local branch with your custom name, for example "working"'\ngit checkout -b workingWhen you need to commit your changes, you need to do the following commands in your local branch:
\n\n\n\n# if you have new files or folders\ngit add .\n\n# if you are working on specific issue, it's better to mention your issue number in your comment with a hashtag before --> for example [#1]\ngit commit -am 'your-comment'If you reach a stable version and you need to merge your changes with the parent branch, follow the following flow:
\n\n\n\n# if your parent branch is master\ngit checkout master# if you are working on a forked repository. Get the latest changes from parent repository\n# if your main branch of your parent repository is master\ngit pull upstream master\n\n# then\ngit pulla. After finishing the second step, if there was updates caused by your pulling, you should get back to your local branch and rebase it from its parent, if not, you can skip the third step:
\n\n\n\ngit checkout working\n\ngit rebase masterb. After using rebase command, if you face with conflict(s), first of all you should resolve the conflicts and then do the following commands and repeat it again until you not facing with conflict(s) anymore:
\n\n\n\ngit add .\n\ngit rebase --continuec. Getting back to your parent branch:
\n\n\n\ngit checkout mastergit merge working\n\ngit pushIf you use forking, after following the above flow in your forked repository, you should create a merge request in your repository panel, from your forked repository to the main one and wait for reviewer to review it and merge it if it was OK.
\n\n\n\nTotally, it’s good to have a specific git flow for your development team and ask them to follow it. It will help your team to avoid facing with risky situations in pulling and pushing the codes.
Hope it being useful.
Don’t forget to share your comments with me.
Thanks.
If you’ve been forked a project from another repository, you can follow this flow for handling your git commands. … Continue reading…Git flow for a forked repository, a practical solution
\n","categories":{"nodes":[{"name":"Git"}]}},{"tags":{"nodes":[{"name":"babel"},{"name":"jsx"},{"name":"npm"},{"name":"plugin"},{"name":"react"},{"name":"typescript"},{"name":"vue"},{"name":"vue-class-component"},{"name":"vuejs"},{"name":"webpack"}]},"slug":"using-vue-with-typescript-and-jsx","content":"\nHi everyone,
I like using typescript and JSX in front-end development, that’s why I was attracted to React. But you can use class component, with typescript and JSX in developing your front-end with Vue. In this post I want to show you how to do it.
Vue is introduced a preset and a plugin for babel in its third version which is letting you to create your vue components easier with typescript and render your view with JSX.
\n\n\n\nFirst of all, you need to install the vue 3+, vue-class-component 8+, babel 7+, vue cli and typescript:
\n\n\n\nnpm i vue@^3.0.0\n##\nnpm i vue-class-component@^8.0.0-rc\n##\nnpm i @babel/core\n##\nnpm i @vue/cli\n##\nnpm i typescriptAfter that you should install webpack, webpack-cli, webpack-dev-server ( if you don’t have any specific server ), babel-loader and ts-loader:
\n\n\n\nnpm i webpack\n##\nnpm i webpack-cli@3.3.11\n##\nnpm i webpack-dev-server\n##\nnpm i babel-loader\n##\nnpm i ts-loaderFor using JSX in your components, you need to install the following packages:
\n\n\n\nnpm i @vue/babel-preset-app\n##\nnpm i @vue/babel-plugin-jsxAnd then configure your .babelrc file like this:
\n\n\n\n{\n "presets": ["@vue/babel-preset-app"],\n "plugins": ["@vue/babel-plugin-jsx"]\n}Then, create the webpack.config.js file in your root and use the following config:
\n\n\n\nconst { join } = require('path');\n\nmodule.exports = {\n mode: 'development',\n target: 'web',\n entry: join(__dirname, './app/index.tsx'),\n output: {\n filename: 'bundle.js',\n path: join(__dirname, 'dist')\n },\n module: {\n rules: [\n {\n test: /\\.(ts|tsx)/,\n exclude: /node_modules/,\n use: [{ loader: 'babel-loader' }, { loader: 'ts-loader' }]\n }\n ]\n },\n watch: true,\n resolve: {\n extensions: ['.ts', '.tsx', '.js', '.jsx', '.styl']\n },\n devServer: {\n contentBase: join(__dirname, './app'),\n compress: true,\n port: 9000,\n publicPath: '/dist/'\n }\n};Also you should configure your tsconfig.json file as below:
\n\n\n\n{\n "compileOnSave": true,\n "compilerOptions": {\n "experimentalDecorators": true,\n "target": "esnext",\n "strict": true,\n "module": "ESNext",\n "moduleResolution": "node",\n "jsx": "preserve",\n "strictPropertyInitialization": false\n },\n "exclude": ["node_modules"]\n}Then create a folder called app ( or any other name that you like, but you should remember to use the correct direction for your entry in webpack.config.js file) and create your first component in this folder like this:
\n\n\n\nimport { Vue } from "vue-class-component";\n\nexport class Home extends Vue {\n public render(): any {\n return <p>Hello world!!, this is our first vue component with JSX</p>;\n }\n}Now we need an HTML file that I called it index.html and put it in app folder: ( you can use a different name or put it in a different folder, but remember to change the devSever configuration of your webpack.config.js file)
\n\n\n\n<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Document</title>\n </head>\n <body>\n <div id="root"></div>\n <script src="/dist/bundle.js"></script>\n </body>\n</html>Now you just need an entry point which is a file in app folder, called index.tsx. You should pass your main component to createApp function and then mount it to any specific element of your DOM. Here we are mounting it to an element that its ID is “root”:
\n\n\n\nimport { createApp } from "vue";\nimport { Home } from "./home-component";\n\ncreateApp(<Home />).mount("#root");Then you can add the start script to your package.json as the following:
\n\n\n\n{\n ...\n "scripts": {\n "start": "webpack-dev-server"\n },\n ...\n}\nAfter that use the following command:
\n\n\n\nnpm startFor using properties in your component, you need to create a class and use it in your component like this:
\n\n\n\nimport { prop } from "vue-class-component";\n\nexport class UserInfoProperties {\n public name: string | undefined = prop({ type: String });\n public surname: string | undefined = prop({ type: String });\n public role?: string | undefined = prop({ type: String });\n}import { Vue } from "vue-class-component";\nimport { UserInfoProperties } from "./user-info-properties";\n\nexport class UserInfo extends Vue.with(UserInfoProperties) {\n public render(): any {\n return (\n <div>\n <p>\n <b>User info:</b>\n </p>\n <p>Name: {this.$props.name}</p>\n <p>Surname: {this.$props.surname}</p>\n <p v-show={this.$props.role}>Role: {this.$props.role}</p>\n </div>\n );\n }\n}Now if you change your Home component class and add the UserInfo component to it, you can see that it is forcing you to pass all required properties to your component. So you can use UserInfo component with role property:
\n\n\n\nimport { Vue } from "vue-class-component";\nimport { UserInfo } from "./user-info-component";\n\nexport class Home extends Vue {\n public render(): any {\n return (\n <div>\n <p>Hello world!!, this is our first vue component with JSX</p>\n <UserInfo name="Hamidreza" surname="Amini" role="developer" />\n </div>\n );\n }\n}Or without role property ( because role is optional in UserInfoProperties class ):
\n\n\n\nimport { Vue } from "vue-class-component";\nimport { UserInfo } from "./user-info-component";\n\nexport class Home extends Vue {\n public render(): any {\n return (\n <div>\n <p>Hello world!!, this is our first vue component with JSX</p>\n <UserInfo name="Hamidreza" surname="Amini" />\n </div>\n );\n }\n}That’s it. Now you can enjoy using vue with typescript and JSX. Please share your comments with me, thanks.
\n","title":"Using Vue with Typescript and JSX","featuredImage":{"node":{"srcSet":"https://hramini-back.ir/wp-content/uploads/2020/12/vuejs-jsx-typescript-300x158.png 300w, https://hramini-back.ir/wp-content/uploads/2020/12/vuejs-jsx-typescript-1024x538.png 1024w, https://hramini-back.ir/wp-content/uploads/2020/12/vuejs-jsx-typescript-768x403.png 768w, https://hramini-back.ir/wp-content/uploads/2020/12/vuejs-jsx-typescript.png 1440w"}},"date":"2020-12-31","excerpt":"Vue is introduced a preset and a plugin for babel in its third version which is letting you to create your vue components easier with typescript and render your view with JSX. … Continue reading…Using Vue with Typescript and JSX
\n","categories":{"nodes":[{"name":"JSX"},{"name":"Typescript"},{"name":"Vue"}]}}]},"categories":{"nodes":[{"name":"Back-End","id":"dGVybTo1","parentId":null},{"name":"Coffee","id":"dGVybToyMg==","parentId":null},{"name":"French","id":"dGVybToyMw==","parentId":"dGVybToyMg=="},{"name":"Front-End","id":"dGVybTo0","parentId":null},{"name":"Git","id":"dGVybToyNA==","parentId":null},{"name":"Javascript","id":"dGVybTo5","parentId":null},{"name":"JSX","id":"dGVybToxMQ==","parentId":"dGVybTo0"},{"name":"NodeJs","id":"dGVybToxMA==","parentId":"dGVybTo1"},{"name":"React","id":"dGVybTo3","parentId":"dGVybTo0"},{"name":"Typescript","id":"dGVybTo4","parentId":null},{"name":"Uncategorized","id":"dGVybTox","parentId":null},{"name":"Vue","id":"dGVybTo2","parentId":"dGVybTo0"}]}},"pageContext":{}}, "staticQueryHashes": []}