Inspired by codemind101

I want to go on a personal #30daysofcode to learn ReactJs and Nodejs up to a level where I can get a job and hopefully with nairalanders. I am still a student and would try to update my progress daily.

Let's start

All of my work would be pushed to https://github.com/kolalekan

I have been trying to wriggle myself around node and can create apis up to a certain level

Day 1:
I am just getting started with react and currently working on a project myreads

I am reading data from an api (not created by me) and it shows a list of books, which are in 3 different categories each (currently reading, want to read, none).

I should be able to switch between each of the categories for a particular book while the categories of the books remain the same after I visit next time.

I should be able to search for a particular book using search strings and the state of the categories would still remain the same


For example, I have many books in the collection, I am able to change the category of a particular book - "Introduction to SEO" from none to want to read

When I visit next time, the category ought to still remain as want to read (via the api).

I can decide to search for the particular book "Introduction to SEO" and still see the category of the book marked as want to read

I hope I can get this done within the time frame, the whole project would reside on https://github.com/kolalekan/myreads

Following

wao great one bro
following we will be ur accountability partner.

Yesterday was Day 1 and I was able to do something despite the busy schedule

I have been trying to make sure to learn Responsive Design because I have been too over reliant on Bootstrap to help me get basic stuffs done
I decided to go with Flexbox not knowing what was coming for me

Based on things I read about having a mobile first approach, I started with mobile. I was able to learn how to use flexbox and mediaQuery to get me a favorable design for most of the screen sizes but not after it showed me pepper.
I also created my Book/Books component which made my work even easier and suitable for reuse
Fetching data from the api now and rendering the data well


I also tried implementing the dropdown of the react-select dropdown which gave me many problems. Boy I saw trouble and eventually I googled the problem and realized I was using the package wrongly


Na smalls sha, I am learning bit by bit, glad about that

All the new changes can be found on https://github.com/kolalekan/myreads

Looking to learn even more stuffs today

--abeg ignore the Volvo in the screenshot biko

kolalekan:
Yesterday was Day 1 and I was able to do something despite the busy schedule

I have been trying to make sure to learn Responsive Design because I have been too over reliant on Bootstrap to help me get basic stuffs done
I decided to go with Flexbox not knowing what was coming for me

Based on things I read about having a mobile first approach, I started with mobile. I was able to learn how to use flexbox and mediaQuery to get me a favorable design for most of the screen sizes but not after it showed me pepper.
I also created my Book/Books component which made my work even easier and suitable for reuse
Fetching data from the api now and rendering the data well


I also tried implementing the dropdown of the react-select dropdown which gave me many problems. Boy I saw trouble and eventually I googled the problem and realized I was using the package wrongly


Na smalls sha, I am learning bit by bit, glad about that

All the new changes can be found on https://github.com/kolalekan/myreads

Looking to learn even more stuffs today

--abeg ignore the Volvo in the screenshot biko

What API are u using?
Want to build a similar project

Codemind isn't updating his thread.
I'm watching him....but I don't think he knows

modestbrowser:

What API are u using?
Want to build a similar project

https://github.com/kolalekan/myreads/blob/master/src/utils/booksAPI.js

You can check this link, it's on the first lkne

Day 2

I continued work on the project, experienced quite a number of problems in trying to hold the states of each of the books. I was also able to send data from my child component (Book.js) back to the parent component (App.js). I have been able to build the dropdown successfully and I have my state containing all the books changing when I change the value of the dropdown.

I also tweaked one or two things in the design to make it look better.

By tomorrow, I would have been able to make sure that a change in the dropdown would cause an effect in the page rendering the data (the backbone for this has been established in my book state)
I would also have the search function working totally

I thought I knew javascript but javascript showed me pepper, me self pour pepper for the eye of javascript. Lots of new functions learnt

Within these two days of starting this project, I have been able to see the entire beauty of react, I just get some sort of flexibility that makes me play around with all the data and render it as I want. It also helps to break your styling and you can easily make changes to the styles.

Good job from Facebook

Changes can be found on https://github.com/kolalekan/myreads/

I'll start this project with Node.js and bootstrap 2moro

Phew!
Day 3 is here already, choi

I intended to finish what I was working on today and yes, I am about 95% with implementing most of the features I am working on

