freeCodeCamp.org React: Add Comments in JSX 3/47

Objective:

JSX is a syntax that gets compiled into valid JavaScript. Sometimes, for readability, you might need to add comments to your code. Like most programming languages, JSX has its own way to do this.
To put comments inside JSX, you use the syntax {/* */} to wrap around the comment text.


The code editor has a JSX element similar to what you created in the last challenge. Add a comment somewhere within the provided div element, without modifying the existing h1 or p elements.

Solution:

You need to add line: {/* */}
In my example it’s line 5.

freeCodeCamp.org React: Create a Simple JSX Element 1/47

Objective:

Intro: React is an Open Source view library created and maintained by Facebook. It’s a great tool to render the User Interface (UI) of modern web applications.
React uses a syntax extension of JavaScript called JSX that allows you to write HTML directly within JavaScript. This has several benefits. It lets you use the full programmatic power of JavaScript within HTML, and helps to keep your code readable. For the most part, JSX is similar to the HTML that you have already learned, however there are a few key differences that will be covered throughout these challenges.
For instance, because JSX is a syntactic extension of JavaScript, you can actually write JavaScript directly within JSX. To do this, you simply include the code you want to be treated as JavaScript within curly braces: { 'this is treated as JavaScript code' }. Keep this in mind, since it’s used in several future challenges.
However, because JSX is not valid JavaScript, JSX code must be compiled into JavaScript. The transpiler Babel is a popular tool for this process. For your convenience, it’s already added behind the scenes for these challenges. If you happen to write syntactically invalid JSX, you will see the first test in these challenges fail.
It’s worth noting that under the hood the challenges are calling ReactDOM.render(JSX, document.getElementById('root')). This function call is what places your JSX into React’s own lightweight representation of the DOM. React then uses snapshots of its own DOM to optimize updating only specific parts of the actual DOM.


Instructions: The current code uses JSX to assign a div element to the constant JSX. Replace the div with an h1 element and add the text Hello JSX! inside it.

Solution:

Copy Hello JSX! and paste between tags and replace div with h1

R2D006 #100DaysOfCode

Today I finished adapting template to what Edwin wants, although I think he will need some more changes. Meanwhile he decided to create MySQL database, which I have done too. That is actually nothing new, as I have done PHP with Mr Mischook and I would have carried on with him, but sadly he decided to put someone else on his throne and that person is not vibrating quite as well with me as Stefan did, so I try this guy Edwin now, but he causes problems too. Trouble is as well, this is a little bit more advance stuff and I thought it would be nice and easy way up. Sadly this is not a case, it’s steep climb. With Edwin not so much if you stop his videos all the time, but with StudioWeb.com it is.

Now I was doing all this fantastic work and my son got up! It’s 5.30 AM and I have no peace no more…

R2D005 #100DaysOfCode

Another day full of adventures. I had to betray VIM for a minute as I don’t know how to use multiple files there, but I am sure I would be a lot more efficient to do it there what I do in Sublime, which is just so slow and just hard really…

I covered Edwin Diaz’s OOP section about editing: he basically gets you to split large index. php file into lots of smaller ones, so you have top navigation and side navigation in separated. This is kind of cool, but doing it in SublimeText2 is real pain. If I only knew how to VIM it! Well, I guess the day will come to do it that way…

My son woke up at 6 and that was pretty much the end of my coding for a day. I have done some vimtutor bits, but nothing serious. He just would not have it and I felt that I need to pay him some attention anyhow. So I cooked oats for breakfast, helped him with his school app and with Heroes of Might and Magic 3 after that, when mummy did not look ūüôā

R2D004 #100DaysOfCode

So I am learning more and more about vim and it’s cool features. It looks like this at the moment:

So this is my configuration file I downloaded from GitHub from guy called simonista. I commented lines 93-99 and added my only one addition, my colour scheme, which is elflord. I have no idea about a lot of stuff that goes on in there, but I didn’t like light solarized thing.

PHP wise I have done constructors and destructors, which wasn’t really exciting to be fair. Now Edwin wants to do some project, it supposed to be picture gallery. It sounds interesting, see how he performs that! So far he said we will be using all sorts of technologies: Bootstrap, AJAX, jQuery, Google API, pagination, login. Well, we shall see!

After that there were dad dutes: feeding family, going out and play football, get the older one for training and than enduring extra hour and a half in the park… Got back home well after 9PM and put older one to sleep… I was gone with him.

R2D003 #100DaysOfCode

So today I managed to set up VIM under Windows, I downloaded configuration template from GitHub and tweaked it a little so it doesn’t hurt me ūüôā It has it’s colorscheme set to elflord and lines are now numbered, which is great! I don’t think I will now digging into SublimeText2, but I will likely go into GNU Emacs as well.

