<figure><img alt="" src="https://cdn-images-1.medium.com/max/700/1*QqTFSE3sB-ksTPK7lKdKJA.png"></figure>Under this title, we want to introduce our integration and E2E test infrastructure for frontend applications in Trendyol GO. We used <a href="https://www.cypress.io/">Cypress</a> extensively in this process. The first implementation is for one of <a href="https://medium.com/trendyol-tech/micro-frontend-architecture-with-webpack-module-federation-part-1-9827d436bd1e">the micro-frontend applications</a> for our <a href="https://medium.com/trendyol-tech/trendyol-go-bir-front-end-teknoloji-hikayesi-1d741322a545">Trendyol GO Admin Panel project.</a>
Since the structure we designed is comprehensive, we decided to explain it in <a href="https://medium.com/trendyol-tech/how-do-we-test-our-front-end-applications-in-trendyol-go-part-2-d3b4cd5101a">two parts</a>. In this article, first, we will mention why we started the testing processes for the delivery domain. After, we will talk about how we organize the testing process. Finally, we will introduce Cypress, which is our primary tool in this journey and we will talk about some specific technical choices we made along the road.
<h3>Why We Need Tests?</h3>
Before starting, let’s talk about why we needed such a process. We have an admin panel project, where Logistics teams manage operational activities under Trendyol GO. This panel contained many workflows and was evolving into an increasingly complex structure. The main purposes of starting this process were to record these workflows and to establish a more solid structure for the development.
When we look at our motivations, the first thing was to spread the test culture to our team. Tests allow you to create a reliable and robust structure from the code you write to the business that is implemented. As we write our tests, our code starts to become cleaner and more scalable. It is important to keep these structures in order since many parts affect each other. It also helps ensure that previously developed features are not broken by new functionality. On the other hand, you will see reactions of the business to the user actions on the front, and in this way, you will also record the business information. Thence, you have the opportunity to transfer this information to the new members of the teams.
<h3>How We Worked</h3>
Now, let’s talk about how we drew a road map when we started this journey. First of all, dev-in-test and front-end developers met and decided how to start the process. We decided to write both integration and E2E tests at first. We designed integration tests to be an early part of our development. On the other hand, E2E tests would test the project deployed to the staging environment.
When we started to write the tests, we observed that the integration and E2E tests were similar to each other. The reason for this is that Cypress is an E2E test tool at its core but we used it for integration tests by defining the relationship between components and mocking every HTTP request and web socket event. On the E2E side, we decided to proceed with mocks in the same way; otherwise, the project would make many teams dependent on each other at the same time. Therefore, these dependencies would hinder the work we are trying to do by making the project bigger than necessary. We postponed the E2E side to make it comprehensive at a later time and started to focus on the integration part. At the end of the day, the E2E tests will be less in number than integration tests and only cover some happy paths for certain user stories and would hit the back-end services.
At first, we wrote tests for certain views and their sub-actions. After the coverage reached a certain point, we started developing new tasks with tests included and as a part of development itself. Thus, we had a chance to apply TDD.
<h3>What is Cypress?</h3>
<a href="https://www.cypress.io/">Cypress</a> is a tool that allows us to test any application that can run through the browser. It can work with many popular JavaScript frameworks (<a href="https://tr.reactjs.org/">React</a>, <a href="https://vuejs.org/">Vue</a>, <a href="https://angular.io/">Angular</a>). As a result, we can say that Cypress is in a tech stack independent infrastructure.
One of the best things about Cypress is that it’s free (excluding some restrictions) and open source. It provides a virtual interface(Cypress Desktop App) to observe what is the state of the app in test commands. It takes snapshots and videos so you can see what happened before and after test commands. Besides, Cypress has high popularity in the development world. At the time of writing this article, there were approximately 39.3k stars on Github and 4.1 million weekly downloads on npm.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/912/1*j6zEm2ZO3brBeEkV4nlOnw.png"></figure>Cypress is very easy to install. It can be set up as a part of the application or as a standalone project. We used the first one for our integration tests and the second one for E2E.
<h3>Our Technical Choices</h3>
Here we will talk about some choices we made along the way that makes our test architecture more robust and scalable:
<h4>- Cypress API</h4>
Let’s take a look at <a href="https://docs.cypress.io/api/table-of-contents">Cypress API</a>. To use the Cypress API, all we have to do is type cy. Cypress also has various test commands on its site in great detail. For example, one of the basic commands is the getcommand, which helps choose the element to make an assertion. After selecting the element we want to test, we use various assertion types. These structures vary according to the HTML element. We use the should keyword to make assertions. Cypress uses <a href="https://www.chaijs.com/">Chai</a> and <a href="https://mochajs.org/">Mocha</a> in its infrastructure for assertions.
<a href="https://medium.com/media/71974d3240a5ec17550e5959bd58f6c7/href">https://medium.com/media/71974d3240a5ec17550e5959bd58f6c7/href</a>As seen above, the get element has many selection types. These selection types may turn into some disadvantages in the future. I will explain these disadvantages when explaining the <a href="https://testing-library.com/docs/cypress-testing-library/intro/">cypress-testing library</a>.
<h4>- Cypress Testing Library</h4>
We use cypress-testing-library when selecting elements in our infrastructure. This plugin adds role-based selection to Cypress. In this way, we do not select elements with class, id, or even a test-id. These attributes of an element may change in the future and that makes tests more coupled to application code and makes the overall structure more fragile.
All you do is assign these roles to UI elements that you haven’t previously given semantically related roles. If you are already using an advanced design system such as <a href="https://ant.design/">Ant Design</a> or <a href="https://mui.com/">Material-UI</a>, they are already assigned to the correct semantic roles, thus making tests easier. This also applies even if you use your design system or component library. In the end, this practice helps improve the application in terms of accessibility and readability.
<a href="https://medium.com/media/ac6a855e458e8a8f98fd54af255b5f0e/href">https://medium.com/media/ac6a855e458e8a8f98fd54af255b5f0e/href</a><h4>- Experimental Session And Origin Flag</h4>
We also integrated the <a href="https://docs.cypress.io/guides/references/experiments#Configuration">experimentalSessionAndOrigin</a> flag in Cypress configuration. Normally, Cypress runs the tests one by one, following each other and sharing the same browser session. This flag enables each block to run in isolation. This means that the page is reset after each block and all active session data is cleared. We think it is better to approach writing tests this way. <a href="https://docs.cypress.io/api/commands/origin#Migrating-existing-tests">There is already information on the Cypress site that this option will be introduced by default in future versions</a>.
<h4>- Mocking Endpoint</h4>
Another very powerful feature that Cypress provides is the intercept method. We use this to mock the REST endpoints that our application uses. We give some options such as method, pathname, hostname, and the name of the fixture file where we keep the response of the endpoint in the fixture folder. It is very easy to use and has a robust selection of options in terms of functionality. For example, let’s say that when we press a button, we send a request to an endpoint. First, we mock the endpoint with the intercept method, then click the button and wait for the endpoint that we created with the label.
<a href="https://medium.com/media/53b015f4e1018a7832327eaca0f5765c/href">https://medium.com/media/53b015f4e1018a7832327eaca0f5765c/href</a>There are many advantages to mocking an endpoint. One of them is that you can start to develop tasks in parallel with back-end developers. For example, a field will be added to the endpoint on the back-end, and the front-end team can start its development using mocking without waiting for the actual endpoint. When the back-end team completes the endpoint, the process will be finished without making any changes on the front-end. In this way, it will improve your efficiency and makes the development process independent.
We can also generate our data as we mock the endpoints. In this way, our code becomes more stable in various scenarios against the bugs that will occur. Also sometimes it is hard to use real endpoint data when fixing some annoying bugs.
Another advantage is that you can write your test without connecting to the internet or a remote server.
<h4>- Cypress Command</h4>
We also use Cypress Commands extensively. This method offers the opportunity to share common functions and structures in tests. We keep the Cypress command structure in the support folder. You can reach the Cypress command with cy.{commandName}.
<a href="https://medium.com/media/5470068c89ddc8d1c4bcf533e45642e0/href">https://medium.com/media/5470068c89ddc8d1c4bcf533e45642e0/href</a>We also use cypress commands to mock endpoints. Because the application uses the same endpoints on multiple pages. Also, it makes testing easy to read and design.
<a href="https://medium.com/media/374f7a5b101592c7a4b0b6b618e8b838/href">https://medium.com/media/374f7a5b101592c7a4b0b6b618e8b838/href</a><h4>- Page Object Model</h4>
Additionally, we used the Page Object Model in our project. Page Object Model, also known as POM, is a design pattern that helps to avoid code duplication and improve the readability of code. It is a class that represents a page in the web application. You can make some logical functions according to the view of the page. We used POM because we are testing the same pages for different states of the deliveries that Trendyol GO couriers carry. At the bottom, you can see the usage of POM and example of tests.
<a href="https://medium.com/media/9b1772c416dcc61a1051929af7f66d8c/href">https://medium.com/media/9b1772c416dcc61a1051929af7f66d8c/href</a><a href="https://medium.com/media/41594053d26a7431e15cec23c7004ebd/href">https://medium.com/media/41594053d26a7431e15cec23c7004ebd/href</a><h3>Conclusion</h3>
Testing is crucial to the long-term success of an application, and the practices we talked about help ensure that your application is working properly from start to finish. It can save you from hours of development and helps catch unexpected errors and bugs in production. I advise you to check out the official <a href="https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell">documentation</a> to learn more about Cypress.
Happy coding…
<h4>REFERENCES</h4>
<ul>
<li><a href="https://medium.com/@klmlfl/cypress-io-a-hands-on-overview-ad4d498944ee">https://medium.com/@klmlfl/cypress-io-a-hands-on-overview-ad4d498944ee</a></li>
<li><a href="https://medium.com/@muratcorlu/mocking-rest-endpoints-in-web-apps-easy-way-d4cd0e9db000">https://medium.com/@muratcorlu/mocking-rest-endpoints-in-web-apps-easy-way-d4cd0e9db000</a></li>
<li><a href="https://www.toolsqa.com/cypress/page-object-pattern-in-cypress/">https://www.toolsqa.com/cypress/page-object-pattern-in-cypress/</a></li>
</ul>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=51bc34e6de1e" width="1" height="1" alt=""><hr>
<a href="https://medium.com/trendyol-tech/how-do-we-test-our-front-end-applications-in-trendyol-go-part-1-51bc34e6de1e">How Do We Test Our Front-End Applications in Trendyol GO? (Part 1)</a> was originally published in <a href="https://medium.com/trendyol-tech">Trendyol Tech</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How Do We Test Our Front-End Applications in Trendyol GO? (Part 1)

