Skip to main content

Week 2, ReactJS, A Game Changer!

Goals of the Week​

Learning the JS you are actually going to use is a lot different than what we just learned its because of how language keeps evolving over the time although the basics you learned remain the same and you can fallback to them any time but that's not fashionable.

You will be programming in multiple paradigms and using different semantics which can be overwhelming at the start. Our goal is to raise your bar to the point where you are excited to explore more instead of being overwhelmed.

  1. Learn Functional Programming paradigm
  2. Code practice in Functional style
  3. Learn ReactJS

Day 1: Writing pure code is more important than eating pure.​

Don't worry if you don't understand the heading yet, you will vouch on this by the end of the day. If not don't say we didn't warn: Again, we will be utilizing the Freecodecamp to start with Functional Programming.
You need to complete the Functional Programming section.

Task Due using functional programming practices:​

  1. Task 1: Telephone number validator
  2. Task 2: Caesars Cipher
  3. Task 3: Cash Register

Getting the correct output via Functional Programming approaches you learned above is the goal.

Goal of the Day​

Learn and use Functional programming practices.

Code Review​

Once done with the assignment, reach out your mentor and do a code review session for the tasks you just did. Make improvements per the guidelines and update the code in repository.

Day 2 and 3: ReactJS, What the world is mad about!​

Goal​

  1. Learn React
  2. Learn about Async nature of JS and how to handle the Asynchronous stuff
  3. Start with react on local environment
  4. Learn how to think in React

ReactJS has revolutionized the way web client applications are developed and created a whole new ecosystem of tools, frameworks and transpilers/compilers on top of JavaScript. We start by learning the basics of react via react section on freeCodeCamp.

Asynchronous nature of Javascript​

  1. The first step is to understand the problem very well, this guide from pluralsight does a fine job of laying out the problems that come with Async nature and presenting you with basic solutions.
  2. To understand Promises better and how they work, see this video.
  3. Trust me watching this guy on Monday morning does make you feel better :). For some people error handling is the most boring thing but for our guy its not. We really think error handling ability differentiates between real programmers and script kiddos. Watch Error Handling with Promises.
  4. How to fetch data from server using fetch API. This is the recommended way of doing API calls.

Solidifying React​

You have been writing Code in the browser till now but how do you start in the local environment? Follow these instructions from official react docs to get started in the local dev environment.

Go through this awesome video to solidify your React understanding and build the application alongside the tutorial:

Day 4 and 5: Let's see what you got!​

Task Due​

Ask your mentor to assign you one of the tasks from the Beginner category i.e. Restaurant Page or NPM Package Comparator

Done with the Task? Let's learn how to think better in component based frameworks such as React and verify if you did it the right way? Below are some highly recommended documents from React JS documentation which will help you in understanding and working in react better:

  1. Lifting state up
  2. Composition vs Inheritance
  3. Thinking in React

It's time to reiterate the lessons learned and make sure that you did it the way it should be done using the concepts explained. In your next code review your mentor will check for best practices you read above.

Code Review​

Once done with the assignment, reach out your mentor and do a code review session for the tasks you just did. Make improvements per the guidelines and update the code in repository.