An Object Is A

Learn how to create a simple wheel image slider component for your front-end web design in ReactJS.
By manipulating a few key CSS styles of our component, we can have something that's ready to copy and drop into
any ReactJS app.

Setting Up a Basic ReactJS App: https://www.bitchute.com/video/pXu7xPfKdeaS/

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

How should you as a front-end Javascript Web Developer think about designing a spinning wheel image carousel for use in your web page or web apps?
Take a look at the quick-thinking behind it.

Full tutorial: https://www.bitchute.com/video/ogEXxLb8ZhoB/
Position and Display in CSS: https://www.bitchute.com/video/h5rkMUyoTVlV/

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

When designing art with OpenGL fragment/pixel shaders, it's sometimes useful to create a mirror dimension.
What is it?
It's a dimension where you can have repeat values on your x and y axis.
I go through how to transform your default dimension into a mirror dimension with a simple algorithm and of course
the properties of your new dimension as well.

Setting Up a Fragment Shader Environment: https://www.bitchute.com/video/jLw0jBL9znVv/

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

Learn how to create a simple horizontal image slider component for your front-end web design in ReactJS.
By manipulating a few key CSS styles of our component, we can have something that's ready to copy and drop into
any ReactJS app.

Setting Up a Basic ReactJS App: https://www.bitchute.com/video/pXu7xPfKdeaS/

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

Probably the easiest (in terms of understanding) way of rendering a square on screen using the OpenGL GLSL step() function.
Using the fragment/pixel shader to design a basic square can be achieved in multiple ways.
This is the perhaps the easiest.

A Basic Fragment Shader: https://www.bitchute.com/video/jLw0jBL9znVv/
Understanding step(): https://www.bitchute.com/video/elaQ1FvzMuw4/

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

A simple way to create a simple animation of a hovering image using only HTML, CSS, and Javascript.

Great for creating a subtle effect to avoid stagnation in Web Design.

We use a bit of math in this one. Just some sine functions.

CSS Position and Display: https://www.bitchute.com/video/h5rkMUyoTVlV/

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

This video builds on the previous Spinning Wheel Image Carousel. You need to know how to set that up before devling into this advanced tutorial.
What makes the wheel so advanced?
Custom snapping points and visual feedback that tells the user what image they're focusing on.
It's important as Javascript Front and Back-End Web Developers and designers, that we provide intuitive ways for the user to interact with our
data.

This is just one of many.

Previous Video on Basic Spinning Wheel Carousel: https://www.bitchute.com/video/ogEXxLb8ZhoB/

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

As a Javascript Web Developer in 2020, organizing information on-screen in card or image sliders is a simple and intuitive
model users have come to expect.

Learn how to create an advanced horizontal slider from scratch.

What makes it advanced?
The images overlap one another as well as scale to provide visual flare and feedback.

HTML/CSS Position and display: https://www.bitchute.com/video/h5rkMUyoTVlV/
Javascript Arrow Functions: https://www.bitchute.com/video/i22ArD7iz88w/

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

All credit for the Dr. Manhattan Art goes to Ludo D. Rodriguez. It's beautiful.
Check his stuff out! https://www.deviantart.com/ludodrodriguez

For a simple CSS/Javascript animation like this, there is no need to install or link a separate library.
I'll walk you through using the most fundamental Web Developer tools at your disposal:
HTML, CSS, Javascript, and a bit of math.

We'll create this simple floating image that fades in then fades out.

Position and Display: https://www.bitchute.com/video/h5rkMUyoTVlV/

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

A simple spinning image carousel using HTML, CSS, and Javascript.
There is a little trigonometry involved, but not much.
Don't worry. I walk you through it.

CSS Position and Display: https://www.bitchute.com/video/h5rkMUyoTVlV/

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

Ever wondered how a Google Chrome extension is built?
As a Javascript Web Developer, it's good to be well-rounded.
Creating an ecosystem of products for your customer improves your portfolio power.
Improving your portfolio power, increases your business and revenue.

Learn here.

Reference:
Chrome Extension Developer Doc: https://developer.chrome.com/extensions/getstarted

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

A simple horizontal image carousel using HTML and CSS.
You can scroll left (infinitely).
You can scroll right (infinitely).

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

