{"id":4489,"date":"2024-05-14T20:13:00","date_gmt":"2024-05-14T14:43:00","guid":{"rendered":"https:\/\/preprod.namastedev.com\/blog\/2024\/05\/14\/talk-is-cheap-show-me-the-code-namaste-react\/"},"modified":"2024-05-14T20:16:16","modified_gmt":"2024-05-14T14:46:16","slug":"talk-is-cheap-show-me-the-code-namaste-react","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/talk-is-cheap-show-me-the-code-namaste-react\/","title":{"rendered":"Namaste React | Episode 4 | Talk is Cheap, Show me the Code!"},"content":{"rendered":"

Please make sure to follow along with the whole \u201dNamaste React” <\/em>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.<\/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-3 first. Understanding what \u201dAkshay\u201d<\/em> shares in the video will make these notes way easier to understand.<\/p>\n

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

We learned what\u2019s JSX.<\/p><\/blockquote>\n

We explored what is transpilation and Babel.<\/p><\/blockquote>\n

We got to know the difference between Class Based Components and Functional Components.<\/p><\/blockquote>\n

We also explored the concept of bundlers.<\/p><\/blockquote>\n

We learned what is component composition.<\/p><\/blockquote>\n

Part-1<\/h2>\n

In this episode, we will start actual coding by starting a new project. Our app is going to a Food Ordering App.<\/p>\n

Planning for the UI
\nBefore we start coding, plan things out. Planning will make things easier to understand. We should know exactly what to build:<\/p>\n

Name the App<\/p>\n

UI Structure<\/p>\n

JavaScript<\/p>\n

Copy<\/p>\n

Header<\/p>\n

–<\/span> Logo<\/p>\n

–<\/span> Nav Items<\/p>\n

Body<\/p>\n

–<\/span> Search<\/p>\n

–<\/span> Restaurant Container<\/p>\n

–<\/span> Restaurant Card<\/p>\n

–<\/span> Dish Name<\/p>\n

–<\/span> Image<\/p>\n

–<\/span> Restaurant Name<\/p>\n

–<\/span> Rating<\/p>\n

–<\/span> Cuisines<\/p>\n

–<\/span> Time to Deliver<\/p>\n

Footer<\/p>\n

–<\/span> Copyright<\/p>\n

–<\/span> Links<\/p>\n

–<\/span> Address<\/p>\n

–<\/span> Contact<\/p>\n

\u200b<\/p>\n

Keep that as a reference and start coding the app.<\/p>\n

Let\u2019s start coding!<\/p>\n

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.<\/p>\n

Main components = AppLayout<\/p>\n

JavaScript<\/p>\n

Copy<\/p>\n

const AppLayout =<\/span> () =><\/span> {<\/p>\n

return (<\/p>\n

<div className=”app”><\/p>\n

<Header\/><\/p>\n

<Body\/><\/p>\n

<\/div><\/p>\n

)<\/p>\n

}<\/p>\n

\u200b<\/p>\n

Header Component<\/p>\n

JavaScript<\/p>\n

Copy<\/p>\n

const Header =<\/span> () =><\/span> {<\/p>\n

return(<\/p>\n

<div className=”header”><\/p>\n

<div className=”logo-container”><\/p>\n

<img className=”logo” src=”url” \/><\/p>\n

<\/div><\/p>\n

<div className=”nav-items”><\/p>\n

<ul><\/p>\n

<li>Home<\/li><\/p>\n

<li>About Us<\/li><\/p>\n

<li>Contact Us<\/li><\/p>\n

<li>Cart<\/li><\/p>\n

<\/ul><\/p>\n

<\/div><\/p>\n

<\/div><\/p>\n

)<\/p>\n

}<\/p>\n

\u200b<\/p>\n

Inline Styling<\/p>\n

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.<\/p>\n

JavaScript<\/p>\n

Copy<\/p>\n

<div<\/p>\n

className=”red-card”<\/p>\n

style={{ backgroundColor:<\/span> “#f0f0f0” }}<\/p>\n

><\/p>\n

<h3> Meghana Foods <\/h3><\/p>\n

<\/div><\/p>\n

\u200b<\/p>\n

In \u2018style={{ backgroundColor: “#f0f0f0” }}<\/em>\u2019, first bracket is to tell that whatever is coming next will be JavaScript and the second bracket is for JavaScript object<\/p>\n

or you can store the CSS in a variable and then use it<\/p>\n

JavaScript<\/p>\n

Copy<\/p>\n

const styleCard =<\/span> { backgroundColor:<\/span> “#f0f0f0″ };<\/p>\n

<div<\/p>\n

className=”red-card”<\/p>\n

style={styleCard}<\/p>\n

><\/p>\n

<h3> Meghana Foods <\/h3><\/p>\n

<\/div><\/p>\n

\u200b<\/p>\n

Part-2<\/h2>\n

Introducing Props.<\/span><\/h2>\n

<\/h2>\n

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.<\/p>\n

Passing Props to a Component<\/p>\n

Example,<\/p>\n

JavaScript<\/p>\n

Copy<\/p>\n

<RestaurantCard<\/p>\n

resName=”Meghana Foods”<\/p>\n

cuisine=”Biryani, North Indian”<\/p>\n

\/><\/p>\n

\u200b<\/p>\n

\u2018resName<\/em>\u2019 and \u2018cuisine\u2019 <\/em>a props and this is prop passing to a component.<\/p>\n

Receiving props in the Component<\/p>\n

Props will be wrapped and send in Javascript object<\/p>\n

Example,<\/p>\n

JavaScript<\/p>\n

Copy<\/p>\n

const RestaurantCard =<\/span> (props) =><\/span> {<\/p>\n

return(<\/p>\n

<div>{props.resName}<\/div><\/p>\n

)<\/p>\n

}<\/p>\n

\u200b<\/p>\n

Destructuring Props<\/p>\n

Example,<\/p>\n

JavaScript<\/p>\n

Copy<\/p>\n

const RestaurantCard =<\/span> ({resName, cuisine}) =><\/span> {<\/p>\n

return(<\/p>\n

<div>{resName}<\/div><\/p>\n

)<\/p>\n

}<\/p>\n

\u200b<\/p>\n

Config Driven UI.<\/span><\/h2>\n

It is a user Interface that is built and configured using a declaration configuration file or data structure, rather than being hardcoded.<\/p>\n

Config is the data coming from the api which keeps on changing according to different factors like user, location, etc.<\/p>\n

To add something in the elements of array<\/p>\n

Example, Adding \u201c,\u201d after every value<\/p>\n

JavaScript<\/p>\n

Copy<\/p>\n

resData.data.cuisine.join(“, “)<\/p>\n

\u200b<\/p>\n

Good Practices<\/p>\n

Destructuring props-<\/span><\/p>\n

Optional Chaining<\/p>\n

Example,<\/p>\n

JavaScript<\/p>\n

Copy<\/p>\n

const {name, avgRating, cuisine} =<\/span> resData?.<\/span>data;<\/p>\n

\u200b<\/p>\n

Repeating ourselves (repeating a piece of code again and again)-<\/span><\/p>\n

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<\/p>\n

Avoid \"\u274c\"<\/span>\u200b<\/p>\n

JavaScript<\/p>\n

Copy<\/p>\n

<RestaurantCard<\/p>\n

resName=”Meghana Foods”<\/p>\n

\/><\/p>\n

<RestaurantCard<\/p>\n

resName=”KFC”<\/p>\n

\/><\/p>\n

<RestaurantCard<\/p>\n

resName=”McDonald’s”<\/p>\n

\/><\/p>\n

<RestaurantCard<\/p>\n

resName=”Dominos”<\/p>\n

\/><\/p>\n

\u200b<\/p>\n

Follow \"\u2705\"<\/span>\u200b<\/p>\n

JavaScript<\/p>\n

Copy<\/p>\n

const resList =<\/span> [<\/p>\n

{<\/p>\n

resName:<\/span> “Meghana Foods”<\/p>\n

},<\/p>\n

{<\/p>\n

resName:<\/span> “KFC”<\/p>\n

},<\/p>\n

{<\/p>\n

resName:<\/span> “McDonald’s”<\/p>\n

},<\/p>\n

{<\/p>\n

resName:<\/span> “Dominos”<\/p>\n

}<\/p>\n

]<\/p>\n

const Body =<\/span> () =><\/span> {<\/p>\n

return(<\/p>\n

<div><\/p>\n

{resList.map((restaurant) =><\/span> (<\/p>\n

<RestaurantCard resData={restaurant} \/><\/p>\n

))}<\/p>\n

<\/div><\/p>\n

)<\/p>\n

}<\/p>\n

\u200b<\/p>\n

Unique Key id while using map-<\/span><\/p>\n

Each item in the list must be uniquely identified<\/p>\n

Why?<\/p>\n

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\u2019t identify where to place it.<\/p>\n

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.<\/p>\n

Note* Never use index as keys in map. It is not recommended.<\/p>\n

JavaScript<\/p>\n

Copy<\/p>\n

const Body =<\/span> () =><\/span> {<\/p>\n

return(<\/p>\n

<div><\/p>\n

{resList.map((restaurant) =><\/span> (<\/p>\n

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

))}<\/p>\n

<\/div><\/p>\n

)<\/p>\n

}<\/p>\n","protected":false},"excerpt":{"rendered":"

Please make sure to follow along with the whole \u201dNamaste 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<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[170],"tags":[224,223],"class_list":["post-4489","post","type-post","status-publish","format-standard","category-reactjs","tag-react","tag-reactjs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=4489"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4489\/revisions"}],"predecessor-version":[{"id":4495,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4489\/revisions\/4495"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=4489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=4489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=4489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}