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

    Namaste React | Episode 4 | Talk is Cheap, Show me the Code!

    Updated: ReactJS 632 Comments5 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-3 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 what’s JSX.

    We explored what is transpilation and Babel.

    We got to know the difference between Class Based Components and Functional Components.

    We also explored the concept of bundlers.

    We learned what is component composition.

    Part-1

    In this episode, we will start actual coding by starting a new project. Our app is going to a Food Ordering App.

    Planning for the UI
    Before we start coding, plan things out. Planning will make things easier to understand. We should know exactly what to build:

    Name the App

    UI Structure

    JavaScript

    Copy

    Header

    – Logo

    – Nav Items

    Body

    – Search

    – Restaurant Container

    – Restaurant Card

    – Dish Name

    – Image

    – Restaurant Name

    – Rating

    – Cuisines

    – Time to Deliver

    Footer

    – Copyright

    – Links

    – Address

    – Contact

    ​

    Keep that as a reference and start coding the app.

    Let’s start coding!

    It is recommended that you code on your own but for some examples, we have mentioned some pieces for you along with the component name.

    Main components = AppLayout

    JavaScript

    Copy

    const AppLayout = () => {

    return (

    <div className=”app”>

    <Header/>

    <Body/>

    </div>

    )

    }

    ​

    Header Component

    JavaScript

    Copy

    const Header = () => {

    return(

    <div className=”header”>

    <div className=”logo-container”>

    <img className=”logo” src=”url” />

    </div>

    <div className=”nav-items”>

    <ul>

    <li>Home</li>

    <li>About Us</li>

    <li>Contact Us</li>

    <li>Cart</li>

    </ul>

    </div>

    </div>

    )

    }

    ​

    Inline Styling

    Writing the CSS along with the element in the same file. It is not recommended to use inline styling. So you should avoid writing it.

    JavaScript

    Copy

    <div

    className=”red-card”

    style={{ backgroundColor: “#f0f0f0” }}

    >

    <h3> Meghana Foods </h3>

    </div>

    ​

    In ‘style={{ backgroundColor: “#f0f0f0” }}’, first bracket is to tell that whatever is coming next will be JavaScript and the second bracket is for JavaScript object

    or you can store the CSS in a variable and then use it

    JavaScript

    Copy

    const styleCard = { backgroundColor: “#f0f0f0″ };

    <div

    className=”red-card”

    style={styleCard}

    >

    <h3> Meghana Foods </h3>

    </div>

    ​

    Part-2

    Introducing Props.

    Short form for properties. To dynamically send data to a component we use props. Passing a prop to a function is like passing an argument to a function.

    Passing Props to a Component

    Example,

    JavaScript

    Copy

    <RestaurantCard

    resName=”Meghana Foods”

    cuisine=”Biryani, North Indian”

    />

    ​

    ‘resName’ and ‘cuisine’ a props and this is prop passing to a component.

    Receiving props in the Component

    Props will be wrapped and send in Javascript object

    Example,

    JavaScript

    Copy

    const RestaurantCard = (props) => {

    return(

    <div>{props.resName}</div>

    )

    }

    ​

    Destructuring Props

    Example,

    JavaScript

    Copy

    const RestaurantCard = ({resName, cuisine}) => {

    return(

    <div>{resName}</div>

    )

    }

    ​

    Config Driven UI.

    It is a user Interface that is built and configured using a declaration configuration file or data structure, rather than being hardcoded.

    Config is the data coming from the api which keeps on changing according to different factors like user, location, etc.

    To add something in the elements of array

    Example, Adding “,” after every value

    JavaScript

    Copy

    resData.data.cuisine.join(“, “)

    ​

    Good Practices

    Destructuring props-

    Optional Chaining

    Example,

    JavaScript

    Copy

    const {name, avgRating, cuisine} = resData?.data;

    ​

    Repeating ourselves (repeating a piece of code again and again)-

    Dynamic Component listing using JS map() function to loop over an array and pass the data to component once instead of hard coding the same component with different props values

    Avoid ❌​

    JavaScript

    Copy

    <RestaurantCard

    resName=”Meghana Foods”

    />

    <RestaurantCard

    resName=”KFC”

    />

    <RestaurantCard

    resName=”McDonald’s”

    />

    <RestaurantCard

    resName=”Dominos”

    />

    ​

    Follow ✅​

    JavaScript

    Copy

    const resList = [

    {

    resName: “Meghana Foods”

    },

    {

    resName: “KFC”

    },

    {

    resName: “McDonald’s”

    },

    {

    resName: “Dominos”

    }

    ]

    const Body = () => {

    return(

    <div>

    {resList.map((restaurant) => (

    <RestaurantCard resData={restaurant} />

    ))}

    </div>

    )

    }

    ​

    Unique Key id while using map-

    Each item in the list must be uniquely identified

    Why?

    When we have components at same level and if a new component comes on the first without ID, DOM is going to re-render all the components again. As DOM can’t identify where to place it.

    But if we give each of them a unique ID then react knows where to put that component according to the ID. It is a good optimization and performance thing.

    Note* Never use index as keys in map. It is not recommended.

    JavaScript

    Copy

    const Body = () => {

    return(

    <div>

    {resList.map((restaurant) => (

    <RestaurantCard key={restaurant.id} resData={restaurant} />

    ))}

    </div>

    )

    }

    Keep Reading

    View 632 Comments

    632 Comments

    32. Jughead on

      I抣l right away grab your rss as I can not find your e-mail subscription link or newsletter service. Do you have any? Please let me know so that I could subscribe. Thanks.

      Reply
    106. Josephvow on

      phmacao com login [url=https://phmacao.life/#]phmacao com login[/url] Promotions are advertised through social media channels.

      Reply
    114. 3D Hoodie on

      Thanks on your marvelous posting! I definitely enjoyed reading it, you can be a great author. I will remember to bookmark your blog and will come back in the foreseeable future. I want to encourage you to continue your great work, have a nice day!

      Reply
    170. ice water hack on

      Shaw later apologized and has deleted her TikTok videos. In a tearful apology posted to her Instagram story, she said, “I did not mean anything in any kind of way. I am learning every day, as I think everybody is.”카지노사이트

      Reply
    287. Tang view Tiktok on

      Thank you for every other great article. Where else could anyone get that type of info in such an ideal method of writing? I’ve a presentation next week, and I’m on the look for such information.

      Reply
    288. Tang view Tiktok on

      I will immediately grab your rss as I can’t in finding your email subscription hyperlink oor e-newsletter service.Do you’ve any? Please allow me knopw in order that I may subscribe.Thanks.

      Reply
    599. Download Plinko Game on

      I live in London oxytrol patches side effects In a time before Smells Like Teen Spirit would command round-the-clock airplay on MTV and turn Nirvana into the world’s hottest band, Bleach showcased a much blunter approach

      Reply
    622. vw classic parts on

      Aw, this was a really good post. Finding the time and actual effort to make a really good article… but what can I say… I put things off a lot and never seem to get anything done.

      Reply
    625. vw classic parts on

      Hello There. I found your blog the usage of msn. That is an extremelysmartly written article. I will make sure to bookmark it and return to learn extraof your helpful information. Thanks for the post.I’ll certainly comeback.

      Reply
    Leave A Reply

    Demo

    Courses

    Community

    Contact Us