<figure><img alt="" src="https://cdn-images-1.medium.com/max/398/1*EZgrle_h7qQblnhMJdY74w.png"></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/256/1*n_zygmEzJKDH3uDfr8kONA.png"></figure>Bu yazımda yazılım dünyasında sürekli kullanılan ve yazdığınız kodu düzenleyip belirli kurallar oluşturmanızı sağlayan Eslint ve Prettier araçlarından bahsedeceğim.
Özellikle javascript dünyasında önemli bir yer kaplayan bu iki araç kodunuzun daha düzenli ve anlaşılır olmasına olanak sağlar. İlk önce Eslint ve Prettier nedir ona bakalım.
Eslint : ECMAScript/JavaScript kodunuzu statik olarak analiz ederek kodunuzdaki problemleri bulmayı sağlayan bir araçtır. Temel çalışma mantığı belirlenen kurallar doğrultusunda kodunuzdaki hataları bulur ve size geri bildirim yapar.
Prettier : kod biçimlendirici veya şekillendirici olarak geçer, prettier kullanarak kodunuzun style’daki sorunları gidermiş olursunuz. Size kodlama yaparken zaman kazandırır.
Konuyu daha iyi anlamak için Eslink ve Prettier’i bir React app’inde ve Visiual Studio Code ortamımda kullanalım.
İlk olarak Visual Studio Code ortamında <a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint">Eslint</a> ve <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Prettier</a> uzantılarını indirelim.
Daha sonra bu iki aracın Visiual Studio Code’da çalışabilmesi için birkaç ayar yapmamız gerekiyor.
Windows/Linux — File &gt; Preferences &gt; Settings.
macOS — Code &gt; Preferences &gt; Settings.
Ayarlar Kısmındaki arama bölümüne “format” yazalım ve “Editor:format On Save” kutucuğunu işaretleyelim. Yine aynı bölümden “Editor:Default Formatter” kısmını “Prettier-Code formatter (esbenp.prettier-vscode)” yapalım. Bu sayede kodumuzu kaydettiğimiz her anda prettier eklentisi çalışmış olacak ve kodumuzun düzenli hale gelmesini sağlayacak.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*QQyTog86NwH3wV_dZxHg-g.png"></figure>Şimdi bir React app’i oluşturalım.
<pre>npx create-react-app myapp</pre>
Şimdi app.js dosyasını html kodlarını düzensiz hale getirelim.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*lNnRehtphuXrkDs-zHkOkg.png"></figure>Yaptığımız değiklikleri kaydettiğimiz an prettier dosyalarımız üstünde çalışacak ve kendi default kurallarına göre kodumuzu düzenlemiş olacak.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*KMOGr0iW1xiPgpUqGj8tqg.png"></figure>Şimdi custom bir prettier dosyası oluşturup default birkaç değeri değiştirelim.
Kök dizinde .prettierrc adında bir dosya oluşturalım, bu dosyayı json formatında yazacağız. Daha sonra dosyamızın içinde şu değerleri girelim.
<pre>{</pre>
<pre> “tabWidth”: 4,</pre>
<pre> “singleQuote”: true</pre>
<pre>}</pre>
Şimdi App.js dosyasına gidip bir kaydetme işlemi yaptığımızda karşımıza şu düzende bir dosya çıkmış olacak.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*WbJqYKvXGELM9dQpg2pDmg.png"></figure>Yaptığımız değişiklikte kodumuzda tabWidth 4 yaparak girinti düzeyi başına 2 olan boşluk sayısını 4 olarak ayarladık ve singleQuote:true ile de kodumuzda stringler çift tırnak yerine tek tırnak kullanılmasını sağladık. Yapılan değişiklikleri import kısmına bakarak görebilirsiniz. Prettier kullandıkça kodunuzun temiz ve düzenli bir şekilde yazıldığını göreceksiniz, zaman ve efordan tasarruf edeceksiniz. Prettier dosyasına daha fazla seçeneği eklemek için şu <a href="https://prettier.io/docs/en/options.html">linke</a> bakabilirsiniz.
Şimdi ise kodumuzu belli kurallara göre yazmamızı sağlayan eslint dosyası oluşturalım. Bunun için Eslint Cli’nı kullacağız. Bu tool size belli sorular sorarak bir custom .eslintrc dosyası oluşturmanızı sağlıyor. Şimdi terminale şu ifadeyi yazalım.
<pre>npx eslint --init</pre>
How would you like to use ESLint? … To check syntax only ❯ To check syntax and find problems To check syntax, find problems, and enforce code style
What type of modules does your project use? … ❯ JavaScript modules (import/export) CommonJS (require/exports) None of these
Which framework does your project use? … ❯ React Vue.js None of these
Does your project use TypeScript? › No / Yes
Where does your code run? ❯ Browser Node
What format do you want your config file to be in? … JavaScript YAML ❯ JSON
Would you like to install them now with npm? No / Yes
Sorulara yukarıdaki gibi cevap verdiğimizde kök dizinizmizde .eslintrc.json adında bir dosya oluşacak.
<pre>{</pre>
<pre>"env": { "browser": true,</pre>
<pre> "es2021": true</pre>
<pre>},</pre>
<pre>"extends": [</pre>
<pre> "eslint:recommended",</pre>
<pre> "plugin:react/recommended"</pre>
<pre>],</pre>
<pre>"parserOptions": {</pre>
<pre> "ecmaFeatures": {</pre>
<pre> "jsx": true</pre>
<pre>},</pre>
<pre> "ecmaVersion": 12,</pre>
<pre> "sourceType": "module"</pre>
<pre>},</pre>
<pre>"plugins": [</pre>
<pre> "react"</pre>
<pre>],</pre>
<pre>"rules": {</pre>
<pre>}</pre>
<pre>}</pre>
Environments (env) : Bir ortam, önceden tanımlanmış global değişkenler sağlar.
Extends : Standart kuralları kullanmak veya kendinizin bütün kuralları belirlemesi yerine kural setinizi başka setlerden extend edebilirsiniz. Buna örnek eklentiler airbnb ve react-app paketidir.
Globals: (parserOptions) ESLint, desteklemek istediğiniz JavaScript dil seçeneklerini belirlemenize olanak tanır. Varsayılan olarak ESLint, ECMAScript 5 sözdizimini bekler. Ayrıştırıcı seçeneklerini kullanarak JSX’in yanı sıra diğer ECMAScript sürümleri için desteği etkinleştirebilirsiniz.
Plugins : ESLint, üçüncü taraf eklentilerin kullanımını destekler. Eklentileri bir yapılandırma dosyasının içinde yapılandırmak için, eklenti adlarının bir listesini içeren plugin anahtarı kullanılır.
Rules : ESLint çok sayıda yerleşik kuralla birlikte gelir ve eklentiler aracılığıyla daha fazla kural ekleyebilirsiniz. Projenizin hangi kuralları kullanacağını bu bölümden ayarlayabilirsiniz. Kuralların ayarları yapılırken şu değişkenleri kullanmamız gerekiyor.
"off” veya 0 : kuralı kapatır
“warn” veya 1 : kuralı uyarı olarak gösterir ( kodu etkilemez )
“error” veya 2 : kurala uyulmayan bir kod varsa hata raporu gösterir.
Şimdi react app’imizi ayağa kaldırdığımız (npm start) terminalde şu hataları göreceğiz.
<ul><li>eğer npm start komutunu çalıştırmada hata alırsanız eslintin 7.11.0 paketini indirebilirsiniz. npm i -D eslint@7.11.0
</li></ul>
<pre>src/App.js Line 6:5: ‘React’ must be in scope when using JSX react/react-in-jsx-scope Line 7:7: ‘React’ must be in scope when using JSX react/react-in-jsx-scope Line 8:9: ‘React’ must be in scope when using JSX react/react-in-jsx-scope Line 9:9: ‘React’ must be in scope when using JSX react/react-in-jsx-scope Line 10:16: ‘React’ must be in scope when using JSX react/react-in-jsx-scope Line 12:9: ‘React’ must be in scope when using JSX react/react-in-jsx-scope</pre>
Bunun sebebi default olarak create-react-app ile oluşturduğumuz app’lerde React ‘ı import etmesine gerek kalmadan uygulamayı hatasız ayağa kaldırabiliyoruz. Fakat .eslintrc dosyasında extend ettiğimiz yapılarda React’ın javascript dosyalarında import edilmesi gerektiğini içeren kurallar bulunuyor. Bu kuralları kendimiz .eslintrc de rules anahtarından değiştirebiliriz.
<pre>"rules": {</pre>
<pre> "react/react-in-jsx-scope": "off"</pre>
<pre>}</pre>
Rules kısımını yukarıdaki gibi değiştirdiğimizde ve tekrar uygulamayı ayağa kaldırdığımızda sorun ortadan kalkacaktır. Gördüğünüz gibi eğer kodunuz .eslintrc.json dosyasında bulunan kurallara uymaz ise hata verecektir.
Şimdi ise eslinte popüler bir eklenti olan .eslint-config-airbnb paketini entegre edelim. Bunun için komut satırına şu ifadeyi yazıp çalıştıralım.
<pre>npx install-peerdeps -D eslint-config-airbnb</pre>
Bu ifadeyle gerekli tüm paketleri indirmiş olacağız. Daha sonra airbnb eklentisini kullanmak için .eslintrc.json dosyasındaki extends anahtarına airbnb yi eklicez.
<pre>"extends": ["plugin:react/recommended", "airbnb", "airbnb/hooks"]</pre>
Daha sonra tekrar npm start ile uygulamamızı ayağa kaldırdığımızda aşağıdaki gibi hatalar alacağız.
<pre>Line 6:5:JSX not allowed in files with extension '.js' react/jsx-filename-extension Line 10:16: `code` must be placed on a new line react/jsx-one-expression-per-line Line 10:39: ` and save to reload. ` must be placed on a new line react/jsx-one-expression-per-line src/index.js Line 8:3: JSX not allowed in files with extension '.js' react/jsx-filename-extension Line 11:34: Missing trailing comma comma-dangle src/reportWebVitals.js Line 1:25: Expected parentheses around arrow function argument arrow-parens Line 3:32: Expected a line break after this opening brace object-curly-newline Line 3:74: Expected a line break before this closing brace object-curly-newline</pre>
Yine javascript dosyalarımızın içinde kurallara uymayan kodlar bulunuyor. Örnek olarak ‘.js’ uzantılı dosyalarda JSX’e izin verilmez die bir hata alıyoruz. Bu durumu rules kısmına bazı kurallar ekleyerek giderebiliriz.
<pre>"rules": {</pre>
<pre> "react/react-in-jsx-scope": "off",</pre>
<pre> "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],</pre>
<pre> "object-curly-newline": ["error", { "multiline": true }],</pre>
<pre> "comma-dangle": "off",</pre>
<pre> "arrow-parens": "off"</pre>
<pre>}</pre>
Bu kısmı da değiştirdikten sonra dosyamızın son hali şu şekilde olacak.
<pre>{</pre>
<pre>"env": {</pre>
<pre> "browser": true,</pre>
<pre> "es2021": true</pre>
<pre>},</pre>
<pre>"extends": ["plugin:react/recommended", "airbnb", "airbnb/hooks"],</pre>
<pre>"parserOptions": {</pre>
<pre> "ecmaFeatures": {</pre>
<pre> "jsx": true</pre>
<pre> },</pre>
<pre> "ecmaVersion": 12,</pre>
<pre> "sourceType": "module"</pre>
<pre>},</pre>
<pre>"plugins": ["react"],</pre>
<pre>"rules": {</pre>
<pre> "react/react-in-jsx-scope": "off",</pre>
<pre> "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],</pre>
<pre> "object-curly-newline": ["error", { "multiline": true }],</pre>
<pre> "arrow-parens": "off"</pre>
<pre> }</pre>
<pre>}</pre>
<ul><li>Yukarıdaki koddaki tüm kuralları off yapmadan da prettierrc dosyasına belirli kurallar koyarak kodumuzdaki hataları giderebiliriz.</li></ul>
Örnek olarak rules kısmındaki comma-dangle kurallarını silip, .prettierrc dosyasına trailingComma:”all” ifadesini ekleyebiliriz. Bu şekilde dosyalarımızı kaydettiğimizde comma-dangle sorunu çözülmüş olacaktır. Dosyalarımız son hali aşağıdaki gibi olacaktır.
.eslintrc.json
<pre>{</pre>
<pre>"env": {</pre>
<pre> "browser": true,</pre>
<pre> "es2021": true</pre>
<pre>},</pre>
<pre>"extends": ["plugin:react/recommended", "airbnb", "airbnb/hooks"],</pre>
<pre>"parserOptions": {</pre>
<pre> "ecmaFeatures": {</pre>
<pre> "jsx": true</pre>
<pre> },</pre>
<pre> "ecmaVersion": 12,</pre>
<pre> "sourceType": "module"</pre>
<pre>},</pre>
<pre>"plugins": ["react"],</pre>
<pre>"rules": {</pre>
<pre> "react/react-in-jsx-scope": "off",</pre>
<pre> "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],</pre>
<pre> "object-curly-newline": ["error", { "multiline": true }],</pre>
<pre> "no-console": [0]</pre>
<pre>}</pre>
<pre>}</pre>
.prettierrc
<pre>{</pre>
<pre> "singleQuote": true,</pre>
<pre> "trailingComma": "all",</pre>
<pre> "tabWidth": 2</pre>
<pre>}</pre>
Gördüğümüz gibi eslint ve prettier birbirleriyle senkronize çalışabiliyor. Eslint ve prettier kullanarak kodumuzun daha düzenli ve belli kurallara göre yazılmasını sağlayabilirsiniz.
Daha fazla bilgi için <a href="https://eslint.org/docs/user-guide/getting-started">Eslint</a> ve <a href="https://prettier.io/docs/en/index.html">Prettier</a> siteleriniz ziyaret edebiliriz.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=deac57bf4fb0" width="1" height="1" alt="">

