Let’s React to React

There were days when learning HTML, CSS and somewhat Javascript was enough to master the front-end because at that time there was no micro-service architecture like React or Angular. We’ll gonna talk about React in this article.

React is not cool because it is popular

It is popular because it is cool.

React is an open-source front-end JavaScript library and I would say nowadays it is the most popular front-end framework/library and it’s cool.

React.js helps us to create single-page applications. In React we create components or I would say reusable components and using those reusable components we build a whole web app.

When using React you need not worry about your backend or database stack, it works with all either its node.js or Django or MySQL or anything. They also mention this on their website “Learn Once, Write Anywhere” i.e. they don’t care about your rest of the tech stacks you can use ReactJS anywhere.

When we talk about React, the question arises why React why not Vanilla JavaScript when we can do that with Vanilla JavaScript.

I would because JavaScript is slow. Now you might be thinking what the hell he is saying…..JavaScript…..Slow…but Let me complete. No doubt JavaScript is fast but when it comes DOM manipulation it gets slow that’s why we use React.

Let me explain while working with Vanilla JavaScript we keep our JavaScript logic and HTML content separate so for any manipulation using JS it has to go to the HTML content to make changes that make it slow whereas in React we keep all our content and logic at the same place. In React we don’t write HTML code but it gets generated by JSX.

I am not saying don’t use JavaScript!! If you’re building a small web app then, of course, JavaScript is a better option but if you’re going for a large scale application you should go for some framework or library like React.

Let’s have a look at prerequisite to start React:

1. HTML
   The first thing to learn for designing web pages is HTML, it was there and it will be there for sure in the coming future. You need to be good in your HTML skills.
   Checkout: Resources to learn HTML for free
2. CSS
   The second thing is CSS, there were days when people used to learn the Bootstrap to make responsive web pages and use the pre-made components for the web page but now just learning bootstrap is not enough you have to be strong on your CSS and make good command on CSS property like Flexbox and Grid.
   Checkout: Resources to learn CSS for free
3. JavaScript
   The third thing is JavaScript, the language that is ruling the web development either its front-end or back-end. You’ll find most of the tutorial mentioning the prerequisite for React as Basic JavaScript but I totally disagree. I always suggest mastering the JavaScript before jumping to React.
   Checkout: Resources to master JavaScript
4. Familiar with npm
   npm is node package manager that helps in installing node modules in our web apps. To use npm you should have node.js installed in your system.

Let’s move towards building a React App:

To build an app using React, you need two packages React and ReactDOM.

React is the overall package with functionality to build out apps whereas ReactDOM is used to render things on the screen.

To create an element in React we use an inbuilt React function React.createElement(type, props, children).

type: type is the type of element like div, h1, p
props: props are the properties like className or eventHandlers
children: children means the content inside your element

//To create a p element with className p-class with content Hey! React.
HTML: <p class="p-class">Hey! React.</p>
React: React.CreateElement("div","p-class","Hey! React.")

Looks weird…Isn’t it? So we use JSX to create React Components.

JSX stands for JavaScript XML looks like HTML but is a special dialect of JavaScript. I agree I asked you to be good at HTML but now its time to take a break. Make HTML your ex and move to JSX.

It is very important to know how to transform HTML into JSX. To use JSX we need to add one more package, Babel. To know more about JSX, HTML and Babel, Click Here.

Hope you have seen JSX and ready to create simple React App using CDN links without deep diving into React. Just create an HTML file.

So yes our React App is ready!!! But this was just to explain you how React works, we won’t be creating React Apps this way.

Note: You might have noticed that we have covered our two p tags with a div because the render method in React component should always return one parent component only.

<div>
    <p className="p-class">Hey! React.</p>
    <p className="p-class">This is a Sample React Component.</p>
</div>

Instead of wrapping those in a div you can also wrap blank tags <></>, this is called fragments.

<>
    <p className="p-class">Hey! React.</p>
    <p className="p-class">This is a Sample React Component.</p>
</>

The difference between using div and fragment is if you inspect the component you’ll find that div gets rendered on the DOM whereas fragment doesn’t. If we use fragment only the content inside those blank tags get rendered on the DOM.

If <></> doesn’t work for you use <React.Fragment></React.Fragment>

when using <div></div>

when using <></>

That’s all for React. We’ll dive deep into React in upcoming posts.

I’ll continue to more articles diving deep into React explaining the bits and pieces of React.

Reading is good but reading with implementation is great !

Suggestions and critics about the article are always welcome.