As a Web Developer, starting with a solid foundation in CSS and HTML page layout is fundamental.
Position and display can be tricky, but understanding how they work in concert to align elements on your page is crucial in avoiding
headaches.

Think 'position', then 'display'.

Position is responsible for the setup. Where should your HTML elements go.
Display comes in to fine tune how HTML elements should behave on-screen.
This is a brief video teaching that tandem.

Timestamps:
00:00 - Position
00:22 - fixed
1:52 - sticky
3:41 - relative
4:47 - absolute
6:29 - Display
7:02 - inline
7:44 - inline-block

Thanks to favpng for the tango image.

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

Using the OpenGL functions mix() and step() to create a little animation where blinds open and close.
We also have flashing lights in the background.

A Basic Fragment Shader: https://youtu.be/MNxQUrMN6Nw
Understanding mix(): https://www.bitchute.com/video/2p7ljbWvui8w/
Understanding step(): https://www.bitchute.com/video/elaQ1FvzMuw4/

Grim Fandango image by: https://favpng.com/

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

MongoDB is a non-relational database that houses it's storage in the cloud.
This is a departure from what most people know to be a database; a relational database; an SQL-based database.
With MongoDB we can store data in JSON-like structures.
This is great for Javascript developers who are used to manipulating data modelled this way.

As web developers, MongoDB non-relational structures are just another way of solving the problem of storing information on a server.
It's no better, no worse than relational databases. Instead of working with tables and linking them, we just work with nests.

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

As ReactJS Web developers, the most important part of any (more than simple)web app is state.
The normal way of handling state in ReactJS is by passing props DOWN the tree.
This works for most use cases.

In a large tree with many branches, this can get convoluted.
React Redux lets us simplify how state is handled.
We can elevate local state to a global state so multiple components can have access to the same data.

I'll take you through creating a place to store global state, how we connect to the global state, and how we change the global state.

Get a Basic ReactJS App Up and Running: https://www.bitchute.com/video/pXu7xPfKdeaS/
How Does ReactJS Handle Props Normally: https://www.bitchute.com/video/jafXb4e0nsXn/

Time Stamps:
1:32 - getting started with React Redux
2:32 - CREATING global state
6:49 - CONSUMING global state
11:15 - CHANGING global state
15:00 - CHANGING global state (advanced)

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

The glsl OpenGL mix() function allows us to move from one value to another in steady, identical increments.
From value 1 to value 2...we call this interpolation.

Going from one point, A, to another point, B in predictable, steady, identical beats.
We can influence how the colors get mixed by weighting the with a third variable; we'll call a weight.

A Basic Fragment Shader: https://www.bitchute.com/video/jLw0jBL9znVv/
How Does The Color Of A Pixel Get Calculated: https://www.bitchute.com/video/GxdIexVluDzn/

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

As ReactJS Web developers, the most important part of any (more than simple)web app is state.
The normal way of handling state in ReactJS is by passing props DOWN the tree.
This works for most use cases.

In a large tree with many branches, this can get convoluted.
The React Context API lets us simplify how state is handled.
We can elevate local state to a global state so multiple components can have access to the same data.

I'll take you through creating a place to store global state, how we connect to the global state, and how we change the global state.

Get a Basic ReactJS App Up and Running: https://www.bitchute.com/video/pXu7xPfKdeaS/
How Does ReactJS Handle Props Normally: https://www.bitchute.com/video/jafXb4e0nsXn/

Time Stamps:
2:24 - Elevating local state to global state
4:17 - Consuming from the global state from a function
9:29 - Consuming from the global state from a class
10:51 - Changing global state

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

React Native is a great tool for Javascript Web Developers who want to start mobile app development.
What's the difference between JS and Native though?

The thinking behind ReactJS and React Native is this:
Create modular code that produces dynamic front-ends; this modular code is written once, then injected into different parts of your app.
The major difference being where the app gets run.
A ReactJS app executes through a web browser.
A React Native app executes as an app through a phone.

I'll take you through:
1:43 - Installing both types of apps
2:45 - Starting both types of apps
7:00 - Programming for both types of apps

We'll see how to install, start, program, and execute the same app, for different platforms.

Getting Android Studio Ready: https://reactnative.dev/docs/getting-started (Choose the "React Native CLI Quickstart" option)
Installing NodeJS and NPM: https://www.bitchute.com/video/sJp5o7ft9YAr/
Javascript Arrow Functions: https://www.bitchute.com/video/i22ArD7iz88w/

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

