100 days of react

100 days of React Challenge

Posted on Posted in Blogs, Technology

Today, the 20th Feb, 2019 I am going to undertake my biggest challenge till date. I am going to commit a little bit of my time everyday for 100 days towards learning/mastering the React library, which is a frontend javascript library. To be honest I already know the basics of react, but I’ve been procrastinating in really mastering this technology and using it in clients’ projects. I hope by the time I finish this challenge, I’ll be creating the frontend of all my clients’ apps using react.

I’ll be logging down my progress everyday in this blog. The source code for all the projects is available in Github, link here.

Day 001: 20/2/19

I created a github repository. The folder name is React-app. It is just testing out the react library on a HTML file. I’m not using node or npm here. I’ve just used react, react-dom and babel libraries as CDN links as follows:

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js" ></script >
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" ></script >
<script src="https://unpkg.com/babel-standalone@6/babel.min.js" > </script >

Note: While writing the javascript code, inside the react components that we create, we’re writing JSX which needs to be compiled into plain javascript by Babel. So the script tags containing react code should be of type “text/babel”.

Day 002: 21/2/19

I created a react app using Node and npx, and create-react-app CLI. It is a simple hello application, where you enter your name and press submit, then you are greeted with a message.

Day 003: 22/2/19

Using a fake RESTFUL API (https://jsonplaceholder.typicode.com/posts) I’ve created a react app to display some posts. First I asynchronously fetched the data using the FETCH API. The fetch api returns a promise, from which I extracted the array containing the posts and set it as the components state. In the render method, I displayed the posts as list items.

Day 004: 23/2/19

Used Reddit Api to display latest React JS subreddits. It doesn’t require authentication. I’ll try twitter api which requires authentication and is a bit more complex, sometime in the future.

Day 005: 24/2/19

Created my own API in express (node). It simple returns an array of posts stored in a file. The API is exposed at port 5000 while the react app runs at port 3000. In the lifecycle method ‘componentDidMount’, I’ve done a fetch API call, and when the promise resolves, I save the returned array in the component’s state. In the render method, I map over the values and display them as list items.

Day 006: 25/2/19

Working on top of yesterday’s app. So no new folder created. This code is pushed to day005 folder. Created POST request handling in the express API, so that we can create a post in the react app on a form, and after posting, the App component refreshes to show the new Post. No validation or sanitization implemented. This code is awefull. LOL.

Day 007: 26/2/19
Added external mongoDB database to our react application. MLab is an awesome mongoDB cloud provider. They have awesome free plans(one used here). End of week 1 of 100daysOfReactChallenge.

Day 008: 27/2/19
Tried React Hooks for the first Time. I’m not using node or npm here. I’ve just used react, react-dom and babel libraries as CDN links. Worked on the addition game of the first day’s project. Everything works perfectly. I love react hooks.

Day 009: 28/2/19

Tried Redux for the first time. It is a predictable state container for JavaScript apps. Note “Javascript app”. It doesn’t have to be a React app. It works kinda in a publish-subscribe pattern. Since it is a javascript library, I first tried including it in script tags, in a simple html file and made a vanilla javascript application which just increments or decrements a number on button clicks.

Day 010: 1/3/19

Tried Redux with React for the first time. Made a copy of my day 5’s app and implemented app level state management with redux. To be honest, I’m still a bit confused. Need to work on this a few more days. The code can be found in the folder ‘day10ReduxInReact’ in the github repository.

Day 011: 2/3/19

Practiced redux in react with jsonplaceholder API. Need more practice, its still quite confusing.

Day 012: 3/3/19

Practiced more redux in react with FAKE API!!!! I used setTimeout function to simulate network delays. It also provides Async feature, so thunk middleware can be used. Kinda getting the hang of it. Need more practice though.

Day 013: 4/3/19

Attempted Next.js app. Its a server side React framework. Made an app that shows bitcoin prices using a free API. Followed a tutorial by Brad Traversy.

Day 014: 5/3/19

Practiced more redux in react w with jsonplaceholder API. I re-did the day12 app.

Day 015: 6/3/19

Tried making a horoscope app using an API https://astrologyapi.com/ but cannot make requests from localhost as its protected by CORS policy. Will try to deploy and check tomorrow.

Day 016: 7/3/19

Using API https://astrologyapi.com/ made a horoscope app in react with redux. Its a continuation of yesterday’s project. Hosted on my shared Godaddy hosting. URL: http://jinsoft.in/games/astrology/

I have written a blog on how to host a react app, made with create-react-app in Shared Cpanel hosting. Link: http://jinsoft.in/host-react-app-on-shared-cpanel-hosting/

Day 017: 8/3/19

Implemented redux in the react app I made in day 3. This was a quick redux practice.

Day 018: 9/3/19

Learned about react router.

Day 019: 10/3/19

Learned about Client Side Rendering, Server Side Rendering and Static Site Generators and their use cases. Practiced react router.

Day 020: 11/3/19

Learned about Gatsby which is a Static Site Generator framework. Created a small broiler-plate.

Day 021: 12/3/19

Learned more about Gatsby and GraphQL.

Day 022: 13/3/19

Created a multi-part Form Submission App. Front end only

Day 023: 14/3/19

Learned more about Server Side Rendering, webpack bundling and running react on node server.

Dday 024: 15/3/19

Spent a couple of hours in FFF Twitch Stream where MPJ started a new project, also in React. Had a discussion on my 100days challenge with MPJ and people in the chat. Got the first star in this repo!!!
Spent another hour watching this awesome youtube channel called ReactCasts https://www.youtube.com/channel/UCZkjWyyLvzWeoVWEpRemrDQ/videos
Hope I’ll do some coding tomorrow!!!

Day 025: 16/3/19

React Children API: Made a slideShow of lions using react children API.

Day 026: 17/3/19

React Context API. Watched a few youtube videos on the context API.

Day 027: 18/3/19

Had an introductory session on Vue to get a comparision with React. Personally I like react better.

Day 028: 19/3/19

Started a TODO list app. Will complete tomorrow.

Day 029: 20/3/19

Worked on TODO list app.

Day 030:

Finished the Todo app using redux. Initial list is fetched from jsonplaceholder API.

Day 031: 22/3/19

Planning on a location tracker app using google geolocation tracking API. Went through some documentation and youtube videos.

Day 032: 23/3/19

Going through documentation of google maps API.

Day 033: 24/3/19

Couldn’t find a way to get live co-ordinates of my phone directly from any API(google account, manufacturer, IMEI number). Maybe need to create a mobile app to send the live co-ordinates to a server. Is it time to start learning react-native????

Day 034: 25/3/19

Finally starting to learn react-native. Used an online editor tool (https://snack.expo.io/) to experiment a little.

Day 035: 4/4/19

Been away to another city for a few days. In that trip had the opportunity to teach some university student about web development and react in particular. This was a 2 day workshop so it was just an introductory program. At the end the students were given to make a timer in react using state.

To add on it, I created a clock in a canvas and made it tick according to this timer, thus making the project a stopwatch. It is live here: http://jinsoft.in/games/stopwatch/index.html

Day 036: 8/4/19

Again had to be away for a couple of days. Today I listen to a podcast by the creator of hooks Dan Abramov with MPJ.

Day 037: 10/4/19

Watched an hour long tutorial on fileUploads using react hooks and bootstrap.


If you liked this article please comment and show your support and interest so that I’ll be motivated to continue this effort. Like our facebook page if you haven’t already. And if you have any questions please comment. I’ll try to reply all.