I have learnt about modifiers, getters and setters. I used both paid Edwin Diaz course from udemy.com and free The Net Ninja OOP PHP course on YouTube.come. They both pretty informative, but if you want to do, what Edwin does you need to be extremely quick and pause video a lot as he moves all the time. I would say this is a bit irritating. Luckily he provides source code, so you can analyse it, but debugging such a silly things makes you feel really angry.

As per fatherhood, it was fairly boring day, as we had lots of visitors: health visitor, neighbour. Oldest got bored during second one and started to be naughty. I took him shopping and to the park afterwords. There was kids playing, so it was great. After park I dragged him nearer home, where boy tried to play football on his own, my son quickly provided him company. He was great there. I finished cooking and we ate, which made wife happy. At the end I helped bathing little one and washed older boy in order to put him to sleep, which wasn’t complicated task this time (I crashed as well hahaha).

R2D002 – PHP, VIM, SublimeText2

I made some more decisions. I am now suspending my JavaScript and concentrate on PHP. I am still going to continue my CSS course with StudioWeb.com, but I have this udemy.com courses that I bought and never used. These are Edwin Diaz things:

PHP OOP: Object Oriented Programming for beginners + Project and PHP for Beginners: How to Build an E-Commerce Store.

I have started with e-commerce thing, but I will do OOP now as it makes more sense to get fundamentals done first.

Meanwhile I will learn how to use vim although Edwin suggests SublimeText2 and this is what I will be using from now on. I have tried atom, but it was pretty slow on my system, same about brackets which are pretty cool, but when they slow down, they slow down. I also use NotePad++ but this thing got messed up when I installed some pluggins. Once you install them it is hard to get rid of them and some of them are 32 bits, some 64. If you get it mixed up, you will get error messages. Little nightmare.

What is also frustrating about NotePad++ is that it occasionally resets it’s settings and I am not sure how to prevent it. I has some great features like showing where function starts and where it ends. I really like that!

As per SublimeText2 it’s new for me.

Another one I would like to get used to is GNU Emacs, but chances are that I will do that after I get hold of Linux machine.

So far I covered Object Orientated Programming fundamentals, which are: classes and modifiers done, TODO: getters, setters, constructors and deconstructors. I have done it with Edwin Diaz, but I back up with The Net Ninja, as Edwin is a little chaotic and tends to talk without strict plan which is where Shaun excels (he fails to be practical though). I am doing it using SublimeText2 and VIM, which is quite cool as I can learn both along. I like colouring in VIM, seem to be a lot more to it! I have not learnt how to configure this beast, but give it time!

R2D001 – Sass: Nest CSS with Sass //freeCodeCamp.org

Objective:

Sass allows nesting of CSS rules, which is a useful way of organizing a style sheet.
Normally, each element is targeted on a different line to style it, like so:

nav {
  background-color: red;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}

For a large project, the CSS file will have many lines and rules. This is where nesting can help organize your code by placing child style rules within the respective parent elements:

nav {
  background-color: red;

  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

Use the nesting technique shown above to re-organize the CSS rules for both children of .blog-post element. For testing purposes, the h1 should come before the p element.

Solution:

Just move closing bracket } from line 4 to line 11

That was easy!

R2D001 – Sass: Store Data with Sass Variables //freeCodeCamp.org

Here we go, first exercise for freeCodeCamp.org today!

Objective:

One feature of Sass that’s different than CSS is it uses variables. They are declared and set to store data, similar to JavaScript.
In JavaScript, variables are defined using the let and const keywords. In Sass, variables start with a $ followed by the variable name.
Here are a couple examples:

$main-fonts: Arial, sans-serif;
$headings-color: green;

//To use variables:
h1 {
  font-family: $main-fonts;
  color: $headings-color;
}

One example where variables are useful is when a number of elements need to be the same color. If that color is changed, the only place to edit the code is the variable value.


Create a variable $text-color and set it to red. Then change the value of the color property for the .blog-post and h2 to the $text-color variable.

Solution:

Type $text-color: red; in line 2 or 3 and replace red in line 8 with $text-color

New round – R2D001 / Round 2 day 1 of 100 days of code

Well, I am still doing #100DaysOfCode thing, but I think I will do differently now. I will just do little notes of what I covered and it will be more fragmented, so I will get more posts that way hopefully. Each freeCodeCamp.org exercise will be done separately. I may talk about my StudioWeb.com course as well. I think I will add R2D001-R2D100 code to each post title just to make it recognisable. I think I will do my fatherhood/personal posts as well, as it entertains people too.

So far I have covered Google fonts, background colours and images, I also started box model chapter. That is with StudioWeb.com and Mr Stefan Mischook.