As a Javascript web developer, get to know one of the most fundamental concepts in ReactJS: Components.

There are two types of components in ReactJS, 'Function' and 'Class'.

The major difference between the two being state.
In this video, I'll take you through building both types. You'll see the differences in syntax, how state is handled,
and how props are passed down.

If you want to know how to get a basic ReactJS project up and running, check out the link below.

Get A ReactJS Project Up and Running: https://www.bitchute.com/video/pXu7xPfKdeaS/
Arrow Functions: https://www.bitchute.com/video/Jb7X66B7N5ai/
What is State?: https://www.bitchute.com/video/bIEPtQHQduFh/

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

For all programmers, the idea of 'State' can be a tricky one.
Web Developers deal with state all the time.
This is doubly true when developing pages or apps with ReactJS.
State is one of ReactJS' strongest selling points.

State is the condition that something is in at a given point in time.

To manage 'state' in ReactJS, we use classes and hooks.
This video will focus on classes.

State can change.
State can be quantified.
State can be measured at any time.

Setting Up a Basic ReactJS App: https://www.bitchute.com/video/pXu7xPfKdeaS/
Javascript Arrow Functions: https://www.bitchute.com/video/i22ArD7iz88w/
Thanks to https://pngimage.net/dr-manhattan-png-2/ for Dr. Manhattan.

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

As a full-stack web developer, you can use ReactJS to create complex frontends with relative ease.

We'll get a boiler-plate ReactJS app up and running with NPM(npx) which comes with NodeJS.

ReactJS uses models or components to create a set of rules for displaying HTML.
Then you feed data or props into those components and ReactJS renders the code.
If you've used templating systems like Pug or Jade, you'll understand how ReactJS works.

Using a normal Javascript script.js file, ReactJS injects itself into a normal index.html file.
From there you have full use of ReactJS' backend language called JSX. It's a lot like XML, where you create
components and use them as tags within your code.

Get NodeJS: https://nodejs.org/en/download/
What is NodeJS and NPM: https://www.bitchute.com/video/sJp5o7ft9YAr/
Fetch API: https://www.bitchute.com/video/iJvigebLJOOr/

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

ReactJS is a Javascript library created by Facebook.
It's used to create modular HTML code for webpages or web apps.

As a full-stack web developer, you can use ReactJS to create complex frontends with relative ease.

ReactJS uses models or components to create a set of rules for displaying HTML.
Then you feed data or props into those components and ReactJS renders the code to the index.html.

If you've used templating systems like Pug or Jade, you'll understand how ReactJS works.

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

As a Javascript web developer, Express is used to create a server in the backend that serves up responses to the frontend.
Those response can be multiple things: HTML pages, simple strings, JSON data, images, files...

We use Express to complete the other half of the "Request, Response, Request, Response" HTTP request relationship between
the frontend and backend.

There are four basic steps to getting an Express server up and running:
1. import and initialize the Express package
2. create a landing route
3. override Express' error handler
4. create and start the server

Installing NodeJS and NPM: https://www.bitchute.com/video/sJp5o7ft9YAr/
Front-End Request Objects: https://www.bitchute.com/video/kCG1390Zh63p/
HTML Status Codes: https://www.restapitutorial.com/httpstatuscodes.html
Get Postman: https://www.postman.com/

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

One of the most important jobs of a full-stack Javascript web developer is setting up a place to store large amounts of
information.

So you've setup a MySQL database and you have an Express REST API.

I'm going to show you how to connect to that database using a package called 'mysql' and of course NodeJS.
Then I'll show you how to write and execute some basic SQL queries.

This video is an exerpt from a larger video where I built an image gallery using ReactJS, NodeJS, Express, and MAMP.

'mysql' npm package: https://github.com/mysqljs/mysql#readme
Setting Up a MySQL DB with MAMP: https://www.bitchute.com/video/5WiGAu1zWIGd/
Build an Image Gallery with ReactJS: https://www.bitchute.com/video/eYTVIg69nxrp/

Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️

Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7

If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a

SHOW MORE

Created 6 months, 1 week ago.

58 videos

CategoryEducation

I create educational videos about software development.

Business inquiries: [email protected]

Donations:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Where you can find me:
Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a/