Solving React challenges from FreeCodeCamp. | Challenge number 1,2 and 3.
Hello guys, I am Chaitanya Giri and welcome to this tutorial series where you’ll be learning React JS from FreeCodeCamp with me.
This is essentially the first article of this series though previous to this there was an introduction article but that’s up to you if you want to read an introduction article or not. Let’s start.
The initial challenges are pretty much on the easier side since you need to be comfortable when you are learning something new. This tutorial is covering 3 challenges namely:
Since all the three challenges deal with JSX lets learn about JSX first.
JSX acts as a wooden bridge when you need to cross the river of HTML with the help of JavaScript(wood).
Now whenever you need a way to understand any statement about JSX refer to this particular quote. For example —
“JSX is a syntactic extension of JavaScript” — A wooden bridge is indeed made up of wood.
Now if you have checked any node_modules folder there is a high probability that you have seen something like Babel. Babel essentially is a tool that allows the browser to convert JSX into Javascript (a form that it understands). At this point I’ll need to recommend an article that’ll help you understand react more have a look at this one Thinking in React.
Solutions and explanation -
1, Create a Simple JSX Element
const JSX = <h1>Hello JSX!</h1>;2, Create a Complex JSX Element
const JSX = <div><h1>This is a heading.</h1><p>This is a paragraph.</p><ul>
<li>This is first list item.</li>
<li>This is second list item.</li>
<li>This is third list item.</li>
</ul></div>;
A JSX is essentially a single element so if you have to add multiple elements you should wrap them inside a single div element.
3, Add Comments in JSX
const JSX = (<div><h1>This is a block of JSX</h1><p>Here's a subtitle</p>{/* This is a Comment */}</div>);
You might have observed the presence of parenthesis here it is a good practice to add parenthesis while defining a JSX constant. Try removing it and then running the tests(it’ll still pass all the test cases).
This brings us to the end of first tutorial. I totally agree that this was easier and you could have done it without any assistance but it did not have anything good that I could have explained. Next articles will surely have that.
Only first few articles will be posted here on medium complete set of tutorial is available for free on my website.
Remember to follow me on instagram, twitter, github and medium . Happy Coding.
