So I have been doing a lot of Javascript learning and reading and coding these days and I think a new thread will be helpful for newbies and veterans of the language.

Javascript has become extremely popular these days and is used to do a plethora of stuff.

So shall we talk about our experiences, learning paths, which could include plain old JS or frameworks / Libraries like Angular, React etc.

I personally think JS is fun and rewarding.

I'm currently learning React and I'm trying to develop a full forum with it a learning project.

So far its been fun,

Spent the whole of yesterday developing a api backend (using Php Laravel) and implementing material UI as a front end framework..

Scouted the internet yesterday looking at various forum websites and I got a couple of ideas of which I've designed a db (mysql) for it..


Its a really tasking project but i know i will learn a lot from it especially with restful Api creation, authentication, data integrity in the Front end via flux, as well as useful design patterns in react.


I know a lot of messy code will be written but then again, haven't we all written messy code


So over to the MVPs, pcguru1 et al


There are so many frameworks / libraries it can drive someone nuts lol, meteor, sails, ember, backbone... Like WTF

Also learning react cos of react native and mobile app development...

Will also be sharing some links to articles and interesting github repos.

Here's a Javascript article that can be beneficial to folks

https://medium.freecodecamp.org/the-definitive-javascript-handbook-for-a-developer-interview-44ffc6aeb54e

yorex2011:
So I have been doing a lot of Javascript learning and reading and coding these days and I think a new thread will be helpful for newbies and veterans of the language.

Javascript has become extremely popular these days and is used to do a plethora of stuff.

So shall we talk about our experiences, learning paths, which could include plain old JS or frameworks / Libraries like Angular, React etc.

I personally think JS is fun and rewarding.

I'm currently learning React and I'm trying to develop a full forum with it a learning project.

So far its been fun,

Spent the whole of yesterday developing a api backend (using Php Laravel) and implementing material UI as a front end framework..

Scouted the internet yesterday looking at various forum websites and I got a couple of ideas of which I've designed a db (mysql) for it..


Its a really tasking project but i know i will learn a lot from it especially with restful Api creation, authentication, data integrity in the Front end via flux, as well as useful design patterns in react.


I know a lot of messy code will be written but then again, haven't we all written messy code


So over to the MVPs, pcguru1 et al


There are so many frameworks / libraries it can drive someone nuts lol, meteor, sails, ember, backbone... Like WTF

Also learning react cos of react native and mobile app development...

Will also be sharing some links to articles and interesting github repos.

Here's a Javascript article that can be beneficial to folks

https://medium.freecodecamp.org/the-definitive-javascript-handbook-for-a-developer-interview-44ffc6aeb54e

Exactly I always tell my friends, React is the visa out of this country, I've seen someone use react native in my office and the app is not only beautiful but feels fast and fluid. Sadly I don't know or use react yet only Vue, but it's something I can pick, do you use Redux, I still don't get why i should use it, other than everyone is using it.

yorex2011:
So I have been doing a lot of Javascript learning and reading and coding these days and I think a new thread will be helpful for newbies and veterans of the language.

Javascript has become extremely popular these days and is used to do a plethora of stuff.

So shall we talk about our experiences, learning paths, which could include plain old JS or frameworks / Libraries like Angular, React etc.

I personally think JS is fun and rewarding.

I'm currently learning React and I'm trying to develop a full forum with it a learning project.

So far its been fun,

Spent the whole of yesterday developing a api backend (using Php Laravel) and implementing material UI as a front end framework..

Scouted the internet yesterday looking at various forum websites and I got a couple of ideas of which I've designed a db (mysql) for it..


Its a really tasking project but i know i will learn a lot from it especially with restful Api creation, authentication, data integrity in the Front end via flux, as well as useful design patterns in react.


I know a lot of messy code will be written but then again, haven't we all written messy code


So over to the MVPs, pcguru1 et al


There are so many frameworks / libraries it can drive someone nuts lol, meteor, sails, ember, backbone... Like WTF

Also learning react cos of react native and mobile app development...

Will also be sharing some links to articles and interesting github repos.

Here's a Javascript article that can be beneficial to folks

https://medium.freecodecamp.org/the-definitive-javascript-handbook-for-a-developer-interview-44ffc6aeb54e

I like this! I'm curious, why Flux? Thoughts on Redux?

pcguru1:


Exactly I always tell my friends, React is the visa out of this country, I've seen someone use react native in my office and the app is not only beautiful but feels fast and fluid. Sadly I don't know or use react yet only Vue, but it's something I can pick, do you use Redux, I still don't get why i should use it, other than everyone is using it.

