watching fun fun function so today’s one
of those days I don’t know if you know
this but I am in the middle of moving
apartments this if we’re moving on
Tuesday and this is going to be the last
last time you see this in the background
that is going to be different I’m not
even sure exactly how it’s going to look
like it’s going to be very interesting
but as a result everything is a mess and
especially this day I am super tired and
super confused but I really want to make
a video because I always want to make a
video and I don’t want to think about
moving for a little while but my energy
is way too low for a serious episode so
I asked on Twitter for a suggestion on a
light harder Oreos dumb topic oh I need
a hat oh now you can see my steak that
looks horrible kale Neumann politics no
I try not to talk about politics on my
Twitter feed but I kind of end up doing
it anyway it’s kind of like you have
this you know when you have a cold and
you sometimes get these white things
inside your your mouth that that hurts
when you touch them with your tongue but
you still keep you know
Oh Damian suggests facial hair
maintenance what about the diet and
lifestyle of a healthy programmer I
don’t know anything about that maybe a
simple explanation of what proxies are
in rep that’s not light hearted clean
drought and how to make cinnamon toast I
like where you’re going but it’s not
quite what I’m looking for Paul Lewis
making the least readable hello world
imaginable we have a winner
this is amazing we’re going to make such
done on a world example all
right let’s begin a project we should
like for our hello world let me adjust
camera it it’s Oh camera there there
alright hello world – our objective is
to display the text hello world the
first step is obviously to create a
react
so create react app hello world
displayed no no no no no hang on we can
do this we first need to invent a name
for our product project project let me
pull up a browser here let’s let’s
brainstorm some names names for software
project
okay hmm naming your software project in
five minutes or less cool from now on I
will generate all soccer project name
using a random word generator okay
awesome for my most recent project I use
a random word plus okay let’s click that
mmm-hmm all right word queue no no smoke
no food
nope what this is not helping phrase
unaccepted not know when we jurisdiction
quavering loathesome this year flouncing
unprecedent it works yes yes what what
does that even
that’s hurtful unprecedented midwife
that’s our app alright it’s creating it
right oh cool we now already have a
package from yard at that’s good that’s
good
that this day is strolling in stolen I
need to tweak my terminal while it’s
doing things that’s kind of okay there
okay we’re ready to okay I think we just
do when p.m. start right no dammit
what’s happening uh what what what yon
page your P key start could not find a
packaged object now okay we need to go
into the actual catalog unprecedented
midwife and let’s start that should
welcome to react Oh awesome
awesome art cool I’m going to open up a
new a new tab here and I’m going to open
[Music]
okay so there’s some noise here I think
what we want to remove this logo here
went to get new batteries but of course
the batteries have been packed down now
all right oh let’s just power through
six delete this delete this delete this
you know what I’m going to use the
terminal inside of vicious to do instead
okay okay okay great okay okay baby like
a cow tails 700 channel to make a
channel uh-oh
Badgley the puzzle will divide the
channel what glass final is fine
okay go and play on skype now it’s
knowing knowing finish sorry oh no I
don’t want to stop near lunch next
building make them all go away and I
play make me a cat over time alright
ready that’s funny and they’re going out
yep joke on back okay okay so a couple
board and cool we have a live reloading
alright so first thing we need to do I
think as to TDD this I think we need to
put a think we should pull an enzyme so
it’s like import how do you do this and
sign like Quick Start and fine react
booby booby booby booby DPP alright it’s
import shallow so you see this and then
we want to render app all we did this
right we do shallow
and then we stopped doing overlays let’s
paste this in here and it and that
returns a wrapper and we comment this is
this out expect wrapper don’t find we
expect to find a dealer and I think that
should happen text and then to be 2 to
equal hello world maybe okay I’m gonna
start running some tests here NPM tasks
I think it’s going to run them yes cool
it failed could not find module ends I
know that correct we need to add it
cannot find module react add-ons test
all right I’ve been test working now
face a face I cannot read properly equal
of undefined perhaps this is just
different from the examples I need to
what what what what is happening what
all right yes this is probably expected
source I don’t really know but I think
this is how just syntaxes yes expected
value to be yellow world but it was
empty so if I now do hello world here
world it should pass cool and if I
change again it’s going to be like yes
yes it’s expected value to be hello
world and hello world right but this is
like mmm this is completely flawed and
not complete yet because this string is
not localized I wonder how you localize
strengthen decklid spoiler react
localized strings react localization
simple module to localize to react
interfaces in fencing to blood the blue
blue blue blue blue baby okay okay let’s
see ah let’s import things and sense ah
and let’s let’s import this string here
Oh what hmm hmm okay like hello world
world world I don’t know what I’m doing
that’s English ah and it’s not what is
up with this all facing thank you and
I’m going to replace the string with a
hello world hello world and we’re going
to have we want to have
Swedish of course and hey vadym and we
want what other languages do what we
English Spanish hola mundo that was
absolutely the correct pronunciation
what if it’s just es practice all right
so how do I use this what then the
strings out like in the range what so it
just brings to the hot dog
hello world and that work okay what
cannot okay we need to install the town
ah no Raleigh
ah waiting for the yarn okay not that
one
we need to pay this debt in reactivation
great great great
now hello that’s right now use yarn it
was fast again yeah drinking test okay
it’s running okay it’s how does this
work out no what what is this what is
this the open what what cash what I’m
not ask for it what is it what and I’m
gonna let’s just enter Mon again it’s
ah have you tried turning it on and off
again alright so can I now change this
this language somehow it said like what
set language language code so if I do
what do this string dot set language
equals sv does that updated oh cool now
it’s localized but this is bad because
this is a global variable and we need to
inject it into the react component so ah
let’s let’s let’s let’s let’s let’s
let’s let’s let’s look okay we’re going
to inject it like with this dot Rho Z is
not defined okay this this alright this
is going to break because we have
there’s no such property as an
unsurprising that nothing crash more but
okay yeah it’s crushing on the client
hmm okay I’m gonna move localized
strings out here and we’re going to go
to the main index ojs and let’s let
inject strings I think you just kill
like this strings and okay in you go
string string string cool cool strings
is not defined where where you’re not
defined if you’re not defined it up yes
no what all right it’s this language
here hang on we need to do this at this
point here cool
hey well then but now I suspect that our
test or or breaking right because yes
because it’s not taken into account as
we are now injecting the the this de
string so let’s see if we can
hmm subjective test and we have to mop
out the strings thing so let’s say that
it could be a fake strength and how does
it look it looks for just hello world
right so it’s going to be hello world
and and it’s waffles and it’s going to
be wattles what why does it fail I mean
oh we are not injecting detangle screen
ahh fake fake string okay cool can we
get this from like the local from the
browser somehow get preferred language
user browser has not done this in a long
time with we navigate your language I’m
just just scanning and just pasting it
to my code worst or that actually works
I can’t believe that worked
oh my god oh my god it’s not good that
that behavior was rewarded at all all
right how can we this is still not very
complicated I want to direct dependency
injection framework for react dependency
no need for dependency injection I know
but we’re looking for one now reacts dia
yes somebody actually made one oh we can
stop we have power
oh I’m tempted to pull in power but like
there are limits yarn add react di I
have to read this for a little bit oh
hang on resolver in check react
oh this closes your FB I to intercept
every call to react create element we
actually the idol enhances your elements
props with di property oh my god this is
exactly what we’re looking for
alright alright let’s do this let’s
import react now we need to do it
from react di and then we create a new
resolver cool and then oh we can inject
the dependencies straight in here I
and so we inject strings cool and then
all right and now I can do this right so
I can I think that I can be corn grains
equal but not message because that’s
from their example it’s it’s it’s
streams and then I go drink drink top of
the world let’s the thesis this works in
pinstripes
I think this already unknown and oh it’s
doing it again I think did I add the
react VI yarn add react di alright let’s
do this does this that rock rock rock
rock citron does it run does it run does
it run goes it’s on Haven oh right it
hang on NPM test let’s see what breaks
more specifically cube do bee do bee do
bee do bee do bee do bee this property
is not a function okay so I guess we
could fake the fake with di and I could
just do like this and string string
string string no no ah that’s there and
I inject this ha ha a prop as a prop the
eye the eye and as I work no it sounds
wonderful fail oh my god this props d is
if serve equal string return hmm let me
look at the code again okay it’s
supposed to return like this object then
like like like that oh I need curly
bracket why why is this wrong oh it’s
just I need one curly bracket too many
okay cool our test for green this is
nice because this is now way much more
convoluted than we than we had before we
know we’re not pulling in like this
extra thing in here and like a
completely new library good good
I think that it’s also very appropriate
to put in redux here in for in order to
manage complexity and and and
performance and and things okay how do
we do this how does Redux work like I
keep forgetting like every single time
react Redux okay hey what facial react
bindings here and can install say react
Redux dip dip dip dip symptom all this
maybe that’s okay it appeared does react
react has that a PA dependency peer
dependence is only Roman don’t use a
yawn pkg add Redux and react Redux
Oh Your Honor it’s so great that we have
to package managers for JavaScript now
thank you Facebook the JavaScript
community is sort of like communist
parties they constantly split into
smaller and smaller parties the
dooblydoo usage we react how does it
work hello hello I just wanted a simple
example here why are you making things
so complicated right how does this work
I think that we first set up a store I’m
gonna make a new file here and function
say like we’re just going to call it
like hello hello world store it’s great
and it’s going to be like case in it and
then it’s going to return string a name
and it’s going to be hello world so that
we can configure this this later and
then we’re going to yes return say oh I
forgot the switch itself which action
action dot tie if Redux is unfamiliar to
you that is because you you are not
hipster enough say what I accept you
saved that entitled one I want like this
is stored junk jazz lady and I want to
and then I can create import this thing
it’s going to be imported here I’m gonna
import our import import import what was
its name the world store from the word
cool
okay and I’m going to read these your
create store from the hello world storm
no it’s not quite store this is like
hello world reducer and we do sir sir
naming it’s really important for
projects of this scale we do sir I
okay cool create store we need to import
creates door from react Redux just paste
it here cool and we also need to just
have a dispatch the init event so that
it actually renders dispatch type dot in
it and let’s see now we need to tie
these things up and then we need react
Redux and then we need to create a map
okay cool and this should return an
object with ha ha props props this is
going to have oh yeah the I think this
should we change strings and then that
is get I don’t get get strings and this
will take the state no I don’t get
greeting this is a good name and it’s
going to take State DOT and we look at
653 name and we need to create this
function function get grip bring take
the string name this will then uh take
drinks this is a little bit tricky
because it needs to need to get the name
here I said the string name but I am
thinking that this is like the
dependency injected thingamabob
can I ask you like like like like this
string string name yeah I’m looking at
so how do we map this map dispatch data
community important connect whatever
that is okay and then we’re going to
connect that to our react component so
this is going to be like our connected
act may be and we don’t use we don’t
have any actions inside of it yet so we
don’t need that need to keep this it’s
important that you don’t I remove this
because it’s important that you remove
superfluous things that you don’t
don’t need in your app keep it as lean
as possible so this is rap now now
connected app and it’s going to be like
now it’s the connected app instead this
is a little bit tricky because I don’t
know how to get injected things into
these these mappers here we have to find
that out somehow
okay it has its own props maybe we can
figure that out okay
I’m so confused by my own thing now
let’s just run it and see see see what
happens okay everything is broken
hello world reducer if it’s defined but
not used hello world store it’s not
defined okay hang on hang on hang on
hello world reducer is not you know
because we named it all right see what
is happening here are there’s a warning
it’s all excellent it expects a default
case the for more code more code action
is not defined oh yeah because if it
wants a state of action this is how
if you don’t know what I’m doing you’re
not our real programmer you are an
ethereal the serial programmer you don’t
you don’t have corporeal form yet could
not ah could not work with this thing
could not find store in either context
or props or connect app either uptick
component in a provider or explicitly
passed the war as a prop to connect at
what wrapping provider I think this is
what it you do you like to do provider
and this this is how it hahaha never
change keyboards that is the most
important productivity advice I can I
can give anyone ok provider it’s not
this fine I think you have to pick it
somewhere here provider provider what’s
wrong here provider provider provider to
magically make the store available Thank
You magic that is exactly what we want
in this project as much as possible but
we do have a probe hider yeah it’s here
ok cool does not work yeah but the
provider needs to have to work is this
how you do it and like two things go on
that
oh oh okay okay
it kind if it’s not completely tied
together yet because I wanted to
actually use we’re now using these
injected things but I think that the way
react Redux works I think it should just
inject and inject this as a property
like this prompt and it will basically
do make this into a property so the
strings don’t hello world maybe no no no
greeting making the children and
greeting so I add greeting oh okay cool
so this is now no longer needed
unfortunately I was hoping that we could
we could know it is needed how long we
just need to access it from a more
convoluted place because I think that
this thing here now has like this is own
props and and and and you need to task
in own props of di and that will be di
here so that we can do a DI and get the
string and the string name yes oh my god
this is so convoluted ah
but see the test runs like they are
probably long since broken we need to
fix us okay at expected Wireless value
to waffles now not doing this properly
at all how we even test Redux things
like this
it’s supposed to just have this props
greeting I suppose that we could then
just go this ago like three things
equals ah waffles and then this is
unfortunately no longer needed the tests
are so now app has gotten unfortunately
gotten simpler cracked but we have
managed to add a lot of convolution
using this hello world store which
acknowledge fault
and the world reducer and this not
stated prop is also great extra
complexity and this get grading here
that it’s not I think that taking this
step forward could perhaps use react we
select here or something like I’m going
to put this code up on on on github and
link it in the episode description and
you people can make pull requests that I
will just liberally accept and we can
make this into the worst convoluted
piece of ever conceived that’s it
for today I really hope that you did not
learn anything from this episode if so
you should forget it again please submit
a pull request or a comment for ideas on
how to make this example a lot worse and
that’s it for today you have your
portion episode of fun fun function I
make these and produce publish these
every Monday morning Oh 800 GMT time if
you don’t want to wait until next Monday
you can watch this episode right now
that some machine learning dwarf entity
has picked for your specific meat based
coal-based brain I am mpj until next Monday morning stay curious