30 Days Of React

_{Author: Asabeneh Yetayeh}

October, 2020

Day 1 >>

How to Use Repo

Requirements

Setup | | 01 | JavaScript Refresher | | 02 | Getting Started React | | 03 | Setting Up | | 04 | Components | | 05 | Props | | 06 | List, Map and Keys | | 07 | Class Components | | 08 | States | | 09 | Conditional Rendering | | 10 | React Project Folder Structure | | 11 | Events | | 12 | Forms | | 13 | Controlled and Uncontrolled Component | | 14 | Component Life Cycles | | 15 | Third Party Packages | | 16 | Higher Order Components | | 17 | React Router | | 18 | Fetch versus Axios | | 19 | Projects | | 20 | Projects | | 21 | Hooks | | 22 | Forms Using Hook | | 23 | Fetching Data Using Hooks | | 24 | Project using Hooks | | 25 | Custom Hooks | | 26 | Context | | 27 | Ref | | 28 | project | | 29 | Explore | | 30 | Conclusions |

🧡🧡🧡 HAPPY CODING 🧡🧡🧡

💖 Sponsors

Our amazing sponsors for supporting my open-source contribution and the 30 Days of Challenge series!

Current Sponsor

  <img src="https://raw.githubusercontent.com/Asabeneh/asabeneh/master/images/Wispr_Flow-logo.png"
       width="400px"
       alt="Wispr Flow Logo"
       title="Wispr Flow" />

Talk to code, stay in the Flow.

Flow is built for devs who live in their tools. Speak and give more context, get better results.

🙌 Become a Sponsor

You can support this project by becoming a sponsor on GitHub Sponsors or through PayPal.

Every contribution, big or small, makes a huge difference. Thank you for your support! 🌟

• Introduction
• Requirements
• How to Use Repo
• Star and Fork this Repo
• Clone your Fork
• Create a New Branch
• Structure Exercise Solutions
• Commit Exercise Solutions
• Update your Fork Daily
• Setup
• Install Node.js
• Browser
  • Installing Google Chrome
  • Opening Google Chrome Console
  • Writing Code on Browser Console
  • Console.log
  • Console.log with Multiple Arguments
  • Comments
  • Syntax
  • Arithmetics
• Code Editor
  • Installing Visual Studio Code
  • How to Use Visual Studio Code

Introduction

Congratulations on deciding to participate in 30 days of React programming challenge. In this challenge you will learn everything you need to use to develop a React application. In the end of the challenge you will get a 30DaysOfReact programming challenge completion certificate. In order to get a certificate, you have to enroll to DevOsome which is an interactive and engaging online educational platform.

In case you need help or if you would like to help others you may join the telegram group.

A 30DaysOfReact challenge is a guide for both beginners and advanced JavaScript and React developers. Welcome to 30 Days Of React. React is a JavaScript library. I enjoy using and teaching React and I hope you will do so too. In this step by step 30 Days React challenge, you will learn React which is one of most popular user interface JavaScript libraries. React can do everything that JavaScript can do. React can be used to add interactivity to websites, to develop mobile apps, desktop applications, games. I believe you will learn quite a lot in the next 30 days and your programming and problem solving skills will also be improved significantly.

I will use conversational English and less jargons to write this challenge. The content will be continuously updated. If you find a typo or grammar mistakes don't be surprised because I don't do any proof read before I publish it. I would recommend you to focus on the main message of the challenge instead of the English and some minor mistakes. I really appreciate if you send me pull requests for improvement and remember to pull first from master before you send pull requests. Most of the images I have used in this challenge came from 30DaysOfJavaScript challenge therefore you may need to rename file names and folders 30DaysOfReact. If you are good at arrays, loops, functions, objects, functional programming, destructuring and spreading and class then you will be able to follow the challenge properly. Otherwise, I strongly recommend you to check 30DaysOfJavaScript.

Before you dive into this course, you may check the review of 30 Days Of React.

This challenge is easy to read, written in conversational English, engaging, motivating and at the same time, it is very demanding. You need to allocate much time to finish this challenge. If you are a visual learner, you may get the video lesson on Washera YouTube channel. Subscribe the channel, comment and ask questions on YouTube vides and be proactive, the author will eventually notice you.

The author likes to hear your opinion about the challenge, share your thoughts about the 30DaysOfJavaScript challenge. You can leave your testimonial on this link

Learn with Asabeneh by joining the upcoming CODING BOOTCAMP

Requirements

To get along with the challenge you need to have the following:

1. Motivation
2. A computer
3. Internet
4. A browser
5. A code editor
6. HTML, CSS and JavaScript intermediate level skill

How to Use Repo

Star and Fork this Repo

Star this repo to support this work and Fork the repo to create your own copy to work from.

Clone your Fork

You should always work directly from your forked copy.

# note that an `ssh` link is used here, but an `https` link will work the same
git clone git@github.com:username/30-Days-Of-React.git
cd 30-Days-Of-React

Create a New Branch

To complete daily exercises, my suggestion is to create a separate branch to house your exercise folder or any other changes you make. This will keep your master branch clean at all times, which means your master will always be similar to the original master.

git checkout -b exercise-solutions # `-b` creates the branch if it does not exist

Structure Exercise Solutions

In your new branch, you can use files/folders to structure your solutions to daily exercises

mkdir -p solutions/day-01 # `-p` helps create nested directories
touch solutions/day-01/level1.js # touch creates a file

Commit Exercise Solutions

Commit your solutions to your Fork

git add solutions/day-01/level1.js
git commit -m "chore: exercise level1 complete"
git push origin exercise-solutions # branch `exercise-solutions` was created earlier

Update your Fork Daily

This repo will be updated daily throughout the month. When a new day's content becomes available, you can update your forked copy with the steps below.

# 1. switch to master branch
git checkout master
# 2. check if your local copy has a link to original `...Asabeneh/30-Days-Of-React.git`
git remote -v
# 3. if not, add a link to original, you can choose any name for the link or use `upstream`
git remote add upstream git@github.com:Asabeneh/30-Days-Of-React.git
# 4. check again to confirm link added
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 master

Note 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-solutions branch

git merge upstream/master exercise-solutions
git push origin exercise-solutions

Setup

I believe you have the motivation and a strong desire to be a developer, a computer and Internet. In addition to that basic to intermediate