Flux = modified observer pattern, here action is a JS object

Redux = action can be functions or promises in addition to being an object.

Just picked up React, I'm a Node.js guy. Your statement about being a visa is spot on!

Here's an article i found on flux and redux

https://medium.com/@gyeon/redux-vs-flux-a31a02faccf3

I may most likely just stick with redux

4dor:


I like this! I'm curious, why Flux? Thoughts on Redux?

I'm not too savvy with the individual technologies, just about the data store design pattern for managing data...

I only cited flux solely as an example.. May probably just learn and stick to redux..

pcguru1:


Exactly I always tell my friends, React is the visa out of this country, I've seen someone use react native in my office and the app is not only beautiful but feels fast and fluid. Sadly I don't know or use react yet only Vue, but it's something I can pick, do you use Redux, I still don't get why i should use it, other than everyone is using it.

If you know vue, then react shouldn't be difficult..

I haven't tinkered with redux yet but will definitely learn/use it...

As for the why.. That i don't have the technical expertise to answer yet..

So far my experience learning react is really good... Its really not so overly difficult.. It has more to do with your skill in Javascript.

For me understanding the concepts in the following order is key..

1. The virtual DOM.
2. Components.
3. Props and States
4. Lifecycle hooks


Then classical vs functional components.
Stateless vs stateful components
Container vs présentation components
Event listeners
Dom element keys, etc

React is quite interesting i must say... Only ish is SEO considerations, (tho there is server side rendering these days).. Overall its worth it.


And yh there is high demand for react developers and Javascript developers these days.

Gonna include live updates (and may allow it to be set by the user) in the forum I'm building too... And already using material ui will potentially make creating a mobile app for it not too much of a pain in the ass..

yorex2011:


If you know vue, then react shouldn't be difficult..

I haven't tinkered with redux yet but will definitely learn/use it...

As for the why.. That i don't have the technical expertise to answer yet..

So far my experience learning react is really good... Its really not so overly difficult.. It has more to do with your skill in Javascript.

For me understanding the concepts in the following order is key..

1. The virtual DOM.
2. Components.
3. Props and States
4. Lifecycle hooks


Then classical vs functional components.
Stateless vs stateful components
Container vs présentation components
Event listeners
Dom element keys, etc

React is quite interesting i must say... Only ish is SEO considerations, (tho there is server side rendering these days).. Overall its worth it.


And yh there is high demand for react developers and Javascript developers these days.

Gonna include live updates (and may allow it to be set by the user) in the forum I'm building too... And already using material ui will potentially make creating a mobile app for it not too much of a pain in the ass..

I can pick it up, I think I will first read how it works internally, am already familiar with how it computes its Vdom, I will post an article on that how various frameworks handle their from and diffs, thanks I'm eager to learn. I've just always wanted to avoid picking up too many frameworks because at work that's what's happening and I don't like it, I prefer to have stable libraries I use. Expecting your update.

An article from one of the original authors of redux, though it's a little old

https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367

Thanks I finally decided to take last week and this week to pick up React and mehn i am amazed this is what i used to understand what was going on

1. Understanding the Internals of React
http://www.mattgreer.org/articles/react-internals-part-one-basic-rendering/
https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS/

2. Redux Concept

I started with a simple tutorial
https://github.com/reactjs/redux/tree/master/examples/counter

then switched to react-redux after reading about it.

3. TypeScript and React

Because I'm not a fan of loose typed languages I decided to go with TS since it's what i love using and ditched Babel, but am sure Babel is still behind the scenes converting TS to JS

https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
Boilerplate
https://github.com/Microsoft/TypeScript-React-Starter

So with all these knowledge I decided to work on a real life application and it's something that is currently on-going here is the UI i saw on dribbble

UI



My Attempt : https://github.com/dojoVader/ReactPlayGround/tree/dev/react-ts-addressbook

My Github Repository

I created a repo to create different boilerplates and examples because when taking another Project i'd like to just use a boilerplate and save myself the stress of starting again, here it is

https://github.com/dojoVader/ReactPlayGround



Thanks for creating this thread if not I won't have been gingered to take up React at all

Also this is my feedback on React so far while learning

Pros

1. Minimal Api when compared to Angular 4/5
2. Small Learning Curve
3. Robust Developer Tools and Debugging error is explicit and detailed
4. Build tools are amazing thanks to Babel
5. React generated code is easy to understand

Cons for me o

