React props explained – example and use cases

At this time, React is widely known as a great tool for building interactive user interfaces. Reusable components are an integral feature of React.

Each component represents a small part of the website. Often times web apps have many elements of the same nature, but with different contents. Think of product cards on an ecommerce page for example. Product titles, pictures, descriptions are different, but they fit within the same ‘frame’ and structure.

React web applications are basically component trees. The parent component at the top, and its children components.

React components need to exchange information between each other. For example, a parent component might need to pass down data received from API to its children component. There are multiple ways to do this, but props (short for properties) are the simplest solution by far.

Props in React are simply JavaScript objects that can be passed to function and class components. These components can access information stored in the props object.

Changes to props automatically triggers re-render of all components that received this prop value.

For example, you might store input value in the state, then pass it down to children. You can define an event handler so React clears input value after submit. This happens because state and props have updated, which triggers rerender.

How to use props in React

There are multiple important rules for making use of props in React. First rule is that props are immutable. A parent passes down certain props object to its child components. Child components can not change contents of that object. They can only get values from it.

Props in React can be passed down from parent to child components. This is necessary to keep things simple. All data comes from the parent component. This is called ‘single source of truth’ in React. Read up for useful insights about implementing dynamic features in React.

JSX is a templating language in React. In JSX, props look like custom attributes. For example, id is a normal attribute in HTML. You can set props the exact same way you’d set an id. Simply specify name of the prop, for example color and then set its value. It can be a normal value (number, string) or a reference to a variable that contains necessary values. Let’s look at an example:

Let’s say we have an object person:

const person = { name: ‘George’, last: ‘Smith’, occupation: ‘driver’, friends: [John, Jay, Barry]

You could pass down the reference to this object to a component. For the sake of simplicity, this might be a component that displays a list item for each person.

<Listing details={person}> </Listing>

Disadvantages of using props

Props are a great way to pass data from parent components to children. Props are passed down one level at a time. For example, if a component tree is made up of five different levels, it’s really difficult to use props to pass down values from parent to its grandchildren. React has a solution for that as well. You can use Context API to easily pass props from one component to another.

Props with map()

As you may know, you can use the map() method to dynamically create components for each item in the array. You can pass down the data from each array item to these components.


Beginning front-end career – common mistakes and my experience

I decided to write this post because a lot of people ask me how I got my start in front-end development. It was definitely a struggle, and maybe my mistakes and experience can help someone get a job without as much hassle.

How I got the offer

I started learning HTML, CSS and JavaScript about 2 years ago. After 3 months, I started learning React and I really liked it.

I started applying for jobs about one year ago. I wasn’t successful because I didn’t have much to show for. I looked for front-end development agencies and offered them my free help as an intern. Eventually, this plan worked and I even got a job as a junior developer at the development firm. Unfortunately I’m not with them now, but starting with them was the boost I needed to get my career started.

What I wish I had done (mistakes)

Put more emphasis on portfolio

My biggest mistake as a self-taught web developer was that I didn’t put enough effort into my portfolio. When you have nothing to show for – no job experience, no degree, no contributions to open-source projects – portfolio is all that you have.

You need to make it count, so build at least three or four solid single page applications in React. Make sure to showcase your HTML and CSS skills as well, those can be just as important as React.

Master my basics

When I first started looking for a job as a React developer, I thought I had a fairly good grasp of the library. Interviewing for jobs made me realize how much I didn’t know. My suggestion to readers would be to search front-end developer interview questions and work on them. You’ll discover a lot that you don’t know.

Just make sure you know how React works inside and out. Concepts like virtual DOM, controlled components, are very important. Check out websites like SimpleFrontEnd to learn important React features.

Not knowing TypeScript

One of my biggest mistakes was that I didn’t know TypeScript, which is absolutely necessary to write React web applications on a large scale. Most companies as well as web development agencies use TypeScript to make their code easier to maintain.

Since it’s just a superset of JavaScript, TS is not that difficult to learn. Dedicate few weeks to learning TypeScript and you’ll greatly improve your chances of landing a job.

Having high expectations

When I first started looking for jobs, I had high expectations for a junior-level React developer job. Then I learned that I didn’t know as much as I thought, and my value as an inexperienced React developer was not that high. This led me to change my approach and I offered my services for free. Combined with improved knowledge and more impressive library, I was quickly hired and eventually transitioned to a full-time job as a front-end developer.

Things that I did right

There are some areas where I did right. I was ambitious and curious enough to grow past my junior role and look for more responsibility within the company. Right now I work at a different company at a middle level web developer. I attribute all this to the fact that I was hungry for learning and didn’t mind hard work to understand foreign concepts.

I believe I also benefited from actually building applications and implementing certain features. For example, how to use map() to generate new components when you iterate over an array of objects in React.

I still continue to learn and hope to reach new career heights as a front-end web developer.



Is ‘never give up’ a good advice? my opinion and experience

‘Never give up’ is probably one of the most common pieces of advice we hear on internet. On surface, it appears true, but I feel like it needs nuance. As it stands, the advice is very wrong. I think most of the time giving up is the right thing to do. You can’t be doing thousand things at once. If you never gave up, you’d only do one thing all your life. The fun is giving up on something, and trying a different thing for a change. If you disagree, please let me know in comments.

I understand the meaning when people say ‘never give up’. All good things take time and persistence. You should stay on the road to your goal, as long as you think that road could get you there. You shouldn’t be looking for guarantees that you’ll get there, but at least some chance. If you need to go north, but the road turns around and takes you south, give up. Start over. Try a different road. I feel like sometimes advice like ‘never give up’ stops people from being self aware, analyzing their choices and adjusting for a better approach.

For example, Rovio is a Finnish company that makes famous games like Angry Bird. You may not know that Angry Bird was their 52nd game. Before that, they built many games that had little success. I wouldn’t recommend them to give up on making games altogether, because it’s a creative process, and if you want to be a successful game developer, some of your initial games are going to fail. Most of the time people don’t come up with big hits straight away. They learn and adapt.

They stayed on track, and did become one of the largest game developers in the world. They have hundreds of employees and millions of dollars in yearly revenue.

Let’s discuss another example of late success – Steve Jobs at Apple. There’s a lot of talk about his genius, but I would argue that he became a visionary after getting fired. Failure of initial Mac and getting fired was his opportunity for self reflection to correct his path. He did, and after coming back to Apple, he launched one successful product line after another. Also, in the meantime, he founded Pixar. For me, Pixar is as big of Jobs’ legacy as his pioneering of personal computers and smartphones.

Jobs himself admitted that getting fired was ultimately a good thing. The fact is that young Jobs was brash, too focused on vision and didn’t understand real-world constraints. Jobs who came back to Apple was a much better manager and businessmen, and results followed.

With this blog, I wanted to share my thoughts on success and the factor of giving up. I feel like this question does not have such a simple answer, and wanted to contribute my 2 cents to the conversation. I hope everyone reading this post achieves some success.