Visual Studio Code ve React Uygulamalarında Eslint ve Prettier Kullanımı

<figure><img alt="" src="https://cdn-images-1.medium.com/max/358/1*TsurEWHQG4ZMnFM7H9anwA.jpeg"></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/230/1*3vb2Q-xF21kGer50U_qxqQ.jpeg"></figure>In this article, I will talk about Eslint and Prettier tools that are constantly used in the software world and that allow you to edit your code and create certain rules.
These two tools, which occupy an important role especially in the world of javascript, allow your code to be more organized and understandable. Let’s first look at what Eslint and Prettier are.
Eslint : It is a tool that provides static analysis of your ECMAScript/JavaScript code to find problems in your code. The basic working logic finds the errors in your code in line with the determined rules and gives you some feedback.
Prettier: It is called code formatter or shaper, by using prettier you can fix the style problems of your code. It saves your time while coding.
Let’s use Eslink and Prettier in a React app and Visual Studio Code environment to understand the subject better.
First, let’s download the <a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint">Eslint</a> and <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Prettier</a> extensions in the Visual Studio Code environment.
Then we need to make a few settings so that these two tools can work in Visual Studio Code.
Windows/Linux — File &gt; Preferences &gt; Settings.
macOS — Code &gt; Preferences &gt; Settings.
Let’s write “format” in the search section and mark the “Editor:Format On Save” box. After that, choose Prettier-Code formatter (esbenp.prettier-vscode) in Default Formatter. In this way, every time we save our code, the prettier plugin will be running and it will ensure that our code becomes organized.
<figure><img alt="" src="https://cdn-images-1.medium.com/proxy/1*QQyTog86NwH3wV_dZxHg-g.png"></figure>Let’s create a React app.
<pre>npx create-react-app myapp</pre>
Let’s make the HTML codes of the app.js file unorganized.
<figure><img alt="" src="https://cdn-images-1.medium.com/proxy/1*lNnRehtphuXrkDs-zHkOkg.png"></figure>As soon as we save the changes in the file, our prettier will work on our files and will have organized our code according to its own default rules.
<figure><img alt="" src="https://cdn-images-1.medium.com/proxy/1*KMOGr0iW1xiPgpUqGj8tqg.png"></figure>After that, you should create a file named .prettierrc in the root directory, we will write this file in JSON format. Then, enter the following values in our file.
<pre>{</pre>
<pre>“tabWidth”: 4,</pre>
<pre>“singleQuote”: true</pre>
<pre>}</pre>
When we save the App.js file, we will see a file in the following order.
<figure><img alt="" src="https://cdn-images-1.medium.com/proxy/1*WbJqYKvXGELM9dQpg2pDmg.png"></figure>In the change we made, we set the number of spaces from 2 per indentation level to 4 by making tabWidth 4 in our code, and with singleQuote:true, we provided the use of single quotes instead of double quotes in our code. You can see the changes made by looking at the import section. As you use Prettier, you will see that your code is written cleanly and neatly, and you will save time and effort. To add more options to the Prettier file, you can refer to this <a href="https://prettier.io/docs/en/options.html">link</a>.
Now let’s create an Eslint file that allows us to write our code according to certain rules. We will use the Eslint Cli for this. This tool allows you to create a custom .eslintrc file by asking specific questions. Now let’s type the following expression in the terminal.
<pre>npx eslint --init</pre>
How would you like to use ESLint? … To check syntax only ❯ To check syntax and find problems To check syntax, find problems, and enforce code style
What type of modules does your project use? … ❯ JavaScript modules (import/export) CommonJS (require/exports) None of these
Which framework does your project use? … ❯ React Vue.js None of these
Does your project use TypeScript? › No / Yes
Where does your code run? ❯ Browser Node
What format do you want your config file to be in? … JavaScript YAML ❯ JSON
Would you like to install them now with npm? No / Yes
When we answer the questions as above, a file named .eslintrc.json will be created in our root directory.
<pre>{</pre>
<pre>"env": { "browser": true,</pre>
<pre>"es2021": true</pre>
<pre>},</pre>
<pre>"extends": [</pre>
<pre>"eslint:recommended",</pre>
<pre>"plugin:react/recommended"</pre>
<pre>],</pre>
<pre>"parserOptions": {</pre>
<pre>"ecmaFeatures": {</pre>
<pre>"jsx": true</pre>
<pre>},</pre>
<pre>"ecmaVersion": 12,</pre>
<pre>"sourceType": "module"</pre>
<pre>},</pre>
<pre>"plugins": [</pre>
<pre>"react"</pre>
<pre>],</pre>
<pre>"rules": {</pre>
<pre>}</pre>
<pre>}</pre>
Environments (env): An environment provides predefined global variables.
Extends: You can extend your rule set from other sets instead of using standard rules. Example plugins are the Airbnb and react-app packages.
Globals: (parserOptions) ESLint allows you to specify the JavaScript language options you want to support. By default, ESLint expects ECMAScript 5 syntax. You can enable support for JSX as well as other versions of ECMAScript using the parser options.
Plugins: ESLint supports the use of third-party plugins. To configure plugins inside a configuration file, the plugin key is used, which contains a list of plugin names.
Rules: ESLint comes with lots of built-in rules and you can add more rules via plugins. You can set which rules your project will use from this key. We need to use the following variables when setting the rules.
“off” or 0: turns off the rule
“warn” or 1: shows rule as a warning (does not affect code)
“error” or a 2: if there is rule-breaking code, it will show an error report.
Now we will see the following errors in the terminal where we have started our react app (npm start)
<ul><li>If you get an error running the npm start command, you can download the Eslint 7.11.0 package. npm i -D eslint@7.11.0
</li></ul>
<pre>src/App.js Line 6:5: ‘React’ must be in scope when using JSX react/react-in-jsx-scope Line 7:7: ‘React’ must be in scope when using JSX react/react-in-jsx-scope Line 8:9: ‘React’ must be in scope when using JSX react/react-in-jsx-scope Line 9:9: ‘React’ must be in scope when using JSX react/react-in-jsx-scope Line 10:16: ‘React’ must be in scope when using JSX react/react-in-jsx-scope Line 12:9: ‘React’ must be in scope when using JSX react/react-in-jsx-scope</pre>
The reason for this is that we create an app with create-react-app by default, we can run the application without any error without the need to import React package. However, in the structures we extend in the .eslintrc file, there are rules that include React must be imported in javascript files. We can change these rules ourselves from the rules key in .eslintrc.
<pre>"rules": {</pre>
<pre>"react/react-in-jsx-scope": "off"</pre>
<pre>}</pre>
When we change the Rules section as above and run the application again, the problem will disappear. As you can see, if your code does not comply with the rules in the .eslintrc.json file, it will throw an error.
Now let’s integrate the .eslint-config-airbnb package, which is a popular extension for Eslint. For this, write the following statement on the command line and run it.
<pre>npx install-peerdeps -D eslint-config-airbnb</pre>
We will have downloaded all the necessary packages with this command. Then we add airbnb eslint packages to the extends key in the .eslintrc.json file to use it.
<pre>"extends": ["plugin:react/recommended", "airbnb", "airbnb/hooks"]</pre>
Then, when we start our application again (npm start), we will get errors as follows.
<pre>Line 6:5:JSX not allowed in files with extension '.js' react/jsx-filename-extension Line 10:16: `code` must be placed on a new line react/jsx-one-expression-per-line Line 10:39: ` and save to reload. ` must be placed on a new line react/jsx-one-expression-per-line src/index.js Line 8:3: JSX not allowed in files with extension '.js' react/jsx-filename-extension Line 11:34: Missing trailing comma comma-dangle src/reportWebVitals.js Line 1:25: Expected parentheses around arrow function argument arrow-parens Line 3:32: Expected a line break after this opening brace object-curly-newline Line 3:74: Expected a line break before this closing brace object-curly-newline</pre>
There are codes in our javascript files that do not comply with the rules. For example, we get an error that JSX is not allowed in files with ‘.js’ extension. We can fix this situation by adding some rules.
<pre>"rules": {</pre>
<pre>"react/react-in-jsx-scope": "off",</pre>
<pre>"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],</pre>
<pre>"object-curly-newline": ["error", { "multiline": true }],</pre>
<pre>"comma-dangle": "off",</pre>
<pre>"arrow-parens": "off"</pre>
<pre>}</pre>
After changing this part, the final version of our file will be as follows.
<pre>{</pre>
<pre>"env": {</pre>
<pre>"browser": true,</pre>
<pre>"es2021": true</pre>
<pre>},</pre>
<pre>"extends": ["plugin:react/recommended", "airbnb", "airbnb/hooks"],</pre>
<pre>"parserOptions": {</pre>
<pre>"ecmaFeatures": {</pre>
<pre>"jsx": true</pre>
<pre>},</pre>
<pre>"ecmaVersion": 12,</pre>
<pre>"sourceType": "module"</pre>
<pre>},</pre>
<pre>"plugins": ["react"],</pre>
<pre>"rules": {</pre>
<pre>"react/react-in-jsx-scope": "off",</pre>
<pre>"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],</pre>
<pre>"object-curly-newline": ["error", { "multiline": true }],</pre>
<pre>"arrow-parens": "off"</pre>
<pre>}</pre>
<pre>}</pre>
Without turning off all the rules in the code above, we can fix the errors in our code by putting certain rules in the .prettierrc file.
For example, we can delete the comma-dangle rules and add “trailingComma:all “ to the .prettierrc file. In this way, when we save our files, the comma-dangle problem will be solved. The final version of our files will be as follows.
.eslintrc.json
<pre>{</pre>
<pre>"env": {</pre>
<pre>"browser": true,</pre>
<pre>"es2021": true</pre>
<pre>},</pre>
<pre>"extends": ["plugin:react/recommended", "airbnb", "airbnb/hooks"],</pre>
<pre>"parserOptions": {</pre>
<pre>"ecmaFeatures": {</pre>
<pre>"jsx": true</pre>
<pre>},</pre>
<pre>"ecmaVersion": 12,</pre>
<pre>"sourceType": "module"</pre>
<pre>},</pre>
<pre>"plugins": ["react"],</pre>
<pre>"rules": {</pre>
<pre>"react/react-in-jsx-scope": "off",</pre>
<pre>"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],</pre>
<pre>"object-curly-newline": ["error", { "multiline": true }],</pre>
<pre>"no-console": [0]</pre>
<pre>}</pre>
<pre>}</pre>
.prettierrc
<pre>{</pre>
<pre>"singleQuote": true,</pre>
<pre>"trailingComma": "all",</pre>
<pre>"tabWidth": 2</pre>
<pre>}</pre>
As you can see, Eslint and Prettier can work in sync with each other. By using them, you can ensure that your code is written more regularly and by certain rules.
For more information, you can visit your <a href="https://eslint.org/docs/user-guide/getting-started">Eslint</a> and <a href="https://prettier.io/docs/en/index.html">Prettier</a> sites.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=9f494bb98c16" width="1" height="1" alt="">

