Day 2 — Learning React

mdz
mdz
Sep 2, 2018 · 3 min read

Hello and welcome back . This is the second day of learning react [JavaScript Framework]. If you haven’t read the previous post, go check that out first as i have already talked about the my machine setup and environment setup and also the project structure with all dependencies which will be helpful to get you started. And with out any further delay lets get back to today’s topic.

What i learned today?

JSX — JavaScript XML

Yes JSX is external feature provided by react to enhance and make full use of react by extending JavaScript’s syntax. JSX act as syntax extension to JavaScript. So what basically JSX helps is that we can write our HTML code inside of our React project’s JavaScript file. Yes, isn’t that really great? I think it really help writing code independent of other. And also binding the logic and markup in the same file as individuals. Well that is why react is most popular for which they call as components. These components are reusable.

How JSX works?

Place the HTML code inside JavaScript file, as the React will render the HTML code to browser

const user = {
name: "mdz",
}
const template = (
<div>
<h1>Hello, world!</h1>
<p>Welcome to the world of React {user.name}</p>
</div>
);

JSX comes with lots of bundle packed features. As you can see from the above code we can use the power of JavaScript inside the markup itself. All the logic written in JavaScript code should be placed inside a pair of curly braces. we can add array, variable, strings and number.

JSX has some strict rules to follow. The react doesn’t like objects, Boolean inside the markup. As it will through error and the code will not be compiled. All the tag elements like h1, p, img etc must be placed inside the div tag.

React render function

Reacts render() function takes 2 argument one is the template which is to be rendered and other argument is where to render the template in the DOM.

ReactDOM.render(template, document.getElementById('app'))

React App

This is a small toggle app which i wrote . The detail will be displayed once the show detail button is clicked and also change the button text to “hide detail”. When hide detail button is clicked the detail will not be rendered and the button text will also revert to “show detail”. Yeah i know its not a cool thing to show but that is what i could do in a couple of minutes. Do let me know about your project in the response section below, i would love to know that. And stay tuned for my bigger projects on react.

let state = 0;
const renderDetail = () => {
if (state === 0) {
state+= 1;
render();
} else {
state-= 1;
render();
}
}
const render = () => {
const template = (
<div>
<h1>Visibilty Toggle</h1>
<button onClick={renderDetail}>{state === 1 ? "hide detail" : "show detail"}</button>
{state === 1 ? <p>showing details</p> : <span></span>}
</div>
);
const appRoot =document.getElementById('app'); ReactDOM.render(template, appRoot);
}
render();

Wrapping up

I am wrapping up my lessons for today. As i have gone through video tutorials and React official documentations. Hope you enjoyed it.

Well thanks for the read . please drop a clap as it will motivate me on my journey of learning React. Do follow me on Instagram. Thanks and i will catch you in the next post.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade