s�Q�*���(�!�&b,X(A9A���(U��/.I�2��댟s�Ah�S��U�yu�p_d��������n NY�4�/�X�������CZ�(� ���O�?���&^R�]�x}p_=T�v��α����c"�S)����!2�dZ>��5]<��rb�7��N��(3�2��ʝ�h�`�j&k&�%ȥ��B���?��"�1X���UA"���k�۰��Pb-&ij�@���/$��b��h�זwO�� ���� v�����v��w�kr�*G��`Ń�}-;r�t(�!�խj���|�����P0�T�� �zJ�m 5�<{a���e��~��'6�b@2��l�����n���!h/�w�Y~� ʖ�@W䧀���Yd�=���tЖ�nw���cḻ��m�� aY���i��x85�A��)���N�ʑh�՛�V�H9�\�'� G���_x� KF|3�:�#o�i�ˉ?&3�٩ȡ�|�Xɑ��#](���s��a��[��t�'G�'0rn����=T�^;� �����Ѣ�n"����$�?k������^�!��% b��c�� ��ML�������l �?s/5ē5 R�m����F�E�Tϧ�-�VV�tj�7z��N�g����ޝ6� �ڡ9�S<�gܙ���Y�j:���D��hI9�$�V��D}��SUq)������Ğ��w� 4 ;����9i/�5Dž��[���H���D�h���,�U�3.8��Hڹ�5_7�͗mT��S� a���,�ܿ#�����F�A+�$ࢺ�l�4Q�؁E����@�A�.��45��K��v\�B��N8�v4+�i��@��9)����~����)�jo��� ��.@������'�V�5i��r��&�3��hwCq��)r��;M؍�g+�c,������Z���~���y)���܊i���#�t���-�}�bp��.IĐ,ˋ�d޹M�#�Բ+3�T7,T=��%��Qeq�}Mp�i���܆�%:t���n�i�T���[es*�;UyR,�P��@�YKi������smh�WC�VC��…ӂ �df��L�*�Ν�o�~~%n�2'�U�V��B��\@ ���vB����\<��s� ��`k�\U8�({A0e���T��/���}��_���sUi(&ь�}w��ݱ�э5�Ef!��3k*|2��U3��*�u�9���;����K��9�Պ�hd칼����gf_r��x8�HC���֊9�;��1c�k&�*]Q�����Z�"$ ��6W��8��W P��_wD�Q�z���� ���{���Ҭ�fY8-T݁J������� m�����������;�}�Ӎ$��#S�����N y�)�H�'9�~,�xZ��ެ� ��k"�W,$yô L��66���7�$����k�T�N1 �=�Y�C�+`L���%��H����g$����QP?��x>�7��0���I��Z]:�ȊwS˜���?7����� [�J�Ū�*�WRZ��/@`⓭#,<*�΅��t�\g�j;9�K��ݶ���H �ui�� ���G�Hɡ`��)�k5�R��x]��A���U�a�-A^��=dݨo,������`�K"�Y��t:׉�A���S��u������ăB'�1|�g~�g�`�?��m�ZlB���̙�!Li/u��^�< ^����r���c�#S �7�c����իY��JQ'���9]w�� �g:�Db�a�)����]��tϧ ]���Rr-)|�B��)���ANN����,�v^8��|^�����+~a�� �����(z�J�� ��ޓ� ře����N�����=�_�`�I�����i��ʵ��e������7��f�]ۺltq�@}:��&ݖZ�J��$L�KY���U �0}�%,��%���)s^���A��h�ϴ��D�è�������M71!��H�}�R {�Ok�찶��[�Y��ȅX%6?-�m�RcwZ_Z���#l�DT�F��r�i�Ol��bA ����ݡkILv��%h�{ 9�p0y��]�[_t�y?�E��i���Ơr2���χ��qi���[դ��2 �I�x�&��R�x���p������J.{�2?ex�r���wi.Z�S��C�u6�{����ldȰY��~��,�ވp}[3��M��ؙx�#� �]W릲���c)/1[U���/��z���G"(e�j7�G:��P�!s���0�j�c���u�)$���HP�����A^�=��D�9�:���tI�s��.��.k���]gl�-�-��h�����o��I��ןY&Q�34s>,��*I�6�q"}��l����͟uΕ�rҔ��+�f�6H�CԤ���u�� Z�����r6 �R��� �:�?��l8�q<������+U���m����W�NM�n�A5[�n��۝�$+�cX�F5�5��i�Q6�.��8�D1G�;M� �0)��T�a���/�����M�9�n�WPi_��kNo6pdd�����pmĎ� ���1�nd��������i���<���3w��!�f��y8+ :b j��^ѰK_�S� �x��i�qN[z�{p8!x���� �k���v��c��W�����R m�iJ3���?!W���W�^߯T5 �}������5/�MƂ?����f�!�ۖ�mW ������؛#�}�>`��T�Ӣ�O��k�~+*b�"���=�_ $��̰��J[�4#�Е&K6[6�;� �9��O9��&zX9��\I+�PU��,KV��C���M���|��v$ �ž���wl=�����f��Z�YO���з�N�.ZG�_�9A�zd�G%ܵ����(:9ې�ο�M�1���E� ������XB���I��7O�25Ž�Hf�O��� X���x>y��M��t�9�\ �0���gM����6�r�[�T��?�琀�_p_y��+D̩�/. �ȅ�ɕتw�P1�#��L-,!~3�O��,o��7�,1��?��Ʌ|�ci.�$�1k����j ���V^hD��� h����Z�+킫���4Xu`�� &V'r1��o�D0;��]��-Dm�{-k��S�c�,�)W�Ǻ�;8�H���.��B{�A ��L���y�~K�~�ĭPnr]eK�� ��ߚ��?��k��ا�P�C��_Lj����nDR�t���t�T�9 G.�2����[�ah-���-��4�i�Ku"�Ym^��"��={�Ҙa �ڪ�H� =�F��_�ߒ���NA�nCl���>�#�3�� �-�g�YJȞ��,����[�+Km�����@ZDտ� �ec� =���f�t�\�V�T��ҿ�tNdf�5#9�"�_��e�H/h�`<�L��T���h��$�����gڥ��e�#����؉���Nwjڡ�A w��օ���Kξ�lyQ�<�?�U��4�o�1�u�ĺd#G0����#(5Aж�q;��". L�z����]�,�B�+h�߉�^�JoA��7�/5�"{��G�񈛊3�l �ul�P̮3!Vf�d�xJ��Ce�d�Q�s�2�!f�j�B���lX������jT�&��Z���p�����6�;0N���:>v��� 1���N`�3����pǠ~�F0��˃��Y��ȶ����K�B/w3L�����T<,���f� Q� [����H�L�Pk��N4j_��-��Ύ��X�[j��wNݫe�u?����� q*�ӷ XB�� N P�lic��d�}�I%�HA5�F+�u@�&���ʋ�dA��m�,��|�v7� �V񌓖X ��7U+H�=�>�3��F";Oq� 6po���( �Y�xs��m!��0/�� ���"�R���-�W�����}t|�#1�\�)J�����e*�(�� X��h�~� =#]�{j��b�s� v i~_�م��f�� �9*ɦ��D�UzY����p}�O��{K������h��\�4����Q"�7��� ���"r��X��iX��`jE�5s���dh��S�pN߹7׉���f�������H�����:�Zf��7d c8��ˇ���5���3h�.�舯(QЏ���z�]ܦFĻG�� �����q�>��[80*0(4�Y�E�aì�{Fc��� 3���\q.�+�����\Y1N�ꔏ -cjy�l����AI*ti��'��2H�������YT�����h�~�B�K���S��1t�y7���T�A�_�̌���VU���94��\���oN��;��j��6n7N�do�~��~5z�ų,�M�m%4� �V��]N T�M^���}��+���v �{ߞ���^&q���]g�����n�v��4��V���I��]�'��^��<ں'��½.)�Lt� �e^��U�}p�K���K+n��=DO~T��&9xK�����gz�oi����Vm�Kg�,�H�y���@;�2��`�U�C Ͼ� V~ a��vEI���p����P$�#���"VԖ����M�(�`�Q����a ��ܼ��R��M���~DT�H�� �c_,�8d!1�s���G��|��h�H�l��(E��IȤz�DƔ9�։Y��_`#�=0'�0��A�3�6;�2 �.��r�Q}�� &���dE<ُCG�)���&����*cu;���t�=ߊ�%q�]��a�K���6�r���������$��J� �{$]?�\�����h���F���ؼ�DF��P��,d�*z��ϣ�|ۯ���.U��TѲ}�WQ?#�p;y�^hI�A��|�E�)�`��F׽!�/��"�7Z�I�S��]١��-RgaL�uf4C�ȥ�w��k4�A�N�yҖ���D����u�C׋��,�k��X�ý.V3�T�_���� � �Y���E#��}R����x��1�����:�%]��I/�&=��po7����)Q$��i �ih �O���N�i�pQ$)��R�:8�������S��5�"�AV"#���dr"�ˢ*&Q��DL� "� K~��9���HU*�C��OGc���u^L��|���"`��r9�{��2��u0 �}��? �A�9�޼d�5�`�a��*�\�Y�������\r���L��񄄤����s��7�Ҥ�N\\���ϊ���djp�O7B��w�'��~ݝT���?_�������/���ھ�]�Цb�͔�� m��U&{���Z*���}�%�aG�I$G ^IB� Q��3�����4��ƌ�Sg'֭���'*b~�6�\O�J��$R�ZF���/��y �`�f9h�ݩ�صC�B�t]�=��XE��b� ���+�� +Q��X���}����͡� �F?����4�{�M����� �m{ʛ�f�'��V�cV�4�ۚ ��i��DJ��';�WR��Z}�RO�L%�%ט,�QǑ��$�O��i������^G}��38e��o�Af����iK ���7*'Gn�7u���[�-���$6AS���&to�k�֫U�Py�s2ĕ��[�G0+���|ϗ�nJ��N�`VO��Bl��S��H7��U��=��bѷ~�֭��%8UF�O�.�eFI�-��k�NJ�� #Yq�r���c�#����u�TUyB��%�|AӢ���96�_��ǘ�7�'�Ql���.=��V7��úC��e�zω�8���&�ni�g~4{�_��7���%��uA '|az�=�cR*������i\Ǎ�(dv9e�3�*��œ��*p�v\�k��'��N��؎��|�G�z����Π��C΀���sY1��ͭ}J��E�;�7Λ�]D^J��Q�g)�Ч�����#?�!!�Ǣ�]w���[��:S�� iF�r a�����joq���RΡ]� ��t ;[p,�P#;!��곲 )�*��T������M�轇��ݚ��� "Zl�5S��$�6�N��ߩ'��;��kc֘��iDmuDd���e��agS4��%mb,�&�s������ jL��*�Qk ; *S��x��o�w]*NHC�.��Y��^F� ��L´��I`�B�W�cQ��F¾�~'��S*�ۅM�ޚ,��6���b�m��w�d1p+^�ad�d�hv���j�*X���`ȳ]Sֹ�EV�I�l��os0�0{7]�<@�:b��&�񵧁�/��[;M���?GՕ@)ٝk g�R=���.]��.����! ��V�ǒ��:Yru,⅒_��h��A��D�pH�Z��j� �R�' z`���y��w���3�E\�:����3H2��y��ܲ��Շ��s�Ə�TL���YϘH��b�͙�b���W�X�:�EZ�1 �%ӋtXI𘛋���ٴ9x��2Q�AL�C٘ �6\�Ґ��U� �Q��*�EG~�C��޻:��1�M�W�6����+���[`mz����Q�bF��*��:�D�(dY�0�a%p������-�?���?���� �O�_\���7S��b"Nva�g��Csf�7��I]���%(���:����i��:9&�W�x4f�5�tt����-z73�i��jۃ�E�]���9)��9w����w��q�8�N��mg��곯2�3�O`zO���c�?ᵄ��w��j������%�2�GU�*��=����>ʗ=n��� -�rP+���55?/����5 >�``� {�`�(���.��H1�.�d7�V���f.P�� �n��� ������/���u9@��x�$+�D�ߕ�p 6v�|�6���߼+��!�^�)C��TA��v�ts�"�w���PO�� k����6&�[�U� [D�+�A&M2P�1y�N�����_���ۋ7�K��S�C����KĪ�f�@sפ'1�:U�t��ȵ��F��& Hv�f�c���C���m��z�lހ�;��U� �B�<���*�% ���"�T�������m��2���V$��﹁�o��y]�Ro@A��� �BN9�c���[e��n˘����� ��M�thi��<+ixU����^a�����(��{�/�������\J���yַ.#���y�n����J��0�Ň>��-��X��� Z3�樛$j[J��ޠ�AQی�_ )ނ�J 1�n���}Ә+;]c:�ź�=S�xo���f���.Kn���,7�Vn,����q,3�u�eQ\�fGI�G�(�#"��Fm[.?2ݛܝ��'�Jf��]�� �-$V�1E�*֮ʡ�j�V�6��;t�&V��q���?�Y��ة���T�8��_7��D`|53�C�`u8�sK3����@U���`��&#4�Y�����;�I` �3A�}j�����%�'���u�n�xZ ��x����i����~0j�gz�+d:�O�1ߍ�d��ˈmT 8k\�P��?�*�?�G[䗪�w�\b��B�bʲ�_�&�56���PeWQ��z�`�� _D� TO_T�-!s+�T)� Yvp� p�Sé��4���XŎP�-�` ?��M��_�ɮ�ev�&�@'΋���cM#V ���R�� ��p�P�C�6�͑V҉���R\�qH����"M!�[�X�4��䮳�2��xp�d�"����.��x1��>A�Y#��6o��D=����%`�H�"�X���Sؚ��/�� )C��c���'���S.m��Q�e-�fLV-J &,�LO��֜E�X��hk�r� �U}�����:�8����}F�� N��M�ƇV1H��H��J�8� �4���mɭ�ᘠO����5�蘍�{�N�gQA�-nFI)Ɯ��-"0�{��v';� ĥF�*���4-����}iڇU����Ÿ�'�9�����K���P���zzOx[���z�M��4��L)�I�j�A�]y*^Lr�������h�,d�^_z���X�y�����Ǹî��5~ �;�8����,��`�D�0��"|N jO���}I|1;����9M�?I�zT@��q/=�w�U�T�6�7�J���Ȅ>��~��l&�!�]�����7�C�������',���䇙����Ԋ��%}B.��OZ��J.���c�� �ױ���"i�}�� ����7��� ���u���w��n�q�����)o/����+|���׭��p/0��RA�8��w����,�O��(�����U=#2nCtR�]*S �`�!GK�Y��<�pJ� � sù0E��vY�f��pŠL���c�7�qVB���}P{�|Һs�W�̶(x��ӽ�r��B��4���1A��s�0ǚ��Jo�"���� t����I3�OF�Q�V��=� �4t��i ��E�f� ��j+d���Z3��i��G��zl�ם���l�>U�b_#S�]�x'���3�wDA�UѠ�����O���x�g��p��à�J�L��`Đ�1�(KV� xE։�ZL�� �7ɣ9!d3@�N�n ~���]6P4�` ��h����p}<)�5;��Zx�_zq��sE��A�. E ��?��3���p�U �(~���a���-%?�<�&!�y�~UyY�ĺ�����Lq/g8 �� -�������}O-�����_�K��bs@�M� B�� *�R�7��?�- i�}B�Ixԟp_�pv��͸�G�-���߅�t=�B�i��]��0y)볌=� *��{|��D��f�P^2}�5|¡���l�?wG E?�ê��s3f�?����U�HU n9���Fr"u ��,��׺�u4��mkjE��\�n�Mp+���vA��P.����>��[�a-#w �σ�o��s��;�7)����~k�;��<6�v8+�����Bn�@r����N�����c�j��"��(U;��p�΅�AƁ�c�y�[��1�Y��Nrd��� %c*-oN��z�hُ�'�L�0x��pϢgÍZb��Lo��;ۛ �1�zY�!�3� �o�鏦��ź��5��.'�%b~��إs�]���O_8W�� ;�t��xq�{Y�Xh�X�Jk��My� ��l���9ᧀ��� �>�jT���G@���ͦ�z2 �b)����w�±߲�����n����f%�;��9S�7o���\.����>��ӻ�C|����8*nX��Wn�3oԐ`�8NJhtW ��2�m�?2M�ˏ �.ҳ5�A��Ϲv���H ~��\I4zc�&)d#ĺ�6�@���P��Z�~:�jUH��^�(��ɍ6�c�/&-����6zjܙ7�Bo�(z�A��k�@������ꠐ�8芟������;���y�,�� �Ma�<���_b a �z�w��#F>`��'�K �A��X5���+�&��W=��2n5:�7� k� 6�A?� ������Q������ "�8C��sϙ!�~o��c�V]�O5�_d4i�P����l�ϔ8_�����$�]�I��LG��+�TV�O��Ȇ�o�|�����Z�J�]�ů�R٫��(�I4��{����]s\����O�E�3~� ʂ� HX��� 0���zoals �jŦ�=;�ͳ�g}����C&O4���X�ɋA71h=z� \�K��y �jA��/��ߩM�8m�H������#�1��=���ఄ'G G��J�b�����І0�y��]�p�G��s�O�?L ���}��Ӄ�D�`K=<���|�.���4+c�˓ � ��׀-,� ��YzQ4�J� DJHn�+���s�|%��B���R��r"��;�Ejp7���`�2"?�sw@C�?�W��´KO��G�f���3o ?�^l�=���4n`�p�I��d\>���l��昇'K����v�,��I� ���Tߜr���e����oD;����],vu���lu�FX����Dz�Xǚ����5�X�Ub� ]�⊷�y�&�ly�e�� �ƃH!��A�>�*�pDzy���8�&sa^���Lv;4�:�D���R���3r��Q�%L�Ֆσ�N2�?֧���s�� p�^ձC�i=24m]cc�D�C��W�20`��G�������}��E�|���%Z�K����n�V|�:�n�� ˆ,ϣ�#����ֈ�窲�B��>��<' 7�{L�Ϭ�$D���C���P����Z�͠EN5 U�s����, �rs��桺7�wӷ��Κ�H����f�=�7/�g[%�nFU��B�ϙ��X�����j��P�릤?o�L�̏\�jRPI��"�i��l8�aF��e0���+�}C'G�п\����� ����D�2 ��5�;�ʊ��c��������ɺ �,�}yQ�@sұ�� �.���� ����U5V��M�H�An���Jb�?s�V"=�� �o�����0�x@X�A�0-p���<��)����(�9/B���f�a�R��,0#�wM8��ۘ�9S����kҡ�D?��}��9��X��x�j�o���w���L7@�H���V��T႟��q����N�W�~�}j��������{zbH=(<��b/9����D��7��Z�� �2md�u�pa���RaϣP��r�?"���O\��B� ̏<Ȼ��V:�g�bk��ёy ���̭�W}�?>sxEl��Y$�Y���b����΄��giI}����Q`73`���r�\v��_�T?����6lq���tr$��P0�P�w��J���_�����H%)��4`zӼh�qU�h�[jR*�`����r��[��]~�Sv�R[�9S|������tC�XK�8�H�����Ў5�ESTm�쀭�l�8J�~ H~o�)���#v�Z �4��H}]?��3I��eD��D[�e�b*&]��1����}\!ӟ�B?��,�"�$�s���qD6�����w �Dm ��o=tX��o�K�ON������)V8�z'���W��rL�P���a��S.vG�-���w��z`��jnsR���n�@����z����py��@��S$� |�T��h��]���?��(/4Fv��g��n�m�)a ���{2�����&@'�u6��ñd����fՄJGA쏶��<0U��i�VJ�ȫ k J�N���%_��'$ �.E�uw�^�/[���2�QD��@�����6��G"u���Ҡs��9�eX�>\�_�F����e �����t�-Bp&/�У?D� ��x�3"8I��$|9���i�ш��,IC�����Ǿ��!��q�B��J���s&�.��R���m�9����6�y��^W�*����Ʒ�33p�PR"`f"�{�-I�N˻�=�\\�5ŷ�֮fA�� q�LAg\��,�;��>�Ng FQO��K(�K`l>��Ѣ���byc�L�Z�o2�Lk�Y�i˄�S,g� ������{˅&x6��2v[����5 j ���(;ȡ R\6�\��&@<����/�8�Bq�%���_U� !+M��6ij�e�d�E�t��7'l�� ٚ�ڙ1c� E��������.48���P V,,d��@������@W� y�e�o���w��z>��h��P;m�h� �e�n �e��y�t6V,lJ`ش�TVW�M�tnj!�'��� Z&��(؎\(���~�����!1U��Pn'v�+f-���3Q�]D�DݐMo����J@)=��{oY�������P_v��1�=�uN��U@��/�A�5���s�&�:�w��‹�-~�2�|��l�Yz�K���<��kC��ʯ3C��Z�V��_L S1t&��8�� �����e��J��^r)���y���KC�ˮ���E]�� �\@�����~Y�i�� +E���.�R~U�HXa�q.Sp�|m_Ծ^‰j�a&�������0+%��W՚!3�{l�e��'��l��2iײ��\�����^<����`��ee�#�G�BSD.����W�8��m)�c��\*)���,���z��'f�Z������z��;��e��Li$& O�qܒ��ZחЏ�>l�i�&wF�˔��)����k�3�f�-���^�Oa)@w[]Rp5f�����2���{�%6)�@8�3hʧ$�q��2-)���/y�Eu��m�f-n� �7�6��G��Ɵ4j�YdFj��<zz�z��� �9�� H�9?,�M5DN��K�W�/�� K��g8 z�|��ߓ�!!��+F�H�z�w�&2(�T3Ub"�_@vd A}c �@��[��O���CE]�f=T�d��?蟲,��������� �k�M �Bu*��!����%�U��8%�X8�ׇa3F*���=�D�m��`5m@�A ����� M��~�����#U��d-�y�v9:~���N",`���������}�w�)T167JU�n��� V]����ھ-��� �k�bH�l�q�%"Hk�N�{�܃��6Ir�^��W���U4O��P�����&�0����>O��\���cᆍ ;�[8o� G`�)7=���xJ��Er@Wf� SM]����� ��g��:*XF��O�Q�+'�B��. kH�w�%�����} ŞWɒH?+ꚄU)�׻��~��`Y�\�Ph_Q�0�.9�9�t���4�2�Iu��:��g���l�U�E�*ǂ�� P�D�}ɵ���?RÅh���Fv��ܚx�x���\�37�b��C��^=  �!"������'OI�,����}�3��h�vG�CŎ2�s�:��5e��ɘz�;ijM+߈T`�r�)�=>��#$q_)���y�B����+�z����%�W��t�^�ߐ�ٷE�� ^ ��Qh�*�:M�5�����~�j_�ɶߏ�P ��1([3+]�Dg�r1,~ M< l7}l�������qA.�tAV�Y���5��/j ���$0���,��Z"v������?2> 1�p�+��}ݻFyV%���#a��?ߚ�����2 �{~W�e�*��b@m!�]��u�liB{���BJ�1*R�1 00:00:00,770 --> 00:00:05,570 In this video we're going to get a little bit more familiar with the react library itself to get started. 2 00:00:05,570 --> 00:00:08,710 I'm going to find my S.R. C directory inside my code editor. 3 00:00:08,720 --> 00:00:12,410 Inside there is the screen's directory inside the screen directory. 4 00:00:12,410 --> 00:00:19,480 I'm gonna make a new file called components screen dot J.S. you'll notice that at the very top. 5 00:00:19,490 --> 00:00:24,230 My code editor right here I have some breadcrumbs you can use this little list right here to always 6 00:00:24,230 --> 00:00:27,820 tell what file I'm working on inside of our project directory. 7 00:00:28,010 --> 00:00:33,230 So inside of this component screen not J.S. File we're going to create something called a react component. 8 00:00:33,230 --> 00:00:37,430 The goal of a react component is to show some amount of content to the user. 9 00:00:37,490 --> 00:00:41,780 We place these different react components that we create inside of different files inside of our project 10 00:00:41,780 --> 00:00:42,760 directory. 11 00:00:43,100 --> 00:00:48,290 In general every different component file we create is going to have the same four different parts. 12 00:00:48,290 --> 00:00:52,670 We're going to write out these same four different parts a incredible number of times throughout this 13 00:00:52,670 --> 00:00:53,360 course. 14 00:00:53,370 --> 00:00:58,280 So you're going to memorize these four different parts very quickly in part one we're always going to 15 00:00:58,280 --> 00:01:02,450 write out a little bit of code to import some libraries that we need to actually create a component 16 00:01:03,230 --> 00:01:03,790 in Part 2. 17 00:01:03,800 --> 00:01:08,450 We're going to create the component itself a component for right now we're going to use this definition 18 00:01:08,510 --> 00:01:15,230 a component is a function that returns something called J.S. X J.S. x is some special syntax that looks 19 00:01:15,230 --> 00:01:22,280 kind of like h team l will expand on exactly what J ASX is later on there for right now just understand 20 00:01:22,310 --> 00:01:27,380 that it is this j a sex stuff that really tells React Native what we want to show on the screen of our 21 00:01:27,380 --> 00:01:33,950 mobile device in Part 3 we're going to create something called a style sheet this style sheet works 22 00:01:33,980 --> 00:01:40,580 in a similar fashion to how a style sheet or CSX works inside the browser it is used to add some styling 23 00:01:40,640 --> 00:01:47,520 or layout to a component that we created during part 2 and then finally in Part 4 we're going to export 24 00:01:47,520 --> 00:01:53,280 the component that we created during part 2 so we can use it somewhere else inside of our project so 25 00:01:53,320 --> 00:01:58,750 let's try to create our own component inside this file that we just created a second ago. 26 00:01:58,750 --> 00:02:02,710 So we're gonna write out some code inside of here you're going to get very familiar with this code very 27 00:02:02,710 --> 00:02:07,700 quickly we're going to write out write it all out a incredible number of times. 28 00:02:08,110 --> 00:02:08,390 All right. 29 00:02:08,410 --> 00:02:13,540 So inside of here I'm going to first import to libraries that we need to create a component. 30 00:02:13,660 --> 00:02:23,830 So I'm going to import react from react and I'll import text and style sheet from React Native like 31 00:02:23,830 --> 00:02:29,140 so now there's three things I want to mention very quickly about these two lines of code. 32 00:02:29,140 --> 00:02:33,190 First off you'll notice that as soon as I write these two lines they kind of fade out from view. 33 00:02:33,280 --> 00:02:38,260 That's just because I've not actually reference the variables that I just imported if I actually hover 34 00:02:38,260 --> 00:02:42,460 over these lines it'll say that I declared this variable but I never actually used it inside this file 35 00:02:42,700 --> 00:02:44,450 and that's why it fades out. 36 00:02:44,560 --> 00:02:47,910 If I make use of that variable it's then going to light up right away. 37 00:02:47,950 --> 00:02:52,000 So if you ever see a line of code inside of my editor that has kind of faded that just means that we 38 00:02:52,000 --> 00:02:55,330 have not made use of it yet. 39 00:02:55,330 --> 00:02:59,740 Next up you'll notice that we've imported something from a library called react and something from a 40 00:02:59,740 --> 00:03:01,050 library called React Native. 41 00:03:01,720 --> 00:03:08,170 These really are two separate and very different libraries the react library is all about how different 42 00:03:08,170 --> 00:03:10,100 components work together. 43 00:03:10,150 --> 00:03:14,230 So usually when we create an application we're going to assemble many different components to actually 44 00:03:14,230 --> 00:03:19,870 build our app the react library has a ton of code inside of it that knows how to make different components 45 00:03:19,870 --> 00:03:25,920 work together the react native library on the other hand knows how to take some information from those 46 00:03:25,920 --> 00:03:30,510 components and use it to actually show some content on the mobile device. 47 00:03:30,570 --> 00:03:33,950 So each library has its own separate job. 48 00:03:33,950 --> 00:03:37,850 The other thing or last thing third thing that you'll notice about these two lines is that on the first 49 00:03:37,850 --> 00:03:43,690 line we added in no curly braces but on the second one we did add in some curly braces. 50 00:03:43,880 --> 00:03:48,950 So the difference here is that on the first line we are importing the entire react library into this 51 00:03:48,950 --> 00:03:51,400 file on the second line. 52 00:03:51,400 --> 00:03:57,680 We are importing two very small pieces of the react native library so these curly braces means that 53 00:03:57,680 --> 00:04:02,970 we want to import just one or more very small parts out of a given library. 54 00:04:03,110 --> 00:04:06,110 And like I said in this case we want to import two different things. 55 00:04:06,110 --> 00:04:11,260 One thing called text and another one called style sheet in general throughout this course I'm going 56 00:04:11,260 --> 00:04:16,180 to tell you exactly when we need to use curly braces and when we don't in no time you'll come to learn 57 00:04:16,180 --> 00:04:18,610 these rules on your own okay. 58 00:04:18,610 --> 00:04:19,560 So that's part one. 59 00:04:19,600 --> 00:04:23,300 We've now imported some libraries that we're going to use to create a component. 60 00:04:23,380 --> 00:04:28,810 So now in step two or part two we're going to actually create our component and that is a function that's 61 00:04:28,810 --> 00:04:36,150 going to return some amount of J.S. X so right here I'm going to create a new function using the const 62 00:04:36,180 --> 00:04:39,960 keyword I'll call it components screen. 63 00:04:40,360 --> 00:04:46,380 That's the name of my component and then going to assign it a function like so throughout this course 64 00:04:46,410 --> 00:04:51,090 for all of our different components I'm going to generally be using aero functions but you could just 65 00:04:51,090 --> 00:04:53,680 as well use a keyword function instead. 66 00:04:53,730 --> 00:04:58,350 There's no effective difference for most of the work that we're going to be doing between using a curious 67 00:04:58,440 --> 00:05:01,080 keyword function or an arrow function. 68 00:05:01,110 --> 00:05:05,470 I just like to use arrow functions because they stylistically look a little bit nicer to me. 69 00:05:06,430 --> 00:05:12,790 So then inside of here as we just mentioned our function is going to return some amount of J.S. X and 70 00:05:12,790 --> 00:05:15,700 as a reminder J S x looks a lot like each team l. 71 00:05:15,760 --> 00:05:21,470 And it tells react native what we want to show on the screen of our device so in this case I'm going 72 00:05:21,470 --> 00:05:26,880 to return a text element like so. 73 00:05:26,880 --> 00:05:32,610 So this each team also looking stuff is J.S. X. This tells react native that we want to show some amount 74 00:05:32,610 --> 00:05:37,950 of text to the user the text that we want to show we placed in between those two tags. 75 00:05:38,040 --> 00:05:45,890 So maybe right now I'll print out something like this is the components screen like so and then I'll 76 00:05:45,890 --> 00:05:51,410 add on a semicolon to the very end of the line the semicolon is not strictly required but in general 77 00:05:51,500 --> 00:05:54,160 I add in semicolons everywhere that you're supposed to add them in. 78 00:05:54,170 --> 00:05:56,870 Even though for react it doesn't technically make a difference. 79 00:05:56,900 --> 00:06:02,340 We could leave that off and leave off the semicolon at the end of the function as well okay. 80 00:06:02,350 --> 00:06:05,820 So we've now created our first component right here. 81 00:06:05,930 --> 00:06:10,310 Now the part 3 they're going to go through we're going to create something called a style sheet remember 82 00:06:10,370 --> 00:06:13,130 a style sheet is just like a style sheet inside the browser. 83 00:06:13,250 --> 00:06:17,720 It is used to apply some amount of styling to our component that we just created. 84 00:06:17,720 --> 00:06:22,370 So in our case we're going to create a style sheet and we're going to try to create a new style that's 85 00:06:22,370 --> 00:06:30,260 going to change the font size of that text element so to do so I'll write out const styles equals style 86 00:06:30,260 --> 00:06:37,810 sheet dot create and I'll pass in an object like so inside this object we're going to eventually define 87 00:06:37,870 --> 00:06:42,610 a bunch of different groups of styles for the first one we're going to create right here I'm going to 88 00:06:42,610 --> 00:06:51,490 create a new style property called text style like so so you can think of this as creating a grouping 89 00:06:51,520 --> 00:06:56,700 of different styling rules that we're going to apply to a name called text style. 90 00:06:56,800 --> 00:07:01,000 Now just because I call this textile doesn't mean that it's going to automatically be applied to that 91 00:07:01,000 --> 00:07:01,820 text element. 92 00:07:02,110 --> 00:07:06,370 Instead there's a very manual process we have to go through where we're going to use these different 93 00:07:06,370 --> 00:07:11,410 styles we create to apply them to different elements that we create inside of our component we'll go 94 00:07:11,410 --> 00:07:16,570 into great detail in that later on but for right now let's just add in a little bit of code inside of 95 00:07:16,580 --> 00:07:25,190 this textile object I'm going to assign a font size property of 30 like so after that we're then going 96 00:07:25,190 --> 00:07:30,320 to take the style that is generated by the style she does create function and assigned to the styles 97 00:07:30,320 --> 00:07:32,990 object and we're going to apply it to that text element. 98 00:07:32,990 --> 00:07:39,380 So this is the very manual step that I just mentioned so right here inside that text element I'll say 99 00:07:39,470 --> 00:07:50,000 style then it equals then some curly braces and I'll say styles not text style like so. 100 00:07:50,210 --> 00:07:50,460 Okay. 101 00:07:50,480 --> 00:07:54,720 So that's a very manual step that we have to go through any time we want to wire up some styling. 102 00:07:54,720 --> 00:07:59,880 We'll talk more about exactly what the relationship is between that code right there and the object 103 00:07:59,910 --> 00:08:00,870 we create down there. 104 00:08:00,960 --> 00:08:06,820 But right now let's just finish up our component file it's now four part four. 105 00:08:06,820 --> 00:08:11,650 We're going to export the component we just created so we can use it somewhere else inside of our project. 106 00:08:11,650 --> 00:08:17,710 So to do so at the very bottom of the file I will write out exports default and then the name of our 107 00:08:17,710 --> 00:08:19,720 component that we created right here. 108 00:08:19,720 --> 00:08:26,130 So export default components screen like so and that's pretty much it. 109 00:08:26,140 --> 00:08:33,080 So we've now created our first component file now we put back over to our device. 110 00:08:33,080 --> 00:08:35,630 You'll notice that nothing on the screen over here has changed. 111 00:08:35,750 --> 00:08:39,800 So just because we created a component file doesn't mean that anything about our project is going to 112 00:08:39,800 --> 00:08:41,180 change right away. 113 00:08:41,210 --> 00:08:45,260 Instead we have to make sure that we tell react native that we want to show this component on the screen 114 00:08:45,260 --> 00:08:46,340 somehow. 115 00:08:46,340 --> 00:08:49,220 So let's take a quick pause right here and we'll tackle that in the next video.