My little lad is now 8 days old and he developed colics which is pretty annoying, specially during the night. I have started to take him out on day 3. He fall asleep within minutes on first occasion. Older brother helped out when we went for walks. Yesterday was day 7, we went to the park with the boys, I kicked the ball with oldest while youngest was sleeping in the pram. We moved to the park, I had ambitious vision of long walk around, but Big Boy spotted playground which was locked for 3 months so he wanted to visit it. He went on monkey bars, which he did pretty well. After that he went to the zip line, where he was making silly things along other kids. Later he went back to the monkey bars but younger boy woke up and wanted to eat. His feeders were away so we had to retreat. Young boy was screaming, so I had to take him of the pram and cuddle and push the thing in the same time, sadly his brother did not want to help. We arrived just in time and minutes later mum came back so little boy could be fed! I reheated some leftovers so they had something to eat as they were all hungry.

In the evening I took oldest for kicking a ball again. When we came back, we had visitor. It was hard to put old one to bed. I think I fall asleep before he did…

Have a great day!

100 of #100DaysOfCode

So it is my 100 days done and dusted! My baby woke me up at night so it took me longer to get up… I managed do it for 4.20AM though! I jumped straight on the PC, not even cup of tea (which is overdue now and I need it badly).

Yesterday I walked my boys, oldest was a bit upset when I took younger out while he was sleeping, but we made up! We went for a walk and we played some football, he even forced me to get ice cream from the van!

These are now distant memories, when we have some exciting stuff to do, and we are talking about freeCodeCamp.org challenges:

jQuery: Target Even Elements Using jQuery 17 of 18

Objective:

You can also target elements based on their positions using :odd or :even selectors.
Note that jQuery is zero-indexed which means the first element in a selection has a position of 0. This can be a little confusing as, counter-intuitively, :odd selects the second element (position 1), fourth element (position 3), and so on.
Here’s how you would target all the odd elements with class target and give them classes:
$(".target:odd").addClass("animated shake");
Try selecting all the even target elements and giving them the classes of animated and shake. Remember that even refers to the position of elements with a zero-based system in mind.

Solution:
Add line 12: $(“.target:even”).addClass(“animated¬†shake”);

freeCodeCamp.org says:
I gotta have more cow bell.
#################<

jQuery: Use jQuery to Modify the Entire Page 18 of 18

Objective:
Add line 13: $(“body”).addClass(“animated¬†hinge”);
Solution:

freeCodeCamp.org says:
To the nines!
##################

And this is it! #100DaysOfCode is over! See what future brings next!

99 of #100DaysOfCode

I got up at 4.05, visited newborn and his mum, dressed up, put kettle on, checked on social media, turned on my PC and got on with it! I am so excited that it will be day 100 tomorrow I just can’t handle it:)
Other thing is this blog’s popularity grown up by 300% since the baby was born hitting massive 40 views yesterday which is enormous change from regular 6 to 10… Thank you very much!

As per yesterday. I walked with my boys for a very first time. It sounds so strange and exciting in the same time – my boys! The older was pushing the pram proudly and I just made sure he doesn’t do silly things, but he was pretty sensible most of times. Well, he wanted to please his brother with rapid ride downhill or freeride (hands of and off you go), but he was quite understanding to my explanation in this subject.

We have done some educational work and it was amazing: oldest boy have done all his doodle app homework, he wrote a little in his Polish handwriting book and, wait, wait, for a very first time he was reading out loud for wide audience – mum, dad and brother. He sat on top of the bed like a wise seer, I was on the floor and wife fed a baby on the armchair and he put all his effort in reading his little story. It was absolutely lovely!

Regarding programming: I have done some more of StudioWeb CSS course. Stefan Mischook has pretty unique approach to teaching, which he claims is the best… Oh well, he is introducing inheritance in CSS course which is something I have no seen before. He does it well, I must admit. I love is quiet, calm voice. Makes massive difference to all them orgasmic videos you can see elsewhere.

I have as well watched Udemy course for Java Script that I bought from NetNinja. I feel it is not really for me, it was praised for being informative, but it is fairly dry and his exciting approach to stuff that don’t do much is pretty off putting. But we shall see.

Now we are coming to our favourite – freeCodeCamp.org

jQuery: Use appendTo to Move Elements with jQuery 12 of 18

Objective:

Now let’s try moving elements from one div to another.
jQuery has a function called appendTo() that allows you to select HTML elements and append them to another element.
For example, if we wanted to move target4 from our right well to our left well, we would use:
$("#target4").appendTo("#left-well");
Move your target2 element from your left-well to your right-well.