How to use Eslint and Prettier in Visual Studio Code and React Apps

<h3>Git versiyon kontrol sistemi</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/1*yMQ1NvU1dztBvISi1I9zjQ.jpeg"></figure>Merhabalar bugün sizlere yazılım dünyasında en çok kullanılan araçların başında gelen git ve GitHub’dan bahsedeceğim. Git , yazılıma başlayan bireyler için çok önemli bir araçtır ve kullanılması da çok yararlı ve kullanışlıdır. Kodunuzun farklı sürümlerini izlemenize ve diğer geliştiricilerle işbirliği yapmanıza yardımcı olur. Eğer bir proje üstünde çalışıyorsanız proje üstünde hangi değişikliklerin olduğunu, kim tarafından ve ne zaman yapıldığı hakkındaki bilgileri bilmek istersiniz. Git bu konuda size yardımcı olan araçların başında gelir.
Git ilk öğrenilmeye başladığında biraz korkutucu gelebilir fakat size bu yazımda git ve GitHub platformunu anlaşılır ve sade bir şekilde aktarmaya çalışacağım.
Yazımın temel başlıkları şu şekilde olacak;
<blockquote>Git nedir?</blockquote>
<blockquote>GitHub nedir?</blockquote>
<blockquote>Git kullanımına nasıl başlarız?</blockquote>
<blockquote>Git değişimleri nasıl kontrol eder ve iş akışı nasıl sağlanır?</blockquote>
<h4>Git nedir?</h4>
Git bir versiyon kontrol sistemi olarak adlandırılır. Bir kodlama projesinde diğer geliştiricilerle işbirliği yapmak veya kendi projeniz üzerinde çalışmak istiyorsanız Git kullanmanız çok önemlidir. Git sistemini bilgisayara indirmek için şu <a href="https://git-scm.com/downloads">bağlantıyı</a> kullanabilirsiniz. Bu bağlantıda bilgisayar sisteminize uygun talimatları uygulayarak kolay bir şekilde git sistemini indirebilirsiniz. (Windows,Mac,Linux)
<h4>GitHub nedir?</h4>
GitHub git projelerinizi uzak bir sunucuda(bulutta) saklamanızı sağlayan bir üründür. Önemli belirtilmesi gereken şey ise GitHub git demek değildir. GitHub sadece dosyalarınızı sakladığınız bir depolama yeridir. Github gibi dosyalarınızı saklayabileceğiniz diğer servislerden birkaçı Gitlab ve Bitbucket’dir.
<h4>Git kullanımına nasıl başlarız?</h4>
Git kullanımını terminalde komutlar yazarak veya <a href="https://www.gitkraken.com/">Gitkraten</a> gibi grafik kullanıcı arabirimi olan ürünleri kullanabilirsiniz. Fakat terminal kullanımı daha avantajlı ve kullanışlı olduğu için bu bölümden devam edeceğiz. Ayrıca git dokümantasyonuna şu <a href="https://git-scm.com/doc">bağlantıdan</a> ulaşabilirsiniz.
İlk önce projemiz için bir klasör oluşturarak başlayalım bunun için manuel olarak yada terminale mkdir klasörismi yazarak oluşturabilirsiniz. Klasörünüzün içine giriş yapmak için ise terminalden cd klasörismi komutunu kullanabiliriz.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/343/1*CV4zYqUGTe-j0zjP1HKCiw.jpeg"></figure>Resimde de görüldüğü gibi yaptığımız işlemlerden sonra dosya uzantısının sonunda oluşturduğumuz klasörün ismi bulunuyor. Bu oluşturduğumuz dosyanın içinde olduğumuzu gösterir.
Proje klasörümüze girdikten sonra Git’i kullanmaya başlamak için git init komutunu kullanarak bir depo(repository) oluşturmanız gerekecek. Bu komutu girdikten sonra ekranda herhangi bir şey görünmese de arka planda git deposu dosya içine kurulacaktır. Git deposunu görmek için windows işletim sistemlerinde , proje dosyanızın içinde gizli dosyaları görüntülemek için görünüm ayarlarınızdan gizli öğeler kutucuğuna tıklayarak veya terminalden ls -a komutunu kullanarak görebilirsiniz.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/420/1*ASf_e-EeGpwBl-_Ul__lLA.jpeg"></figure>ls ile klasörümüzün içindeki dosyaları görebiliriz fakat klasörümüz boş olduğu için herhangi bir dosya göremiyoruz fakat ls -a komutu ile git tarafından oluşturulan gizli dosyaları görebiliriz.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1022/1*045DG5sKJgW0RAucyfcnlg.jpeg"></figure>Git deposu proje dosyalarınızda yapılan tüm değişiklikleri takip edip kaydeder. Bilgisayarımızda bulunan bu depoya yerel depo(local repository) denir. Daha önce GitHub ve Gitlab gibi servislerden bahsetmiştik. Yerel depomuzu bu servislerden birine gönderdiğimizde ise oluşan depoya uzak depo(remote repository) denir. Yani GitHub’ı yerel depomuzu sakladığımız uzak depo olarak düşünebiliriz. Bu sayede proje üzerinde birçok geliştirici ile ortaklaşa çalışmalar sürdürebiliriz ayrıca bilgisayarımızın başına bir kaza geldiğinde dosyalarımızı yedeklemeyi sağlarız.
Başka bir geliştirici bizim projemize katkıda bulunmak için GitHub üzerinde projemizi klonlayabilir veya başka bir deyişle kendi bilgisayarına indirebilir. Kullanıcı indirdiği bu projeyi kendi bilgisayarında görüntüleyebilir ve bu proje yerel depo(local repository) olarak adlandırılır.
Projenizin versiyonlarını kaydetmek için git commitişlemi uygularız. Bu sürüm diğer sürümlerden bağımsız proje dosyalarını içerir.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/880/1*5VACuxm4MSvYxbZzJdfjUg.png"></figure>Commit işlemini anlamak için git içinden bulunan birbirinden farklı bölümleri anlamamız gerekir. Bu bölümler çalışma dizini(working directory), hazırlık alanı(staging area) ve depo(repository)dir.
Çalışma dizini temelde proje klasörümüzün içeriği ile temsil edilir ve projemizde dosya ekleyebileceğimiz, düzenleyebileceğimiz ve silebileceğimiz bir çalışma ortamıdır.
Hazırlık alanı kaba bir taslak alan gibidir. Bir sonraki işlememize neyi dahil etmek istediğimizi seçmek için dosyaların güncellenmiş sürümlerini ekleyebileceğimiz veya dosyaları kaldırabileceğimiz yerdir.
Ve son olarak depo, temelde bizim kayıtlarımızın yapıldıktan sonra yaşadığı yerdir. Git klasöründe, kaydetme geçmişi, objects adı verilen bir klasörle temsil edilir.
<h4>Git değişimleri nasıl kontrol eder ve iş akışı nasıl sağlanır?</h4>
Bir projeye başlamak için bir klasörün içine bir dosya eklememiz gerekir. Örnek olarak deneme klasörünün içine text1.txt(herhangi bir programlama dili dosya uzantısı da olabilir) dosyası oluşturacağız. Dosya oluşturmak için kullanacağımız komut touch dosyaismiolacaktır.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/467/1*Dvpcy_b3CkXB9eic48pRAQ.jpeg"></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/531/1*5ihUBuhftESB0l1IaZy2iw.jpeg"></figure>Daha sonra dosyamıza birkaç cümle ekleyelim ve kaydedelim. Terminalden git statuskomutunu girelim. Bu komut bize çalışma dizininiz ile hazırlık alanımızın durumunu söyleyecek ve ikisi arasında herhangi bir fark olup olmadığını söyleyecektir. Bu komutu çalıştırdıktan sonra bir hata alacağız, git bizi çalışma dizinimizde değişikliğe uğramış bir dosya olduğunu kırmızı renkte gösteriyor ve bunu hazırlık alanına göndermemiz gerektiğini söylüyor. Tabi bunu her değişiklik yaptığınızda göndermenize gerek yok, değişikliklerinizin hepsini tamamladıktan sonra da gönderebilirsiniz.
Değişikliğe uğramış dosyamızı hazırlık alanına göndermek için git add dosyaismikomutunu kullanıyoruz. Bu komutu terminale girersek o dosyayı hazırlık alanına(staging area) gönderiyor, eğer git add .komutunu girersek çalışma dizinindeki tüm değişikliğe uğramış tüm dosyaları hazırlık alanına gönderiyor.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/470/1*qxaCBTOZippYhcCF6fLC3g.jpeg"></figure>Bu işlemi tamamladıktan sonra tekrar git status işlemini komutunu uygularsak git bize hangi dosyaların hazırlık alanında bulunduğunu bize gösteriyor. Gördüğünüz üzere hazırlık alanına geçmiş dosya yeşil renge döndü.
Son olarak commit(kayıt) işlemi yapmak için git commit -m 'mesaj' işlemini kullanıyoruz. Burada ki -m “mesaj” işlemi kayıt edeceğiniz sürümün ismi veya yaptığınız değişikliklerin ismini içerebilir ve “mesaj” alanını istediğiniz şekilde değiştirebilirsiniz.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/413/1*V1e52SjtRYarPxtKIb1fhQ.jpeg"></figure>Daha projemizde yaptığımız versiyon kayıtlarını görmek için “git log” komutunu kullanıyoruz gördüğünüz üzere ilk kayıt dosyası karşımıza çıktı. Ve kayıt dosyasında 40 karakterli harf ve sayılardan oluşan bir dizin görüyoruz. Bunu ileriki zamanlarda yaptığımız kayıt dosyalarını tekrar geri çağırmak için referans olarak kullanabiliriz.
<h4>— Git Branch Nedir?</h4>
Git branch projemizi dallandırmaya yarayan bir özelliktir. Örnek olarak bir proje gerçekleştiriyoruz ve projemize bir özellik koyacağız fakat bu özellik projemizde bozulmalara yol açabilir veya birçok insanın çalıştığı bir projede herkes kendine bir branch açıp o alanda çalışma yapabilir. Branch özelliği kullanarak projemizi farklı dallara ayırırız ve projemizde yapacağımız değişiklikleri o branch de devam ederiz.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/1*MjtppP3iNVd0oX2-U5IfVg.jpeg"></figure>Dosyamızdaki git branchleri görmek için .git/refs/heads klasörüne gidebiliriz. Gördüğümüz üzere master adında bir dosya görüyoruz. Master branchi bizim projemizin ana branchi oluyor. Terminalde git branchkomutunu yazarak projemizde bulunan branchleri kontrol edebiliriz.
Brancler gerçekten proje hazırlanmasında çok önemlidir çünkü diğer insanlarla işbirliği yapmayı ve aynı anda projenizin birden çok özelliği veya farklı bölümleri üzerinde çalışmayı çok daha kolaylaştırırlar.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/414/1*_7vjQIvHfHWX2pcHjOE10A.jpeg"></figure>git branch branchismikomutunu kullanarak farklı bir branch oluşturalım. Daha sonra git branchkomutunu girerek branch isimlerimizi görebiliriz. Gördüğünüz üzere iki adet branchimiz karşımıza çıktı. Yeni oluşturduğumuz branch üzerinden işlem yapmak için git checkout brachismikomutunu kullanıyoruz. Resimde de görüldüğü üzere dosta uzantısı özellik1 branchi oldu.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/576/1*N1HHlbSJa-aq26ZqJSQlRA.jpeg"></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/418/1*0NZODfAzGG1GSPrtAaXN_w.jpeg"></figure>Şimdi yeni branchimiz üzerinde bir dosya ekleyelim.ve dosyamızın içine girerek bir cümle yazıp kayıt edelim. Daha sonra dosyamıza commit işlemi uygulayalım.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/412/1*rWxTzdh4u01jXYaMQ9cm8Q.jpeg"></figure>ls komutunu kullanarak özellik1 branchimizin içindeki dosyaları görelim. Şuan gördüğünüz üzere klasörümüzde hem text1.txt hem de text2.txt dosyası bulunuyor ve özellik1 branchi içindeyiz. Ana branche girmek için git checkout masterkomutunu kullanıyoruz. Şimdi ise gördüğünüz üzere proje klasörümüzde sadece text1.txt dosyası bulunuyor.
Yani git branch ile projemizin bir kopyasıyla başka bir alanda çalışıp değişiklikler yapabiliriz ve bu değişikliklerden ana proje dosyamız etkilenmez.
Git kullanımı hakkında güzel kaynaklar:
<ul>
<li><a href="https://www.freecodecamp.org/news/practical-git-and-git-workflows/">How to Use Git and Git Workflows - a Practical Guide</a></li>
<li><a href="https://www.freecodecamp.org/news/git-cheat-sheet/">Git Cheat Sheet - 50 Git Commands You Should Know</a></li>
</ul>
Şimdiye kadar buraya geldiyseniz, tebrikler! Git hakkında öğrenilecek daha pek çok şey var ve bu yazımda sadece temel kullanımında bahsettim. Bir sonraki yazılarımdan farklı konulardan bahsedeceğim.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=c655c3591e33" width="1" height="1" alt="">