Close Menu
    Explore the coolest frontend learning platform !
    Visit NamasteDev
    Tuesday, May 13

    Namaste React | Episode 2 | Laying the Foundation!

    Updated: ReactJS 1,375 Comments6 Mins ReadakshayBy

    💡

    Please make sure to follow along with the whole ”Namaste React” 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

    you a comprehensive understanding of React development.

    💡

    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 first. Understanding what ”Akshay” shares in the video will make

    these notes way easier to understand.

    So far, here’s what we’ve learned in the previous episode

    We learned that npm is anything but not node package manager and what is npx.

    We included node-modules and React in our project.

    We got to know the difference between package.json and package-lock.json.

    We also explored the concept of bundlers. We learned how to start our app.

    Don’t forget “Parcel is a Beast”.

    Part-1

    Q ) What is another way of starting the build of the project?

    We will be creating scripts instead of using “npx parcelindex.html”. We can create different scripts for starting our project in Development and Production.

    package.json

    In command. in the script section write the following

    To run these scripts, enter the following commands in the terminal,To start:

    npm run start

    or

    npm start

    For Production Build:

    npm run build

    💡

    If you’re not sure how to start the project in a new the company then find these scripts in them. package.json and use

    Part-2

    Revision of previous Episodes

    Part-3

    Introducing JSX.

    App.js

    Before we begin, we have to remove the existing React Code from where we used React.createElement() for displaying content

    on the webpage but its syntax is very bad. It’s not developer- friendly, and very hard to read. To solve this problem Facebook developers built JSX.

    JSX makes developer life easy as we no longer have to write our code using React.createElement()

    📢

    NOTE: We write code for both Machines and Humans but

    first for Human understanding as it is read by a lot of developers

    Q ) What is JSX?

    JSX is HTML-like or XML-like syntax. JSX stands for JavaScript XML. It’s a syntax extension for JavaScript.

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

    It is not HTML inside JavaScript.

    JavaScript engine cannot understand JSX as it only understands ECMAScript

    When we log heading and jsxHeading, it gives the same object. From this point, we will not be using React.createElement()

    Introducing Babel

    Q ) Is JSX a valid JavaScript?

    The answer is yes and no.

    JSX is not a valid Javascript syntax as it’s 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

    Q ) If the browser can’t understand JSX how is it still working?

    This is because of Parcel because “Parcel is a Beast”.

    Before the code gets to JS Engine it is sent to Parcel and Transpiled there. Then after transpilation, the browser gets the code that it can understand.

    Transpilation ⇒ Converting the code in such a format that the browsers can understand.

    Parcel is like a manager who gives the responsibility of transpilation to a package called Babel.

    Babel is a package that is a compiler/transpiler of JavaScript that is already present inside ‘node-modules’. 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.

    Learn more about Babel on babeljs.io

    JSX (transpiled by Babel) ⇒ React.createElement ⇒ ReactElement

    ⇒ JS Object ⇒ HTML Element(render)

    Q ) What is the difference between HTML and JSX?

    • JSX is not HTML. It’s HTML-like syntax.
    • HTML uses ‘class’ property whereas JSX uses ‘className’ property
    • HTML can use hypens in property names whereas JSX uses camelCase syntax.
    • Single Line and Multi Line JSX Code

    Single line code:

    const jsxHeading =

    <h1>Namaste React</h1>

    Multi-line code:

    If writing JSX in multiple lines then using ‘()’ parenthesis is mandatory. To tell Babel from where JSX is starting and ending.

    const jsxHeading =

    (

    <div>

    <h1>Namaste React</h1>

    </div>

    )

    📢

    NOTE:

    1. Use “Prettier – Code Formatter” VS Code Extension to make your code look beautiful with proper formatting
    2. Use “ES lint” VS Code Extension for linting
    3. Use “Better Comments” VS Code Extension to beautify your comments

    Code all of these things discussed until now for better understanding.

    Part-4

    Introducing React Components

    Everything inside React is a component.

    Q ) What are Components?

    There are 2 types of components:

    1. Class-based Components – Old way of writing code, used rarely in industry
    2. Functional Components – New way of writing code, most commonly used

    Q ) What is a React Functional Components?

    It is just a JavaScript Function that returns some JSX or a react element.

    Always name React Functional Component with Capital Letters otherwise you will confuse it with normal function

    // All are the same for single-line code const HeadingComponent1 () => (

    <h1>Namaste</h1>

    )

    const HeadingComponent2 () => { return <h1>Namaste</h1>

    }

    const HeadingComponent3

    () => <h1>Namaste</h1>

    To render a functional component we call them ‘<Heading1 />’. This is the syntax that Babel understands.

    You can also call them using these ways, ‘<Title></Title>’

    or ‘{Title()}’

    Components Composition

    A component inside a component.

    Calling a component inside another component is Component Composition.

    const Title

    () => <h1>Namaste React</h1>

    const HeadingComponent = () => (

    <div id=“container”>

    <Title />

    </div>

    )

    Code inside the ‘Title’ component will be used inside the ‘HeadingComponent’ component as the ‘Title’ component is called inside it. It will become something like this,

    const HeadingComponent = () => (

    <div id=“container”>

    <h1>Namaste React</h1>

    </div>

    )

    Part-5

    Q ) How to use JavaScript code inside JSX?

    Inside a React Component when ‘{}’ parenthesis is present we can write any JavaScript expression inside it.

    const number = 10000;

    const HeadingComponent = () => (

    <div id=“containter”>

    {number}

    <h1>Namaste React</h1>

    </div>

    )

    Q ) How to call React Element in JSX?

    We can use ‘{}’ parenthesis.

    const elem = <span> React Element </span>

    const HeadingComponent = () => (

    <div id=“containter”>

    {elem}

    <h1>This is Namaste React</h1>

    </div>

    )

    Q ) What will happen if we call 2 elements inside each other?

    If we put 2 components inside each other, then it will go into an infinite loop and the stack will overflow. It will freeze your browser, so it’s not recommended to do so.

    Advantages of using JSX.

    1. Sanitizes the data
    2. If someone gets access to your JS code and sends some malicious data which will then get displayed on the screen, that attack is called cross-site scripting.
    3. It can read cookies, local storage, session storage, get cookies, get info about your device, and read data. JSx takes care of your data.
    4. If some API passes some malicious data JSX will escape it. It prevents cross-site scripting and sanitizes the data before rendering
    5. Makes code readable
    6. JSX makes it easier to write code as we are no longer creating elements using React.createElement()
    8. Makes code simple and elegant
    9. Show more useful errors and warnings
    10. JSX prevents code injections (attacks)

    Keep Reading

    View 1,375 Comments

    1,375 Comments

    2. lasix medscape on

      Some drugs that could be affected by pot use include the blood thinner warfarin, the breast cancer drug tamoxifen, and painkillers like acetaminophen Tylenol or ibuprofen Motrin, said Lazarus and Ed Bednarczyk, a clinical associate professor of pharmacy practice at the University at Buffalo, in New York lasix 80 mg twice a day

      Reply
    5. xxx bokep on

      I’m truly enjoying the design and layout of your blog. It’s a very easy on the eyes which makes itmuch more pleasant for me to come here and visit more often. Did you hire out a designer tocreate your theme? Excellent work!

      Reply
    17. wengtoto on

      I do not even know the way I finished up right here, however I thought this publishwas once great. I do not understand who you might be however certainly youare going to a well-known blogger should you are not already.Cheers!

      Reply
    20. cara mengaktifkan tiktok shop on

      Having read this I thought it was extremely enlightening. I appreciate you finding the time and energy to put pasaran togel online resmi this article together. I once again find myself spending way too much time both reading and leaving comments

      Reply
    128. 印傳單 on

      What’s Happening i am new to this, I stumbled upon this I’ve found It positively helpful and it has aided me out loads. I hope to contribute & aid other users like its helped me. Good job.

      Reply
    268. bleomicina precio on

      Hi there! This post could not be written any better!Reading this post reminds me of my good old room mate!He always kept talking about this. I will forward this post to him.Pretty sure he will have a good read. Many thanksfor sharing!

      Reply
    269. Tang like Facebook on

      Hey! I just wanted to ask if you ever have any trouble with hackers? My last blog (wordpress) was hacked and I ended up losing months of hard work due to no backup. Do you have any solutions to protect against hackers?

      Reply
    281. visit website on

      Pretty section of content. I just stumbled upon your blog and in accession capital to assert thatI acquire actually enjoyed account your blog posts. Anyway I’ll be subscribing to your augment and even I achievement you access consistently quickly.

      Reply
    386. to learn more on

      “A motivating discussion is worth comment. I do believe that you should publish more about this subject matter, it may not be a taboo matter but usually folks don’t discuss such topics. To the next! Kind regards!!”נערות ליווי בלוד

      Reply
    410. pelech pre psa xxl on

      You can definitely see your enthusiasm within the workyou write. The sector hopes for even more passionate writers such as you who aren’t afraidto say how they believe. Always follow your heart.

      Reply
    525. bo dam on

      Usually I do not read article on blogs, but I wish to say that this write-upvery compelled me to try and do so! Your writing style has been amazed me.Thank you, quite great article.

      Reply
    526. hioki indonesia on

      I do agree with all of the concepts you have presented for your post.They’re very convincing and will definitely work.Nonetheless, the posts are too short for beginners.May you please prolong them a little from next time?Thanks for the post.

      Reply
    527. visit website on

      When I originally commented I clicked the „Notify me when new comments are added” checkbox and now each time a comment is added I get four emails with the same comment. Is there any way you can remove people from that service? Many thanks!

      Reply
    539. ao bong da chinh hang on

      Hello There. I found your blog using msn. Thisis a very well written article. I will be sureto bookmark it and come back to read more of your useful info.Thanks for the post. I’ll certainly return.

      Reply
    540. khoa hoc gia re on

      I do agree with all of the ideas you have presented in your post. They’re really convincing and will definitely work. Still, the posts are too short for newbies. Could you please extend them a bit from next time? Thanks for the post.

      Reply
    564. for more details on

      Thông Tin, Sự Kiện Liên Quan Tiền Đến Trực Tiếp Soccer Nữ truc tiep bong da nha caiĐội tuyển chọn nước Việt Nam chỉ cần thiết một kết trái hòa có bàn thắng để lần loại hai góp mặt trên World Cup futsal. Nhưng, nhằm làm được điều này

      Reply
    575. link tran on

      Hello there! Do you know if they make any plugins to protect against hackers? I’m kinda paranoid about losing everything I’ve worked hard on. Any recommendations?

      Reply
    585. CharlesVaf on

      canadian pharmacy 365 [url=https://canadianpharmacyaapd.shop/#]online canadian pharmacy[/url] canadian pharmacy sarasota

      Reply
    598. CharlesVaf on

      indian pharmacy [url=http://indianpharmacyabp.com/#]Indian pharmacy international shipping[/url] Best online Indian pharmacy

      Reply
    615. Jessevox on

      Игровые автоматы Ballon ждут СЃРІРѕРёС… героев.: balloon game – balloon казино

      Reply
    617. Josephtex on

      Игровые автоматы делают вечер незабываемым.: balloon игра – balloon game

      Reply
    621. app para envio masivo de whatsapp on

      Hello there, just became aware of your blog through Google, and foundthat it’s truly informative. I’m going to watch out for brussels.I will appreciate if you continue this in future. Numerous people will bebenefited from your writing. Cheers!

      Reply
    622. https://t.co/AEhOSpg2HM on

      An interesting discussion is worth comment. There’s no doubt that that you need to publish more on this topic, it might not be a taboo subject but usually people don’t discuss such subjects. To the next! Kind regards!

      Reply
    624. https://t.co/6YrAZI70Gq on

      An fascinating discussion is worth comment. I think that you must write more on this matter, it may not be a taboo subject however generally people are not sufficient to speak on such topics. To the next. Cheers

      Reply
    627. Jessevox on

      Каждый СЃРїРёРЅ может стать выигрышным!: balloon game – balloon казино демо

      Reply
    634. Martyhap on

      Обнаружьте новые стратегии РЅР° автомате Ballon.: balloon казино – balloon казино демо

      Reply
    639. Josephtex on

      Игровые автоматы делают вечер незабываемым.: balloon казино – balloon казино официальный сайт

      Reply
    647. Jessevox on

      Присоединяйтесь Рє игрокам РЅР° автоматах.: balloon игра – balloon казино демо

      Reply
    659. Nha hang Nhat on

      Great post. I used to be checking continuously this blog and Iam inspired! Very helpful info specifically the remaining part 🙂 I handle such info a lot.I was seeking this certain info for a long time.Thank you and good luck.

      Reply
    730. for more details on

      When I initially commented I clicked the “Notify me when new comments are added” checkbox andnow each time a comment is added I get four emails with the same comment.Is there any way you can remove people from thatservice? Many thanks!

      Reply
    1019. more details on

      Thanks on your marvelous posting! I really enjoyed reading it, you can be a great author.Iwill make sure to bookmark your blog and will often come back later on. I want to encourage you continue your great writing, have a niceholiday weekend!

      Reply
    1065. xe may 50cc on

      An interesting discussion is worth comment. I think that you should publish more on this subject matter, it may not be a taboo subject but generally people don’t discuss these subjects. To the next! All the best!!

      Reply
    1137. 999bet on

      I get pleasure from, lead to I discovered just what I was havinga look for. You have ended my 4 day long hunt!God Bless you man. Have a great day. Bye

      Reply
    1170. https://koreanviagra.kr/ on

      We are looking for some people that might be interested in from working their home on a part-time basis. If you want to earn $200 a day, and you don’t mind developing some short opinions up, this might be perfect opportunity for you!

      Reply
    1172. in banner nha trang on

      Thanks for another informative blog. Where else could I get that kind of information written in such an ideal approach?I’ve a venture that I’m just now operating on, and I’ve been at thelook out for such info.

      Reply
    1175. Thiet ke Fanpage on

      Aw, this was an incredibly good post. Taking the time and actual effort to produce a very good articleÖ but what can I sayÖ I procrastinate a lot and never manage to get nearly anything done.

      Reply
    1208. sex cams on

      Aw, this was an incredibly nice post. Taking a few minutes and actual effort to create a really good article… but what can I say… I procrastinate a whole lot and don’t seem to get anything done.

      Reply
    1238. Richardwoubs on

      вавада официальный сайт [url=http://vavadavhod.tech/#]вавада официальный сайт[/url] vavada

      Reply
    1240. Richardwoubs on

      вавада казино [url=http://vavadavhod.tech/#]вавада[/url] вавада официальный сайт

      Reply
    1242. cong to dien on

      Hello my friend! I wish to say that this article is awesome, nice written and come with approximately all vital infos. I would like to look more posts like this .

      Reply
    1247. Richardwoubs on

      пин ап казино официальный сайт [url=http://pinuprus.pro/#]пин ап казино[/url] пинап казино

      Reply
    1255. Richardwoubs on

      вавада официальный сайт [url=https://vavadavhod.tech/#]вавада официальный сайт[/url] вавада официальный сайт

      Reply
    1257. koitoto on

      Oh my goodness! Awesome article dude! Many thanks, However I am encountering troubles with your RSS. I donít know why I am unable to join it. Is there anybody having the same RSS issues? Anyone who knows the solution will you kindly respond? Thanx!!

      Reply
    1270. F168 on

      I like what you guys are up too. This type of clever work and coverage!Keep up the amazing works guys I’ve included you guys tomy own blogroll.

      Reply
    1279. F168 on

      This is a great tip particularly to those fresh to the blogosphere. Short but very accurate info… Thanks for sharing this one. A must read article!

      Reply
    1323. jeakany on

      Happy to explore discussions, exchange ideas, and gain fresh perspectives throughout the journey.
      I like understanding different opinions and sharing my input when it’s helpful. Interested in hearing fresh thoughts and meeting like-minded people.
      That’s my website-https://automisto24.com.ua/

      Reply
    1324. AG 官网 on

      hi!,I like your writing so a lot! share we keep in touch extra approximately your article on AOL? I need an expert in this space to unravel my problem. May be that’s you! Having a look ahead to peer you.

      Reply
    1333. Lorenzocluts on

      modafinil 2025 [url=http://modafinilmd.store/#]purchase Modafinil without prescription[/url] purchase Modafinil without prescription

      Reply
    1335. Lorenzocluts on

      legal Modafinil purchase [url=http://modafinilmd.store/#]modafinil legality[/url] modafinil pharmacy

      Reply
    1338. Lorenzocluts on

      order Cialis online no prescription [url=https://zipgenericmd.com/#]reliable online pharmacy Cialis[/url] discreet shipping ED pills

      Reply
    1347. E2BET on

      I wanted to thank you for this very good read!! I certainly loved every bit of it. I have got you saved as a favorite to look at new stuff you postÖ

      Reply
    1367. MatthewLab on

      medicine prednisone 10mg [url=http://prednihealth.com/#]PredniHealth[/url] prednisone 10mg tablets

      Reply
    1375. prodaja satova on

      An intriguing discussion is worth comment. I do think that you ought to publish more on this issue, it may not be a taboo subject but typically folks don’t discuss such subjects. To the next! Many thanks!!

      Reply
    Leave A Reply

    Demo

    Courses

    Community

    Contact Us