Solution:
In line 6 type: $(“#target2”).appendTo(‘#right-well’);

freeCodeCamp.org says:
Walk on that sunshine!
############<<<<<<

jQuery: Clone an Element Using jQuery 13 of 18

Objective:

In addition to moving elements, you can also copy them from one place to another.
jQuery has a function called clone() that makes a copy of an element.
For example, if we wanted to copy target2 from our left-well to our right-well, we would use:
$("#target2").clone().appendTo("#right-well");
Did you notice this involves sticking two jQuery functions together? This is called function chaining and it’s a convenient way to get things done with jQuery.
Clone your target5 element and append it to your left-well.

Solution:
Type to line 7: $(“#target5”).clone().appendTo(“#left-well”);

freeCodeCamp.org says:
You make this look easy!
##############<<<<

jQuery: Target the Parent of an Element Using jQuery 14 of 18

Objective:

Every HTML element has a parent element from which it inherits properties.
For example, your jQuery Playground h3 element has the parent element of <div class="container-fluid">, which itself has the parent body.
jQuery has a function called parent() that allows you to access the parent of whichever element you’ve selected.
Here’s an example of how you would use the parent() function if you wanted to give the parent element of the left-well element a background color of blue:
$("#left-well").parent().css("background-color", "blue")
Give the parent of the #target1 element a background-color of red.

Solution:
Add to line 8: $(“#target1”).parent().css(“background-color”,¬†“red”);

freeCodeCamp.org says:
Standing ovation!
##############<<<<

jQuery: Target the Children of an Element Using jQuery 15 of 18

Objective:

When HTML elements are placed one level below another they are called children of that element. For example, the button elements in this challenge with the text “#target1”, “#target2”, and “#target3” are all children of the <div class="well" id="left-well"> element.
jQuery has a function called children() that allows you to access the children of whichever element you’ve selected.
Here’s an example of how you would use the children() function to give the children of your left-well element the color blue:
$("#left-well").children().css("color", "blue")


Give all the children of your right-well element the color orange.

Solution:
Add line 9: $(“#right-well”).children().css(“color”,¬†“orange”);

freeCodeCamp.org says:
Storm that castle!
###############<<<

jQuery: Target a Specific Child of an Element Using jQuery 16 of 18

Objective:

You’ve seen why id attributes are so convenient for targeting with jQuery selectors. But you won’t always have such neat ids to work with.
Fortunately, jQuery has some other tricks for targeting the right elements.
jQuery uses CSS Selectors to target elements. The target:nth-child(n) CSS selector allows you to select all the nth elements with the target class or element type.
Here’s how you would give the third element in each well the bounce class:
$(".target:nth-child(3)").addClass("animated bounce");
Make the second child in each of your well elements bounce. You must select the elements’ children with the target class.

Solution:
Add to line 10: $(“.target:nth-child(2)”).addClass(“animated¬†bounce”);

freeCodeCamp.org says:
Here’s looking at you, Code!
################<<

I think that will be it for now, it is 6 AM nearly enough, baby is grunting, his mum is walking around I think they may need some help. Thank you all for coming here and reading it right to the end! Have a great day!

98 of #100DaysOfCode

Sleepless nights? Well, we had first one! Two loud alarms went around 1 and after 2 this morning. I have tried and failed to comfort him – noise levels went up… As a result I got up later today, around 5 AM. I realised I have wrong title on yesterdays freeCodeCamp.org exercise, so I had to change this and I have not submit the task, so I had to re-do it too. Looks like everything is falling apart day!

jQuery: Disable an Element Using jQuery 9 of 18

Objective:

You can also change the non-CSS properties of HTML elements with jQuery. For example, you can disable buttons.
When you disable a button, it will become grayed-out and can no longer be clicked.
jQuery has a function called .prop() that allows you to adjust the properties of elements.
Here’s how you would disable all buttons:
$("button").prop("disabled", true);
Disable only the target1 button.

Solution:
Add $(“#target1”).prop(“disabled”, true); to line 4

freeCodeCamp.org says:
Coding spree!
#########<<<<<<<<

Once it is coding spree we will do one more:

jQuery: Change Text Inside an Element Using jQuery 10 of 18

Objective:

Using jQuery, you can change the text between the start and end tags of an element. You can even change HTML markup.
jQuery has a function called .html() that lets you add HTML tags and text within an element. Any content previously within the element will be completely replaced with the content you provide using this function.
Here’s how you would rewrite and emphasize the text of our heading:
$("h3").html("<em>jQuery Playground</em>");
jQuery also has a similar function called .text() that only alters text without adding tags. In other words, this function will not evaluate any HTML tags passed to it, but will instead treat it as the text you want to replace the existing content with.
Change the button with id target4 by emphasizing its text.
View the MDN web docs for <em> to learn the difference between <i> and <em> and their uses.
Note that while the <i> tag has traditionally been used to emphasize text, it has since been adopted for use as a tag for icons. The <em> tag is now widely accepted as the tag for emphasis. Either will work for this challenge.

Solution:
Add line 4: $(“#target4”).html(“<em>#target4</em>”);

freeCodeCamp.org says:
You’ve got the touch!
##########<<<<<<<<

jQuery: Remove an Element Using jQuery 11 of 18

Objective:

Now let’s remove an HTML element from your page using jQuery.
jQuery has a function called .remove() that will remove an HTML element entirely
Remove element target4 from the page by using the .remove() function.

Solution:
Add line 5: $(“#target4”).remove();

freeCodeCamp.org says:
Tomorrow, the world!
###########<<<<<<<

I think that will be it for today! Family will wake up soon and I still need to tidy up and get ready for another challenging day, out of freeCodeCamp.org.

97 of #100daysOfCode

3 days left, how exciting! I think we are getting to the point when we need to summaries what we have done and what not?

Yesterday was quite a day with birth and partying and all the others… I really don’t know how I managed to do jQuery bit and post the blog entry!

Today is pretty sluggish, I try to do something but feel like sleep very soon. I guess part of it is catching up with yesterday marathon. But I need to get myself in the shape, otherwise it will be really hard!

Right, I got up early today and I managed to do one exercise, after which I was potting around trying to tidy up the house which is not really my thing. I washed downstairs windows, done most of kitchen, trying on lounge now and hopefully hoover it all up at the end of the game.

But meanwhile I need to do a little bit of coding. I was listening to Stefan Mischook CSS course and I found his lectures very interesting, he tells stuff that other sources simply ignore, so kudos for that! Plus there was a question about colour of his shirt (black), which I guess was a joke. Not bad break from rather monotonous stuff.

Lets go to our favourite freeCodeCamp.org and jQuery:

jQuery: Change the CSS of an Element Using jQuery

Objective:

We can also change the CSS of an HTML element directly with jQuery.
jQuery has a function called .css() that allows you to change the CSS of an element.
Here’s how we would change its color to blue:
$("#target1").css("color", "blue");
This is slightly different from a normal CSS declaration, because the CSS property and its value are in quotes, and separated with a comma instead of a colon.
Delete your jQuery selectors, leaving an empty document ready function.
Select target1 and change its color to red.

Solution:
Remove, copy, paste, edit – it comes as: $(“#target1”).css(“color”, “red”);

freeCodeCamp.org says
Down the rabbit hole we go!
########<<<<<<<<<<<<<

+96 of #100DaysOfCode

It was complicated today… I went to the hospital last night and woke up in there around 2.20AM. Wife was screaming. First contractions went on. No sleep no more… It all started full monty… In one minute I was about to faint, not emotional, just exhausted… I sat down on the floor, I said I feel like fainting. They said pull your head forward… I thought it is not enough. I put my head under the tap and flushed some cold water. What a relief! I was on it! I support my lady with everything ever since and she was so lovely to finish it within an hour – by 3.20 AM Mr Tigran was born and with us.

They have relisted us around midday. After that I cooked lunch and went for some gathering called navelity – pńôpkowe in Polish. Nobody really drunk for my son… But they did a little so hopefully he will be fine… As soon as I came back I jumped on it.

Ok, enough of that, lets do some coding. Because it is Sunday and I am tipsy, we will do some jQuery.

jQuery: Remove Classes from an Element with jQuery

Objective:

In the same way you can add classes to an element with jQuery’s addClass() function, you can remove them with jQuery’s removeClass() function.
Here’s how you would do this for a specific button:
$("#target2").removeClass("btn-default");
Let’s remove the btn-default class from all of our button elements.

Solution:
Add line 6:  $(“button”).removeClass(“btn-default”);

freeeCodeCamp.org says:
Gotta go fast!
#######<<<<<<<<<<<

It was a looooong day! I am sooo glad it’s Sunday! I woke up, I found wife, both kids and phone. Life is great again!

95 of #100DaysOfCode

I got up at 4.15 and it was fantastic sunrise… Picture does not show everything but I find quite pretty. It’s a view from my son’s bedroom.

As per work, yes I went there. Way to wasn’t as nice as previous one, although final stages not too bad:

This bridge opens and closes

At work I was operating this boy:

Diesel counterbalance forklift

It was sunny day so great fun! On the way back bridge was closed:

Bridge is up, boats are queueing to get under it. Funny to watch!

After work I was pretty worn, it was fair cycle, took me just under an hour to get there, but well over an hour to come back! Google maps suggests 53 minutes, but that does not take hills into account I guess…

Let’s do some coding!

jQuery: Delete Your jQuery Functions 5 of 18

I think I love that!

Objective:

These animations were cool at first, but now they’re getting kind of distracting.
Delete all three of these jQuery functions from your document ready function, but leave your document ready function itself intact.

Solution:

Select:

and delete:

freeCodeCamp.org says:
Way cool!
######<<<<<<<<<<<<<<<<
Nothing to add I guess!

jQuery: Target the Same Element with Multiple jQuery Selectors 6 of 18

Objective:

Now you know three ways of targeting elements: by type: $("button"), by class: $(".btn"), and by id $("#target1").
Although it is possible to add multiple classes in a single .addClass() call, let’s add them to the same element in three separate ways.
Using .addClass(), add only one class at a time to the same element, three different ways:
Add the animated class to all elements with type button.
Add the shake class to all the buttons with class .btn.
Add the btn-primary class to the button with id #target1.
Note
You should only be targeting one element and adding only one class at a time. Altogether, your three individual selectors will end up adding the three classes shake, animated, and btn-primary to #target1.

Solution:

They basically want us to write what we deleted in previous tas and change some bits. You may like to rewrite it from scratch or copy, paste, edit. Solution is here:

freeCodeCamp.org says:
Shiver me timbers!
#######<<<<<<<<<<<<<<<

Now I am going to do some less exciting stuff which is coding along some tutorial. I will let you know tomorrow! Have a wonderful day!

freeCodeCamp.org React: Use a Ternary Expression for Conditional Rendering 41/47

Objective:

Before moving on to dynamic rendering techniques, there’s one last way to use built-in JavaScript conditionals to render what you want: the ternary operator. The ternary operator is often utilized as a shortcut for if/else statements in JavaScript. They’re not quite as robust as traditional if/else statements, but they are very popular among React developers. One reason for this is because of how JSX is compiled, if/else statements can’t be inserted directly into JSX code. You might have noticed this a couple challenges ago ‚ÄĒ when an if/else statement was required, it was always outside the return statement. Ternary expressions can be an excellent alternative if you want to implement conditional logic within your JSX. Recall that a ternary operator has three parts, but you can combine several ternary expressions together. Here’s the basic syntax:

condition ? expressionIfTrue : expressionIfFalse;

The code editor has three constants defined within the CheckUserAge component’s render() method. They are called buttonOne, buttonTwo, and buttonThree. Each of these is assigned a simple JSX expression representing a button element. First, initialize the state of CheckUserAge with input and userAge both set to values of an empty string.
Once the component is rendering information to the page, users should have a way to interact with it. Within the component’s return statement, set up a ternary expression that implements the following logic: when the page first loads, render the submit button, buttonOne, to the page. Then, when a user enters their age and clicks the button, render a different button based on the age. If a user enters a number less than 18, render buttonThree. If a user enters a number greater than or equal to 18, render buttonTwo.

Solution:

First of all we need to define state by creating object this.state in line 10 :

    this.state = {
      userAge : "", 
     input:""
    }

After that we need to do some juicy bits which is this ternary operator. We scroll all the way to line 43 and in curly brackets type our if statement in ternary form:

{this.state.userAge === "" ? buttonOne:
          this.state.userAge < 18 ? buttonThree : buttonTwo}

We asking what is user age and rendering buttonOne to submit input. Then we check if it is less than 18 and rendering buttonThree if yes or buttonTwo if not.

freeCodeCamp.org React: Use && for a More Concise Conditional 40/49

Objective:

The if/else statements worked in the last challenge, but there’s a more concise way to achieve the same result. Imagine that you are tracking several conditions in a component and you want different elements to render depending on each of these conditions. If you write a lot of else if statements to return slightly different UIs, you may repeat code which leaves room for error. Instead, you can use the && logical operator to perform conditional logic in a more concise way. This is possible because you want to check if a condition is true, and if it is, return some markup. Here’s an example:

{condition && <p>markup</p>}

If the condition is true, the markup will be returned. If the condition is false, the operation will immediately return false after evaluating the condition and return nothing. You can include these statements directly in your JSX and string multiple conditions together by writing && after each one. This allows you to handle more complex conditional logic in your render() method without repeating a lot of code.

Solve the previous example again, so the h1 only renders if display is true, but use the && logical operator instead of an if/else statement.

Solution:

You need to read carefully what they write. <h1> tag is your focus and it goes into second part, after &&. Prior to that is a condition, which is this.state.display. Everything gets wrapped up in curly brackets {}. Is that make sense? Hmm…

Go to line 19 and before tag open curly brackets, type this.state.display and &&. After that goes tag which gets wrapped into closing } like this:

{this.state.display && <h1>Displayed!</h1>}

Whole code looks like this:

freeCodeCamp.org React: Render with an If-Else Condition 39/47

Objective:

Another application of using JavaScript to control your rendered view is to tie the elements that are rendered to a condition. When the condition is true, one view renders. When it’s false, it’s a different view. You can do this with a standard if/else statement in the render() method of a React component.

MyComponent contains a boolean in its state which tracks whether you want to display some element in the UI or not. The button toggles the state of this value. Currently, it renders the same UI every time. Rewrite the render() method with an if/else statement so that if display is true, you return the current markup. Otherwise, return the markup without the h1 element.
Note: You must write an if/else to pass the tests. Use of the ternary operator will not pass here.

Solution:

It was interesting for me as I wrote buggy code at first and I had to look for errors.

First of all – if statement:

if(this.state.display) // or if(this.state.display === true)

That was quite interesting for me, as I got used to always put === operator to check boolean value, the solution does it without, I tested both versions and both worked.

Next put curly brackets around return() function:

{
return(
       <div>
         <button onClick={this.toggleDisplay}>Toggle Display</button>
         <h1>Displayed!</h1>
       </div>
    )
}

After closing bracket type else, open another set of curly brackets, return above and delete <h1>Displayed!</h1> . Congratulations, job done! Your code now may look like this:

freeCodeCamp.org React: Use Advanced JavaScript in React Render Method 38/47

Objective:

In previous challenges, you learned how to inject JavaScript code into JSX code using curly braces, { }, for tasks like accessing props, passing props, accessing state, inserting comments into your code, and most recently, styling your components. These are all common use cases to put JavaScript in JSX, but they aren’t the only way that you can utilize JavaScript code in your React components.
You can also write JavaScript directly in your render methods, before the return statement, without inserting it inside of curly braces. This is because it is not yet within the JSX code. When you want to use a variable later in the JSX code inside the return statement, you place the variable name inside curly braces.

In the code provided, the render method has an array that contains 20 phrases to represent the answers found in the classic 1980’s Magic Eight Ball toy. The button click event is bound to the ask method, so each time the button is clicked a random number will be generated and stored as the randomIndex in state. On line 52, delete the string "change me!" and reassign the answer const so your code randomly accesses a different index of the possibleAnswers array each time the component updates. Finally, insert the answer const inside the p tags.

Solution:

We have two things to edit: line 52 in order to set value of answer constant and line 66 where <p> tag lives.
In line 52 you delete comments and 'change me' string and instead put array possibleAnswers[] with access variable randomIndex (this variable needs our much loved access key – this.state.). After all line 52 looks like this:

const answer = possibleAnswers[this.state.randomIndex];

Now we just put

{answer}

to line 66 and we can run test.

Here is image version:

freeCodeCamp.org React: Add Inline Styles in React 37/47

Objective:

You may have noticed in the last challenge that there were several other syntax differences from HTML inline styles in addition to the style attribute set to a JavaScript object. First, the names of certain CSS style properties use camel case. For example, the last challenge set the size of the font with fontSize instead of font-size. Hyphenated words like font-size are invalid syntax for JavaScript object properties, so React uses camel case. As a rule, any hyphenated style properties are written using camel case in JSX.
All property value length units (like height, width, and fontSize) are assumed to be in px unless otherwise specified. If you want to use em, for example, you wrap the value and the units in quotes, like {fontSize: "4em"}. Other than the length values that default to px, all other property values should be wrapped in quotes.

If you have a large set of styles, you can assign a style object to a constant to keep your code organized. Uncomment the styles constant and declare an object with three style properties and their values. Give the div a color of "purple", a font-size of 40, and a border of "2px solid purple". Then set the style attribute equal to the styles constant.

Solution:

Just follow instructions and you will get there, simple as that! Remove comments // from line first, press End key and open curly brackets. You may wish to add new lines or not, in any case what we do now is an object, so between properties methods goes coma `,` . Once we have got that established, we write what they want us to write:

const styles = {
  color: "purple",
  fontSize: 40,
  border: "2px solid purple"
}

We now go to the line where <div> element lives and we do little replacement: we remove {color: "yellow", fontSize: 24} and add styles:

<div style={/*{color: "yellow", fontSize: 24}*/ styles}>Style Me!</div>

I hope it makes sense, if not, let me know!

Final result looks like this:

freeCodeCamp.org React: Introducing Inline Styles 36/47

Objective:

There are other complex concepts that add powerful capabilities to your React code. But you may be wondering about the more simple problem of how to style those JSX elements you create in React. You likely know that it won’t be exactly the same as working with HTML because of the way you apply classes to JSX elements.
If you import styles from a stylesheet, it isn’t much different at all. You apply a class to your JSX element using the className attribute, and apply styles to the class in your stylesheet. Another option is to apply inline styles, which are very common in ReactJS development.
You apply inline styles to JSX elements similar to how you do it in HTML, but with a few JSX differences. Here’s an example of an inline style in HTML:
<div style="color: yellow; font-size: 16px">Mellow Yellow</div>
JSX elements use the style attribute, but because of the way JSX is transpiled, you can’t set the value to a string. Instead, you set it equal to a JavaScript object. Here’s an example:
<div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>
Notice how we camelCase the “fontSize” property? This is because React will not accept kebab-case keys in the style object. React will apply the correct property name for us in the HTML.

Add a style attribute to the div in the code editor to give the text a color of red and font size of 72px.
Note that you can optionally set the font size to be a number, omitting the units “px”, or write it as “72px”.

Solution:

This is pretty simple, it amazes me how after all them hard ones in the beginning I just fly by these basic ones… Anyway, we add attributes, colour goes red and font size grows to 72 px. In order to do that we need to change line 4:

<div style={{color: "red", fontSize: 72}}>Big Red</div>

And whole code looks like this:

freeCodeCamp.org React: Optimize Re-Renders with shouldComponentUpdate 35/47

Objective:

So far, if any component receives new state or new props, it re-renders itself and all its children. This is usually okay. But React provides a lifecycle method you can call when child components receive new state or props, and declare specifically if the components should update or not. The method is shouldComponentUpdate(), and it takes nextProps and nextState as parameters.
This method is a useful way to optimize performance. For example, the default behavior is that your component re-renders when it receives new props, even if the props haven’t changed. You can use shouldComponentUpdate() to prevent this by comparing the props. The method must return a boolean value that tells React whether or not to update the component. You can compare the current props (this.props) to the next props (nextProps) to determine if you need to update or not, and return true or false accordingly.

The shouldComponentUpdate() method is added in a component called OnlyEvens. Currently, this method returns true so OnlyEvens re-renders every time it receives new props. Modify the method so OnlyEvens updates only if the value of its new props is even. Click the Add button and watch the order of events in your browser’s console as the lifecycle hooks are triggered.

Solution:

All you need to know is how to check if number is even. Little search in your favourite search engine gives you formula:

n % 2 == 0

With this we can start if statement checking whether nextProps.value divides by 2 or not and return true or false accordingly:

     if(nextProps.value% 2 == 0)
    {
      return true;
    }else{
      return false;
    }

It works!

freeCodeCamp.org React: Add Event Listeners 34/47

Objective:

The componentDidMount() method is also the best place to attach any event listeners you need to add for specific functionality. React provides a synthetic event system which wraps the native event system present in browsers. This means that the synthetic event system behaves exactly the same regardless of the user’s browser – even if the native events may behave differently between different browsers.
You’ve already been using some of these synthetic event handlers such as onClick(). React’s synthetic event system is great to use for most interactions you’ll manage on DOM elements. However, if you want to attach an event handler to the document or window objects, you have to do this directly.

Attach an event listener in the componentDidMount() method for keydown events and have these events trigger the callback handleKeyPress(). You can use document.addEventListener() which takes the event (in quotes) as the first argument and the callback as the second argument.
Then, in componentWillUnmount(), remove this same event listener. You can pass the same arguments to document.removeEventListener(). It’s good practice to use this lifecycle method to do any clean up on React components before they are unmounted and destroyed. Removing event listeners is an example of one such clean up action.

Solution:

This one is a little bit more complicated. I had good idea how to do it, but I did not think keydown was a string (but it is!). So you go to line 11 and follow with instructions just backwards: start from document.addEventListener() and add "keydown" event (this is how they call it here) and handleKeyPress() event trigger callback (what a name!). After that you repeat process in next function, but you type remove instead of add. All together it looks like this:

  componentDidMount() {
    document.addEventListener("keydown", this.handleKeyPress);
  }
  componentWillUnmount() {
    document.removeEventListener("keydown", this.handleKeyPress);
  }

freeCodeCamp.org React: Use the Lifecycle Method componentDidMount 33/47

Objective:

Most web developers, at some point, need to call an API endpoint to retrieve data. If you’re working with React, it’s important to know where to perform this action.
The best practice with React is to place API calls or any calls to your server in the lifecycle method componentDidMount(). This method is called after a component is mounted to the DOM. Any calls to setState() here will trigger a re-rendering of your component. When you call an API in this method, and set your state with the data that the API returns, it will automatically trigger an update once you receive the data.

There is a mock API call in componentDidMount(). It sets state after 2.5 seconds to simulate calling a server to retrieve data. This example requests the current total active users for a site. In the render method, render the value of activeUsers in the h1. Watch what happens in the preview, and feel free to change the timeout to see the different effects.

Solution:

Is it really that easy or am I getting really good at it? Or I simply learnt finally the terminology?

Anyhow, this one is like this:

      <h1>Active Users: { this.state.activeUsers }</h1>

You just call this.state. as usual and add what they want, this time activeUsers after dot.

freeCodeCamp.org React: Use the Lifecycle Method componentWillMount 32/47

Objective:

React components have several special methods that provide opportunities to perform actions at specific points in the lifecycle of a component. These are called lifecycle methods, or lifecycle hooks, and allow you to catch components at certain points in time. This can be before they are rendered, before they update, before they receive props, before they unmount, and so on. Here is a list of some of the main lifecycle methods: componentWillMount() componentDidMount() shouldComponentUpdate() componentDidUpdate() componentWillUnmount() The next several lessons will cover some of the basic use cases for these lifecycle methods.
Note: The componentWillMount Lifecycle method will be deprecated in a future version of 16.X and removed in version 17. (Source)

The componentWillMount() method is called before the render() method when a component is being mounted to the DOM. Log something to the console within componentWillMount() – you may want to have your browser console open to see the output.

Solution:

This one is really simple! It is basic console.log ("Hello World! ") task:

console.log ("Hello World!");

If you didn’t know it, it’s just your brain has been twisted by overthinking. Very good task!