I have been able to successfully manage the state across the applications and components. I also learnt how to make use of React-router (Router and Link components) and implemented it in navigating to the search page. The search page works now and I can change the category of a particular book and still have it changed on the main page
There is still a bug I have been trying to look at on the search page though, I'd appreciate professional help

On the main page, when I change the categories, it automatically gets added to the section allocated for the category and gets removed when I change the category, enough of the story, I'd share a gif of everything I have been getting to say

It has given me lots of problems and I have been able to grasp so much javascript within this short time

I am loving this react so much, it has so much resemblance with flutter (but unfortunately I cannot write flutter currently due to laptop issues)

I am looking at learning redux next as I am following a tutorial series, I'd keep updating everyone on the redux and share whatever I learn


I'd also love any project anyone can give me, just something to bolster up my skills while applying redux to it

All recent changes can be found on the repository


-I'd be sharing the gif tomorrow as I cannot generate it right now

Please does anyone have an idea of a react project I can undertake?

kolalekan:
Please does anyone have an idea of a react project I can undertake?

A real time dashboard. Got the idea while watching Bloomberg. I also want to build it before this month runs out

4dor:


A real time dashboard. Got the idea while watching Bloomberg. I also want to build it before this month runs out

Can you shed more light on it, I am like 70% done on a currency converter app and may come up with a real time weather app that updates

How do you want to fetch the data real time? Thank you

kolalekan:


Can you shed more light on it, I am like 70% done on a currency converter app and may come up with a real time weather app that updates

How do you want to fetch the data real time? Thank you

A real time weather update sounds like it but I hope to build one for currency/stock price.

I have two ideas for fetching data in real time

1. Plugging Ajax into componentDidMount

2. Socket.io

I might end up using socket.io

4dor:


A real time weather update sounds like it but I hope to build one for currency/stock price.

I have two ideas for fetching data in real time

1. Plugging Ajax into componentDidMount

2. Socket.io

Sounds nice, might end up using socket.io

I thought the componentDidMount is called only once in the particular component?


Also, I'm experiencing a bug in my search
If I wanna search for "the house"

When I type t, it brings out all the items in the array
When I type th, it brings out all the items with t
When I type the, it brings out all the items with th

I tried doing setState in my render method and it gave me errors. Do you have any idea how I can solve this?

Olalekank:

Sounds nice, might end up using socket.io

I thought the componentDidMount is called only once in the particular component?


Also, I'm experiencing a bug in my search
If I wanna search for "the house"

When I type t, it brings out all the items in the array
When I type th, it brings out all the items with t
When I type the, it brings out all the items with th

I tried doing setState in my render method and it gave me errors. Do you have any idea how I can solve this?

Yes...that's where Ajax comes in to do the dirty job. I'll use Socket to avoid any headache.

How can I get access to the code? Sounds like a problem with "value" .I'll need to see the code to be sure

4dor:


Yes...that's where Ajax comes in to do the dirty job. I'll use Socket to avoid any headache.

How can I get access to the code? Sounds like a problem with "value" .I'll need to see the code to be sure

That's the problem I'm having exactly

Please check
https://github.com/kolalekan/myreads/

Inside the components/books/book.js file

Olalekank:

That's the problem I'm having exactly

Please check
https://github.com/kolalekan/myreads/

Inside the components/books/book.js file

I'll check it before I go to bed

4dor:


I'll check it before I go to bed

Thanks, please check the action here
https://myreads-olalelakn.herokuapp.com


I'm not done with adding styles but that should be fixed soon

Olalekank:

Thanks, please check the action here
https://myreads-olalelakn.herokuapp.com


I'm not done with adding styles but that should be fixed soon

You might need to check this again. Site is blank.

4dor:


You might need to check this again. Site is blank.

I am sorry
I changed the address as there was a mistake in the url

Here is the new URL : https://myreads-olalekan.herokuapp.com/

Thank you

Okay, so this is day 4, learnt more about using fetch api and working better with states,
I started a currency converter app this evening and I was able complete it

I'd love for someone to help me review and tell me things I can improve on and correct to get a better experience

Here is the link to the live/working version

I'd finally start learning redux tomorrow and hope to implement it in a even more complex app


Here is a link to the currency converter
https://currency-convater.herokuapp.com/

Olalekank:

Sounds nice, might end up using socket.io