1. You are responsible for alot of things, how you structure your code, which Router to use, how to achieve XYZ feat in react unlike Angular where there is an opinionated structure

2. React is typically viewed from Parent Component to Child Component in terms of communication, unlike Angular 4/5 where you can use EventEmitter to handle cross communication with other components, in this case Redux is used and it can be very confusing as it's a React-ish-Pub-Sub Pattern

3. The Concept of mixing Presentation with code is still depressing but hey it works in it's own way

Thanks OP

Mehn I hate Redux

pcguru1:
Mehn I hate Redux

Wow.. Nice... I've been really busy at work... When I told my boss i was learning React, he told me to build an app with react Native...

So i decided to build an invoice generator which will have an api written in php...

I actually found it easier learning redux on react native sef..

I can finally implement it in my forum app when I'm done...

Tho I'm not using es6 on the forum, its super awesome as i used it in react Native as it helped make a lot of my code shorter and more readable..

pcguru1:
Mehn I hate Redux

But why dyu hate redux... I'm using it in my react Native app alongside a library called redux-persist to persist store to storage... Twas quite easy to set up and its been working pretty well...

My boss actually said using normal java/kotlin to develop android apps is easier than react native, tho i never really picked up the former much.

I'm sure its cos of my web background, tho Javascript still has its perks like callback hell and all.. Its still quite an experience.

I use native-base library for the mobile app
Here are some awesome packages that can make your react development really interesting..

pcguru1:
Thanks I finally decided to take last week and this week to pick up React and mehn i am amazed this is what i used to understand what was going on

1. Understanding the Internals of React
http://www.mattgreer.org/articles/react-internals-part-one-basic-rendering/
https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS/

2. Redux Concept

I started with a simple tutorial
https://github.com/reactjs/redux/tree/master/examples/counter

then switched to react-redux after reading about it.

3. TypeScript and React

Because I'm not a fan of loose typed languages I decided to go with TS since it's what i love using and ditched Babel, but am sure Babel is still behind the scenes converting TS to JS

https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
Boilerplate
https://github.com/Microsoft/TypeScript-React-Starter

So with all these knowledge I decided to work on a real life application and it's something that is currently on-going here is the UI i saw on dribbble

UI



My Attempt : https://github.com/dojoVader/ReactPlayGround/tree/dev/react-ts-addressbook

My Github Repository

I created a repo to create different boilerplates and examples because when taking another Project i'd like to just use a boilerplate and save myself the stress of starting again, here it is

https://github.com/dojoVader/ReactPlayGround



Thanks for creating this thread if not I won't have been gingered to take up React at all

Also this is my feedback on React so far while learning

Pros

1. Minimal Api when compared to Angular 4/5
2. Small Learning Curve
3. Robust Developer Tools and Debugging error is explicit and detailed
4. Build tools are amazing thanks to Babel
5. React generated code is easy to understand

Cons for me o

1. You are responsible for alot of things, how you structure your code, which Router to use, how to achieve XYZ feat in react unlike Angular where there is an opinionated structure

2. React is typically viewed from Parent Component to Child Component in terms of communication, unlike Angular 4/5 where you can use EventEmitter to handle cross communication with other components, in this case Redux is used and it can be very confusing as it's a React-ish-Pub-Sub Pattern

3. The Concept of mixing Presentation with code is still depressing but hey it works in it's own way

Thanks OP

Just took a look at the repos. You sure like your strict typing.. Code looks really well organized, noticed you also used serviceworkers. I did't bother with all those, since i'm still trying to learn the ropes. We that don't have many years experience like you guys

The problem with me is I don't subscribe to that concept of a single store where the whole application are listening for changes, I guess it hasn't grown on me, and I think it's wasteful in the sense that all components are listening to the store, and when i dispatch only certain component will read them based on the reducer.

The concept I am familiar with is each Component is isolated and they publish and subscribe to the events they fill is important, that way when the event is triggered it's only the Components that subscribed that will be notified rather than the whole component listening and only responding when the state matches their condition.

Let's just say am writing React in an angular-ish way, But mehn I love React , I built this application that in Angular 2 would have taken me much more time and it's straight forward.

Kotlin to build android app, mehn there's no much gain because with React Native you can target both platforms IOS/Android at once so I don't really see the gain in using Kotlin, I would say Java incase you need to write a Java React Component. But i could be wrong though send me some links that will make me understand Redux because that's what all companies use, I can't ignore it, my Visa depends on this. I will jump to React native later haven't had any mobile project thrown to my side.

UI still a little boring tho

yorex2011:


Just took a look at the repos. You sure like your strict typing.. Code looks really well organized, noticed you also used serviceworkers. I did't bother with all those, since i'm still trying to learn the ropes. We that don't have many years experience like you guys

lol the serviceworkers came with the template it's only meant to refresh the page when i save, I read it when i wasn't sure what it was doing. Lol JavaScript has frustrated my life alot so TypeScript saves me alot of stress.

yorex2011:
UI still a little boring tho

Am actually worse at Ui, I can replicate but i can't design from my head, I must look at Dribbble, I prefer to write code, that's why i love porn sites, they don't spend much details on UX and users find their way around,

React is fun and easy to grab even for a newbie, it allows you to do everything at a go including styling with Css, But things get messier if you switch to react native for mobile App. Things like navigation can make you fee dump and you might spend days trying to switch from one page to another. Most of the dependency are deprecated and sometimes one will need to deprecate the version of the react native before things works out.

That said, I would advise anyone who need to get things done on time with less stress to go with Ionic for mobile app and react for web app. However, learning angular before diving into ionic will give more insight.

My opinion though.

pcguru1:


Am actually worse at Ui, I can replicate but i can't design from my head, I must look at Dribbble, I prefer to write code, that's why i love porn sites, they don't spend much details on UX and users find their way around,

Epic

bet9ja:
React is fun and easy to grab even for a newbie, it allows you to do everything at a go including styling with Css, But things get messier if you switch to react native for mobile App. Things like navigation can make you fee dump and you might spend days trying to switch from one page to another. Most of the dependency are deprecated and sometimes one will need to deprecate the version of the react native before things works out.

That said, I would advise anyone who need to get things done on time with less stress to go with Ionic for mobile app and react for web app. However, learning angular before diving into ionic will give more insight.

My opinion though.

I agree with you on the navigation ish, like my own app

has an AuthNavigator which is a stack type for login and registration

and a MainRouter which is for Authenticated users,

so my render code uses redux to know if anyone is currently logged in and renders one of the above

heres my mainRouter breakdown

const ScreenRouter = DrawerNavigator(
    {
        Home: { screen: HomeScreen },
        Drafts: { screen: DraftsScreen },
        History: { screen: HistoryScreen },
        NewInvoiceRoute: {
            screen: StackNavigator(
                {
                    NewInvoice: { screen: NewInvoice },
                    InvoiceSummary: { screen: invoiceSummary },
                },
                {
                    navigationOptions: { header: null }
                }
                )
        },
    },
    {
        navigationOptions: {
            headerStyle: {
                backgroundColor: '#19b800',
            },
            headerTitleStyle: { color: 'white' },
        },

        contentComponent: props => <SideBar {...props} />
    }
);


const SettingsNavigator = StackNavigator(
    {
        Settings: {
            screen: SettingsList,
        },
        CompanySettings: {
            screen: CompanySettings,
        },
        InvoiceSettings: {
            screen: InvoiceSettings
        }
    },
    {
        navigationOptions: {
            header: null
        }
    }

);

export const MainRouter = StackNavigator(
    {
        General: {
            screen: ScreenRouter,
        },
        SettingsScreen: {
            screen: SettingsNavigator,
        },
    },
    {
        navigationOptions: {
            header: null,
        }
    }
);

once any navigator wants to give me wahala, i just switch to redux and use it as my messenger

Passing params between deeply nested is quite notorious on react native,

imagine trying to access a param and u can see it when you console.log but the next line and the app complains of undefined, you start asking yourself which lifecycle hook you should use and you just go nuts

Do you know that you can easily navigate to another page in Angular with just one line of code.


