{"id":4488,"date":"2024-05-14T20:11:00","date_gmt":"2024-05-14T14:41:00","guid":{"rendered":"https:\/\/preprod.namastedev.com\/blog\/2024\/05\/14\/laying-the-foundation-namaste-react\/"},"modified":"2024-05-14T20:14:11","modified_gmt":"2024-05-14T14:44:11","slug":"namaste-react-episode-2-laying-the-foundation","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/namaste-react-episode-2-laying-the-foundation\/","title":{"rendered":"Namaste React | Episode 2 | Laying the Foundation!"},"content":{"rendered":"

\ud83d\udca1<\/p>\n

Please make sure to follow along with the whole \u201dNamaste React” <\/em><\/strong>series, starting from Episode-1 and continuing through each subsequent episode. The notes are designed to provide detailed explanations of each concept along with examples to ensure thorough understanding. Each episode builds upon the knowledge gained from the previous ones, so starting from the beginning will give<\/p>\n

you a comprehensive understanding of React development.<\/p>\n

<\/p>\n

\ud83d\udca1<\/p>\n

I’ve got a quick tip for you. To get the most out of these notes, it’s a good idea to watch Episode-2 <\/strong>first. Understanding what \u201dAkshay\u201d <\/em><\/strong>shares in the video will make<\/p>\n

these notes way easier to understand.<\/p>\n

<\/p>\n

So far, here’s what we’ve learned in the previous episode<\/strong><\/h4>\n

We learned that npm is anything but not node package manager and what is npx.<\/p>\n

We included node-modules and React in our project.<\/p>\n

We got to know the difference between package.json and package-lock.json.<\/p>\n

We also explored the concept of bundlers. We learned how to start our app.<\/p>\n

Don\u2019t forget \u201cParcel is a Beast\u201d.<\/p>\n

<\/p>\n

<\/p>\n

Part-1<\/strong><\/p>\n

<\/p>\n

Q ) What is another way of starting the build of the project?<\/strong><\/p>\n

We will be creating scripts instead of using \u201c<\/span>npx parcel<\/em>index.html\u201d. We can create different scripts for starting our project in Development and Production.<\/em><\/p>\n

package.json<\/strong><\/p>\n

In command. <\/span>in the script section write the following<\/strong><\/p>\n

<\/p>\n

<\/p>\n

To run these scripts, enter the following commands in the terminal,<\/span>To start:<\/p>\n

npm run start<\/p>\n

or<\/p>\n

npm start<\/p>\n

<\/p>\n

For Production Build:<\/p>\n

npm run build<\/p>\n

<\/p>\n

\ud83d\udca1<\/p>\n

If you\u2019re not sure how to start the project in a new the company then find these scripts in them. package.json <\/strong>and use<\/p>\n

<\/p>\n

Part-2<\/strong><\/p>\n

Revision of previous Episodes<\/p>\n

<\/p>\n

Part-3<\/strong><\/p>\n

<\/p>\n

Introducing JSX.<\/strong><\/h2>\n

<\/p>\n

App.js<\/strong><\/p>\n

Before we begin, we have to remove the existing React Code from <\/span>where we used React.createElement() <\/em>for displaying content<\/p>\n

on the webpage but its syntax is very bad. It\u2019s not developer- friendly, and very hard to read. To solve this problem Facebook developers built JSX.<\/p>\n

JSX makes developer life easy as we no longer have to write our code using React.createElement()<\/em><\/p>\n

<\/p>\n

\ud83d\udce2<\/p>\n

NOTE: We write code for both Machines and Humans but<\/p>\n

first for Human understanding as it is read by a lot of developers<\/p>\n

<\/p>\n

Q ) What is JSX?<\/em><\/strong><\/p>\n

JSX is HTML-like or XML-like syntax. JSX stands for JavaScript XML. It’s a syntax extension for JavaScript.<\/p>\n

It is not a part of React. React apps can be built even without JSX but the code will become very hard to read.<\/p>\n

It is not HTML inside JavaScript.<\/p>\n

JavaScript engine cannot understand JSX as it only understands ECMAScript<\/p>\n

<\/p>\n

<\/p>\n

<\/p>\n

<\/p>\n

<\/p>\n

<\/p>\n

When we log heading <\/em>and jsxHeading<\/em>, it gives the same object. From this point, we will not be using React.createElement()<\/em><\/p>\n

<\/p>\n

Introducing Babel<\/strong><\/h2>\n

Q ) Is JSX a valid JavaScript?<\/em><\/strong><\/p>\n

The answer is yes and no.<\/p>\n

JSX is not a valid Javascript syntax as it\u2019s not pure HTML or pure JavaScript for a browser to understand. JS does not have built-in JSX. The JS engine does not understand JSX because the JS engine understands ECMAScript or ES6+ code<\/span><\/p>\n

<\/p>\n

Q ) If the browser can\u2019t understand JSX how is it still working?<\/em><\/strong><\/p>\n

This is because of Parcel because \u201cParcel is a Beast\u201d.<\/em><\/p>\n

Before the code gets to JS Engine it is sent to Parcel and Transpiled <\/span>there. Then after transpilation, the browser gets the code that it can understand.<\/p>\n

<\/p>\n

Transpilation \u21d2 Converting the code in such a format that the browsers can understand.<\/span><\/p>\n

<\/p>\n

Parcel is like a manager who gives the responsibility of transpilation to a package called Babel<\/span>.<\/p>\n

Babel is a package that is a compiler\/transpiler of JavaScript that is already present inside \u2018node-modules<\/span>\u2019<\/span>. It takes JSX and converts it into the code that browsers understand, as soon as we write it and save the file. It is not created by Facebook.<\/p>\n

Learn more about Babel on <\/a>babeljs.io<\/a><\/p>\n

<\/p>\n

JSX (transpiled by Babel) \u21d2 React.createElement \u21d2 ReactElement<\/p>\n

\u21d2 JS Object \u21d2 HTML Element(render)<\/p>\n

<\/p>\n

Q ) What is the difference between HTML and JSX?<\/em><\/strong><\/p>\n