I thought the componentDidMount is called only once in the particular component?


Also, I'm experiencing a bug in my search
If I wanna search for "the house"

When I type t, it brings out all the items in the array
When I type th, it brings out all the items with t
When I type the, it brings out all the items with th

I tried doing setState in my render method and it gave me errors. Do you have any idea how I can solve this?

After looking at your code for some minutes, I think the real problem is in the Search Component (changeInput method and the stuff you are rendering). You might what to rewrite it. Check the SO example below

https://stackoverflow.com/questions/51726391/how-to-create-a-search-field-in-reactjs

I know its early days but you might want to read up on how to structure your components. You'll see some tips on the official React site

4dor:
I know its early days but you might want to read up on how to structure your components. You'll see some tips on the official React site

Thank you for that, please do you have a specific link on how to get this in the correct structure?

Also I'd like to send you a PM, are you fine by that?

kolalekan:


Thank you for that, please do you have a specific link on how to get this in the correct structure?

Also I'd like to send you a PM, are you fine by that?

https://reactjs.org/docs/thinking-in-react.html

Is the number in your signature registered on Whatsapp? If yes I'll send you a message.

4dor:


https://reactjs.org/docs/thinking-in-react.html

Is the number in your signature registered on Whatsapp? If yes I'll send you a message.

Thanks

I don't use it for WhatsApp again

Can you drop your number?


BTW, I'm the one being the two monickers

Olalekank:

Thanks

I don't use it for WhatsApp again

Can you drop your number?


BTW, I'm the one being the two monickers

I've replied your PM

OMG, how bad of me I failed to update for 2 consecutive days. School has had its own part in taking my time.

Day 5 AND 6
However I talked extensively with 4dor and he gave me priceless advice. In part of the 30 days of code, he gave me a list of topics to actually study (which I have not started covering). In addition to the advice and list of topics he gave me, he also sent me a book on "Data Structures and Algorithms using javascript" written by Sammie Bae.

I learnt about the Big O notation better (and still looking for extra resource to learn Master Theorem for calculating the time complexity of recursive functions), using recursions and setting a base condition to prevent you from going to stack overflow (pun intended), some javascript refreshers on arrays and strings, some memory management techniques.

These are some of the topics that are covered before entering into the popular data structures and various searching, sorting algorithms.

Back to life, I finished up with the currency converter (though still need a few touches)

Following the tutorial series I have been using, we started redux and I have been trying to wrap my head around this redux of a thing. Having a central store and making the state of our app predictive.

They are teaching it this way
- Redux alone
- Redux + UI (HTML and javascript)
- Redux + React

Today, I'd be covering a couple of things
- Sets as well as the Searching and Sorting * Algorithm category
- Redux alone and Redux + UI

I am impressed. if you are around lagos i will help you with 4 free video courses on data structure on algorithms from colt steel and andrea Noriega and advanced javascript concepts from udemy

kolalekan:
OMG, how bad of me I failed to update for 2 consecutive days. School has had its own part in taking my time.

Day 5 AND 6
However I talked extensively with 4dor and he gave me priceless advice. In part of the 30 days of code, he gave me a list of topics to actually study (which I have not started covering). In addition to the advice and list of topics he gave me, he also sent me a book on "Data Structures and Algorithms using javascript" written by Sammie Bae.

I learnt about the Big O notation better (and still looking for extra resource to learn Master Theorem for calculating the time complexity of recursive functions), using recursions and setting a base condition to prevent you from going to stack overflow (pun intended), some javascript refreshers on arrays and strings, some memory management techniques.

These are some of the topics that are covered before entering into the popular data structures and various searching, sorting algorithms.

Back to life, I finished up with the currency converter (though still need a few touches)

Following the tutorial series I have been using, we started redux and I have been trying to wrap my head around this redux of a thing. Having a central store and making the state of our app predictive.

They are teaching it this way
- Redux alone
- Redux + UI (HTML and javascript)
- Redux + React

Today, I'd be covering a couple of things
- Sets as well as the Searching and Sorting * Algorithm category
- Redux alone and Redux + UI

afuye:
I am impressed. if you are around lagos i will help you with 4 free video courses on data structure on algorithms from colt steel and andrea Noriega and advanced javascript concepts from udemy

Thank you! I am in Lagos