this.NavCtrl.push("AboutPage" ; and your app will navigate to ABOUT page.

With lazyloading you can just tell ionic to generate a newpage and voila, your page is ready.

ionic g page About after typing this in your console, your page will be ready and you can easily call that page from any page with
this.NavCtrl.push("AboutPage" ;

pcguru1:
The problem with me is I don't subscribe to that concept of a single store where the whole application are listening for changes, I guess it hasn't grown on me, and I think it's wasteful in the sense that all components are listening to the store, and when i dispatch only certain component will read them based on the reducer.

The concept I am familiar with is each Component is isolated and they publish and subscribe to the events they fill is important, that way when the event is triggered it's only the Components that subscribed that will be notified rather than the whole component listening and only responding when the state matches their condition.

Let's just say am writing React in an angular-ish way, But mehn I love React , I built this application that in Angular 2 would have taken me much more time and it's straight forward.

Kotlin to build android app, mehn there's no much gain because with React Native you can target both platforms IOS/Android at once so I don't really see the gain in using Kotlin, I would say Java incase you need to write a Java React Component. But i could be wrong though send me some links that will make me understand Redux because that's what all companies use, I can't ignore it, my Visa depends on this. I will jump to React native later haven't had any mobile project thrown to my side.

Thenewboston and one dude called Stephen Grider (Has some good react and redux courses on Udemy)..

redux-persist is a very good package to use with redux too

redux = Idumota market

actions = COME_AND_BUY_MALE_SHOES

action creator = bell and mouth, and hand

reducers = Potential Customers

So the shoe seller is a react component who has been given the bell (via matchDispatchToProps)..

Oya come and buy male shoes o, (dispatch being called with a payload of the shoes he has),

all customers in the market hears the announcement (all reducers);

Only male customers respond because e no consign female users,

then the either buy or not whatever payload the seller has,

the market (store) knows at all times knows the state of the seller's stock

bet9ja:
Do you know that you can easily navigate to another page in Angular with just one line of code.


this.NavCtrl.push("AboutPage" ; and your app will navigate to ABOUT page.

With lazyloading you can just tell ionic to generate a newpage and voila, your page is ready.

ionic g page About after typing this in your console, your page will be ready and you can easily call that page from any page with
this.NavCtrl.push("AboutPage" ;

Thats quite easy lol.. I've never really liked angular much tho.. Too overly complex and opionated..I will still learn it tho, just inicase i have do some maintenance work or forced to do something with it....

at least i can use that opportunity to see the ttypescript that pcguru is drooling over for

bet9ja:
React is fun and easy to grab even for a newbie, it allows you to do everything at a go including styling with Css, But things get messier if you switch to react native for mobile App. Things like navigation can make you fee dump and you might spend days trying to switch from one page to another. Most of the dependency are deprecated and sometimes one will need to deprecate the version of the react native before things works out.

That said, I would advise anyone who need to get things done on time with less stress to go with Ionic for mobile app and react for web app. However, learning angular before diving into ionic will give more insight.

My opinion though.


Below is the pix of the Vtender App i'm working on, the left is the Android view while the right is the iOS view.
The app is a business app and it can also verify government tender.

Hope you'll reduce the scrollbar width a lil, abi is it the browser/emulator?

yorex2011:


Thats quite easy lol.. I've never really liked angular much tho.. Too overly complex and opionated..I will still learn it tho, just inicase i have do some maintenance work or forced to do something with it....

at least i can use that opportunity to see the ttypescript that pcguru is drooling over for

I also don't like it, but now I'm loving it...

yorex2011:


Hope you'll reduce the scrollbar width a lil, abi is it the browser/emulator?

It is the browser emulator, once i deploy it in mobile device or android emulator, it will disappear. Let me deploy it in genymotion

Also love react native cos all i need is a text editor and my phone.. unlike android studio wey large full everywhere.. I just use wifi adb connection ( no need for cord sef ) and run my app on my phone then debug real time on my pc browser, the dev tools are just amazing i swear

I can't imagine anyone hating TypeScript lol I started with static typed language and entered JavaScript after, when I started JS I even suffered when it came to "this", its because most of the projects I do in the office are very large and I consume API a lot of API, so I don't want to be going back and forth to see what the JSON structure is or what the function takes, so its why I always go the long road to ensure everything is typed , most guys who use TypeScript in my office don't use interfaces as much as I do. In fact my TS config is so bad that if the TSLint is not obeyed it won't compile forcing me to ensure everything is strict. I used Ionic don't really like it I feels its too heavy and requires bleeding edge phones and also its very slow as DOM operations are expensive and the WebView if your app is complex you will notice a bad speed, Onsen UI is a nice Cordova project but I won't lie with React Native I don't see any advantage to Cordova apps anymore.

Infact yorex you've gingered me to try out React Native I will take it up next weekend, I was sent for React Native training but I didn't pay attention , but its the writing Component am interested in, by that i mean like Plugins. This is why I like nairaland normally I get bored and demotivated when trying out new stuffs. But if we keep sharing this might be a thread people would love, nice one bro thanks for creating this thread. Its really needed

yorex2011:
Also love react native cos all i need is a text editor and my phone.. unlike android studio wey large full everywhere.. I just use wifi adb connection ( no need for cord sef ) and run my app on my phone then debug real time on my pc browser, the dev tools are just amazing i swear

creating stuffs with a Gionee device just like me.

This thread is turning out to be the thread of the year.