| # Day | Topics |
|---|---|
| 00 | Giriş Repo Nasıl Kullanılır Gereksinimler Kurmak |
| 01 | JavaScript Tazeleme |
| 02 | React Başlarken |
| 03 | Kurulum |
| 04 | Bileşenler |
| 05 | Sahne |
| 06 | Liste, Harita ve Tuşlar |
| 07 | Sınıf Bileşenleri |
| 08 | States |
| 09 | Koşullu Oluşturma |
| 10 | React Proje Klasör Yapısı |
| 11 | Olaylar |
| 12 | Formlar |
| 13 | Kontrollü ve Kontrolsüz Bileşen |
| 14 | Bileşen Yaşam Döngüleri |
| 15 | Üçüncü Taraf Paketleri |
| 16 | Üst Düzey Bileşenler |
| 17 | React Router |
| 18 | Fetch versus Axios |
| 19 | Projeler |
| 20 | Projeler |
| 21 | Hooks |
| 22 | Hooks Kullanan Formlar |
| 23 | Hooks Kullanarak Veri Alma |
| 24 | Hook kullanarak proje |
| 25 | Özel Hook |
| 26 | Bağlam |
| 27 | Referans |
| 28 | Projeler |
| 29 | Keşfetmek |
| 30 | Sonuçlar |
🧡🧡🧡 MUTLU KODLAMA 🧡🧡🧡
TR
Banka adı: First Century Bank
Banka adresi: 1731 N Elm St Commerce, GA 30529 USA
Routing ABA Numarası: 061120084
Hesap Numarası: 4027389169658
Hesap Türü: CHECKING
Lehtar Adı: Eren Seyfi
USA
Bank name: First Century Bank
Bank address: 1731 N Elm St Commerce, GA 30529 USA
Routing (ABA): 061120084
Account number: 4027389169658
Account type: CHECKING
Beneficiary name: Eren Seyfi
Tebrikler30 günlük React programlama yarışmasına katılmaya karar verme üzerine. Bu meydan okumada, bir React uygulaması geliştirmek için kullanmanız gereken her şeyi öğreneceksiniz. Yarışmanın sonunda 30DaysOfReact programlama sınavı tamamlama sertifikası alacaksınız. Yardıma ihtiyacınız olursa veya başkalarına yardım etmek isterseniz telgraf grubuna katılabilirsiniz.
30 Günlük React meydan okuma, hem yeni başlayanlar hem de ileri düzey JavaScript ve React geliştiricileri için bir kılavuzdur. 30 Days of React'e hoş geldiniz. React bir JavaScript kütüphanesidir. React'i kullanmaktan ve öğretmekten zevk alıyorum ve umarım siz de öyle yaparsınız. Bu adım adım 30 Days React meydan okumasında, en popüler kullanıcı arayüzü JavaScript kitaplıklarından biri olan React'i öğreneceksiniz. React, JavaScript'in yapabildiği her şeyi yapabilir. React, web sitelerine etkileşim eklemek, mobil uygulamalar, masaüstü uygulamaları, oyunlar geliştirmek için kullanılabilir. Önümüzdeki 30 gün içinde çok şey öğreneceğinize ve programlama ve problem çözme becerilerinizin de önemli ölçüde gelişeceğine inanıyorum.
Bu meydan okumayı yazmak için konuşma İngilizcesi ve daha az jargon kullanacağım. İçerik sürekli güncellenecektir. Bir yazım hatası veya dil bilgisi hatası bulursanız şaşırmayın çünkü yayınlamadan önce herhangi bir düzeltme okuması yapmıyorum. İngilizce ve bazı küçük hatalar yerine meydan okumanın ana mesajına odaklanmanızı tavsiye ederim. Bana iyileştirme istekleri gönderirseniz gerçekten minnettar olurum ve çekme istekleri göndermeden önce master'dan çekmeyi unutmayın. Bu meydan okumada kullandığım resimlerin çoğu 30DaysOfJavaScript meydan okumasından geldi, bu nedenle 30DaysOfReact dosya adlarını ve klasörlerini yeniden adlandırmanız gerekebilir. Diziler, döngüler, işlevler, nesneler, işlevsel programlama, yok etme ve yayma ve sınıf konularında iyiyseniz, o zaman zorluğu doğru bir şekilde takip edebileceksiniz. Aksi takdirde, 30DaysOfJavaScript kontrol etmenizi şiddetle tavsiye ederim.
Bu kursa dalmadan önce 30 Günde React'ın incelemesine göz atabilirsiniz.
Zorlukla başa çıkmak için aşağıdakilere sahip olmanız gerekir:
- Motivasyon
- Bir bilgisayar
- İnternet
- Bir tarayıcı
- Bir kod düzenleyici
- HTML, CSS ve JavaScript orta seviye becerisi
Bu çalışmayı desteklemek için bu depoya yıldız ekleyin ve çalışmak üzere kendi kopyanızı oluşturmak için depoyu çatallayın.
Her zaman doğrudan fork kopyanızdan çalışmalısınız.
# burada bir "ssh" bağlantısının kullanıldığını, ancak bir "https" bağlantısının aynı şekilde çalışacağını unutmayın.
git clone git@github.com:username/30-Days-Of-React.git
cd 30-Days-Of-ReactGünlük egzersizleri tamamlamak için önerim, egzersiz klasörünüzü veya yaptığınız diğer değişiklikleri barındıracak ayrı bir dal oluşturmanızdır. Bu, master dalınızı her zaman temiz tutacaktır, bu da master'ınızın her zaman orijinal master'a benzer olacağı anlamına gelir.
git checkout -b egzersiz-çözümleri # `-b`, mevcut değilse dalı oluştururYeni şubenizde, günlük alıştırmalara çözümlerinizi yapılandırmak için dosya/klasör kullanabilirsiniz.
mkdir -p çözümleri/gün-01 # `-p` iç içe dizinler oluşturmaya yardımcı olur
dokunmatik çözümler/gün-01/düzey 1.js # dokunma bir dosya oluştururÇözümlerinizi Fork'unuza teslim edin
git add solutions/day-01/level1.js
git commit -m "chore: exercise level1 complete"
git push origin exercise-solutions # "egzersiz-çözümleri" dalı daha önce oluşturulduBu repo ay boyunca günlük olarak güncellenecektir. Yeni bir günün içeriği kullanıma sunulduğunda, aşağıdaki adımlarla çatallı kopyanızı güncelleyebilirsiniz.
# 1. ana şubeye geç
git checkout master
# 2. yerel kopyanızın orijinal `...Asabeneh/30-Days-Of-React.git` bağlantısına sahip olup olmadığını kontrol edin
git remote -v
# 3. değilse, orijinale bir bağlantı ekleyin, bağlantı için herhangi bir ad seçebilir veya 'yukarı akış' kullanabilirsiniz.
git remote add upstream git@github.com/Eren-Seyfi/TR-30-Days-Of-React.git
# 4. bağlantının eklendiğini onaylamak için tekrar kontrol edin
git remote -v
# 5. now you can fetch updates from original repo, assuming you named this `upstream`
git fetch upstream
# 6. merge the updates to your local master branch
git merge upstream/master master
# 7. push the merged updates to your Forked copy on GitHub
git push origin masterNote that the updates are only applied to the master branch. If you wish to update any other branch, repeat steps 6-7 with the branch name. See snippet below for
exercise-solutionsbranch
git merge upstream/master exercise-solutions
git push origin exercise-solutionsI believe you have the motivation and a strong desire to be a developer, a computer and Internet. In addition to that basic to intermediate level HTML, CSS and JS. If you have those, then you have everything to get started.
You may not need node.js right now but you may need it for later. Install node.js.
After downloading double click and install
We can check if node is installed on our local machine by opening our device terminal or command prompt.
asabeneh $ node -v
v12.14.0When making this tutorial I was using node version 12.14.0, but now the recommended version of node.js for download is 12.17.0.
There are many browsers out there. However, I strongly recommend Google Chrome.
Install google chrome if you do not have one yet. We can write small JavaScript code on the browser console, but we do not use the browser console to develop applications.
You can open Google Chrome console either by clicking three dots at the top right corner of the browser, selecting More tools -> Developer tools or using a keyboard shortcut. I prefer using shortcuts.
To open the Chrome console using a keyboard shortcut. It is good to know the shortcut too as a JavaScript and React developer you will spend much time on a browser console and don't be lazy to open it during development.
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
After you open the Google Chrome console, try to explore the marked buttons. We will spend most of the time on the Console. The Console is the place where your JavaScript code goes. The Google Console V8 engine changes your JavaScript code to machine code. Let us write a JavaScript code on the Google Chrome console:
We can write any JavaScript code on the Google console or any browser console. However, for this challenge, we only focus on Google Chrome console. Open the console using:
Mac
Command+Option+I
Windows:
Ctl+Shift+ITo write our first JavaScript code, we used a built-in function console.log(). We passed an argument as input data, and the function displays the output. We passed 'Hello, World' as input data or argument in the console.log() function.
console.log('Hello, World!')The console.log() function can take multiple parameters separated by comma. The syntax looks like as follows:console.log(param1, param2, param3)
console.log('Hello', 'World', '!')
console.log('HAPPY', 'NEW', 'YEAR', 2020)
console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript')As you can see from the snippet code above, console.log() can take multiple arguments. It is recommended to use as many console.log() prints to check what is happening in your code but don't keep all console.log() tests on your code forever. Make your life easy by keeping the browser console open.
We add comments to our code. Comments are very important to make code more readable and to leave remarks in our code. JavaScript does not execute the comment part of our code.In JavaScript, any text line starting with // in JavaScript is a comment, and anything enclosed like this /* */ is also a comment.
Example: Single Line Comment
// This is the first comment
// This is the second comment
// I am a single line comment
Example: Multiline Comment
/*
This is a multiline comment
Multiline comments can take multiple lines
JavaScript is the language of the web
*/
Programming languages are similar to human languages. English or many other language uses words, phrases, sentences, compound sentences and other more to convey a meaningful message. The English meaning of syntax is the arrangement of words and phrases to create well-formed sentences in a language. The technical definition of syntax is the structure of statements in a computer language. Programing languages have syntax. JavaScript is a programming language and like other programming languages it has its own syntax. If we do not write a syntax that JavaScript understands, it will raise different types of errors. We will explore different kinds of JavaScript errors later. For now, let us see syntax errors.
I made a deliberate mistake. As a result, the console raises syntax errors. Actually, the syntax is very informative. It informs what type of mistake was made. By reading the error feedback guideline, we can correct the syntax and fix the problem. The process of identifying and removing errors from a program is called debugging. Let us fix the errors:
console.log('Hello, World!')
console.log('Hello, World!')So far, we saw how to display text using the console.log(). If we are printing text or string using console.log(), the text has to be inside the single quotes, double quotes, or a backtick quotes. Example:
console.log('Hello, World!')
console.log('Hello, World!')
console.log(`Hello, World!`)Now, let us practice more writing JavaScript codes using console.log() on google chrome console for number data types. In addition to the text, we can also do mathematical calculations using JavaScript. Let us do the following simple calculations. The console can directly take arguments without the console.log() function. However, it is included in this introduction because most of this challenge would be taking place in a text editor where the usage of the function would be mandatory. You can play around directly with instructions on the console.
console.log(2 + 3) // Addition
console.log(3 - 2) // Subtraction
console.log(2 * 3) // Multiplication
console.log(3 / 2) // Division
console.log(3 % 2) // Modulus - finding remainder
console.log(3 ** 2) // Exponentiation 3 ** 2 == 3 * 3We can write our codes on the browser console, but it won't do for bigger projects. In a real working environment, developers use different code editors to write their codes. In this 30 days JavaScript challenge, we will be using Visual Studio Code.
Visual studio code is a very popular open-source text editor. I would recommend to download Visual Studio Code, but if you are in favor of other editors, feel free to follow with what you have.
If you installed Visual Studio Code, let us start using it.
Open the Visual Studio Code by double-clicking its icon. When you open it, you will get this kind of interface. Try to interact with the labeled icons.
Congratulations! You have completed the setup you need to get started with React, but before we dive into React let's do a JavaScript refresher. If you are very comfortable with JavaScript you may skip day 1 JavaScript refresher. The JavaScript refresher section is vast and it may take more than one day. From my experience people usually get stuck in React because their JavaScript knowledge is very shallow therefore to fill that gap all the necessary JavaScript features which can be used in React are covered in the JavaScript refresher section. There are many exercises but you are not required to solve them. Click here if you want skip JavaScript and jump directly into React.
🎉 CONGRATULATIONS ! 🎉