Close Menu
    Explore the coolest frontend learning platform !
    Visit NamasteDev
    Friday, March 14

    Namaste React | Episode 2 | Laying the Foundation!

    Updated: ReactJS 566 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 566 Comments

    566 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
    Leave A Reply

    Demo

    Courses

    Community

    Contact Us