Monthly Archives: June 2024

My 2 cents on starting a career in tech

Starting a career in tech is a wise decision, but it is associated with many challenges. For once, it’s really difficult to decide on a specialty within tech. There are so many professions – from data scientist to front-end developer, and they are all different in their own ways. Also, as a beginner who’s interested in tech, it’s difficult to predict which path will be the most interesting.
Transitioning from one career to another is very common in the field of tech. In this article, we will discuss various different paths, their advantages and disadvantages. Let’s get started.

UI/UX Design

These professionals make sure that websites are easy and intuitive to use for website users. UI is short for user interfaces, in other words website structure and elements of it. UX is short for user experience. In other words, how users interact with a web application.

Someone working in the field of UI/UX design must have a good eye for design and making sure that websites are convenient. Person working in this position will be tasked with prototyping and creating mockups of the web application.

Knowing design tools like Adobe Photoshop and hard technical skills like HTML and CSS can go a long way. There are also wireframing and prototyping tools which you need to know.

Frontend development

This is a more technical field than UI/UX design. In this role, you will have to build website interfaces. In other words, define basic functions and appearance of a website.

This career path does not require you to have strong design skills. You need to have a strong proficiency in JavaScript. Also, strong knowledge in CSS and HTML is mandatory.

Best thing is, you can start with basic knowledge. Junior React developers only need to know basics, like how to handle onchange in React.

Backend development

This is the most technical specialization of those listed here. It involves creating algorithms and other basic code which will be the ‘brains’ of web and native applications. In this role, you might have to create an API or even maintain databases. API will process requests from other devices, do calculations and provide an answer.

Go for this role if you like maths, writing algorithms, and processing data.

Cybersecurity

These days companies collect large volumes of data. Cybersecurity professionals are people tasked with protecting that data. Also you will need to ensure that applications continue running and are not turned off by cyber attacks.

A typical tasks for cybersecurity professional is to test, analyze and develop protection against possible attacks. Sometimes individuals in this role even have to play a role of a hacker to try breaking down defenses of a website or an online service. This is done to detect possible gaps in the defense and then working to fill those gaps.

Graphic design

This career is not very technical. It is only on this list because it involves the use of advanced software. Go for this role if you’re good with computers but also love art and drawing yourself. Graphic designers create beautiful visuals to highlight the brand and for marketing campaigns.

 

Concepts you need to know to build a basic React app

In my opinion, learning new front-end framework gets easier once you can start building basic apps with it. However, you still need to learn a library like React to build something with it. Most important is to learn design patterns to lay the correct foundation for your app.

Design Patterns in React

React shares a lot of similarities with other front-end frameworks Angular and Vue, but it also has unique features that make it the most popular library in the world.

The idea behind React is to reuse component to speed up the development process. But that doesn’t mean simply defining a static component and sticking it in different places. That wouldn’t be very useful. React components are dynamic, they receive data via props. So you can customize React components’ content, appearance, and even functionality.

Composition

Many React components can also be customized via composition. That means using various React features (like children prop) to add custom features to otherwise generic bits of UI.

There are other design patterns that frequently come up when building apps in React. Understanding what’s happening – and why we do certain things the way we do them – will be helpful in gaining deeper understanding of React. You will also find it easier to read others code and suggest improvements to make the code simpler and most importantly, free of errors.

Parent-child component relationship

First is to understand how components relate to one another. React apps are essentially component trees, with one parent component at the top. Some child components have child components of their own, so a component can be both a parent and child component.

Only few components can maintain internal data about the app. For example – should the application be in ‘active’ state? Or should you enable the dark mode? React recommends to store this kind of information in the parent component, often called ‘single source of truth’. This practice is necessary to ensure consistency of data.

Conditional rendering

Another common pattern is conditional rendering. Templating language of React allows you to embed ternary operator inside the structure of your component. You can use these expressions to set a condition to render a component, and also specify what needs to be rendered if the condition is false. Sometimes you will also use nested ternary operators in React. They’re used to check multiple conditions.

Conditional rendering allows you to conditionally contents of the page. For example, you can customize the error message the user sees according to their actions. Or you can customize what the user sees depending on his authentication status. Render a dashboard to a user who’s authenticated, and render a welcome page to guest users. Possibilities are endless.

Props

Render props allow you to pass data into components. You can think of them as arguments to a function. All functions return different values depending on arguments passed into them. You wouldn’t want a function that always returns the same thing. Except in case of components, you define a shell of UI and pass it props to customize its contents, functionality, and more.

Without props, component reusability would be impossible in React.

Controlled components

In the old days, you could directly access values in a DOM element and even programmatically change them. React has very specific rules about user interactions and DOM. Most of the time, user inputs are stored in the state, and input elements also get their value from the state. Elements in this two-way bind are called controlled components. In other words, input elements where state controls their value.

Usually you need an event handler to access current input and store it in the state. When there’s an user interaction, event handlers receive an instance of SyntheticEvent – an object that contains bunch of useful information about the event. It also stores information about the element that triggered the event.
Event handlers can usually access current input on e.target.value, where e stands for SyntheticEvent.

By default, event handlers receive only one argument. But you can work around that and pass parameters to onClick in React.

Virtual DOM

React does not allow us to work with DOM because it is too heavy. Instead, React has its internal image of DOM – called virtual DOM. This is just a JavaScript shadow copy of the real DOM. So React uses virtual DOM to keep track of contents and elements on the page. Every time there’s a change to state or props, React will re-render the component and all of its children to ensure the virtual DOM reflects changes on the page.

You do not have to concern yourself with how React settles differences virtual DOM and real DOM. The library handles it internally so you never have to force it to display the newest information. This is why Facebook is able to show new notifications without refreshing the page.

Hooks

Before hooks, it was normal to use class components for ‘smart’ functionality and functional components for presentation. The introduction of hooks in React 16.8 changed that.

These days, most React developers use functional components for practically everything. They are easier to write and useState, useEffect, useRef and other hooks allow you to implement dynamic features in functional components.

You can also create your own hooks to easily implement dynamic features in React.

Overall, you need to learn how to use hooks to get the best React has to offer.

Summary

React is an innovative library that effectively uses novel concepts and ideas to deliver consistent performance and fast speed. In this article, we learned about common design patterns in React. Being aware of these will help you build interactive applications that work like a charm.

 

Hooks every React developer must know

Personally, I am a fan of functional components and their simplified syntax. With these hooks, you will be able to implement any dynamic feature that you want, and you no longer need to bother with class components.

Without further ado, let’s get to topic and learn about hooks in React.

useState

Probably the most important hook in React, necessary for all dynamic features. useState hook allows functional components to maintain state, something that was not possible before React 16.8. You only need to import the useState hook and call it in your functional component.

Its syntax is much simpler than what you’re probably used in class components. Simply create two variables using square brackets and call the useState hook. It will return two values – the first variable to hold state value, and second function to update it.

You are probably aware that maintaining state is necessary for all the interactive features. Most dynamic rendering or dynamic styling uses state variables to set a condition. Event handlers access the input value and store it in the state. With class components, you had to use the setState() method, whose syntax was sometimes confusing. Having the useState() hook return a single dedicated function to update the variable is much simpler than the alternative.

Normally, event handlers only take one argument – instance of SyntheticEvent. However, there’s a way to pass additional data to event handlers in React.

Keep in mind that the argument to the useState() hook is set as the default value for the state variable. You can use this behavior to set default values for state variables, and control what the component looks like, or what it displays by default.
You can pass any type of value to the useState() hook. It accepts integers, strings, Booleans, arrays, objects and even null. The hook returns an array, so you need to create two variables using destructuring syntax to hold these two values.

Like the setState() method, updating state variables using the function returned from useState() hook triggers a re-render in the component and all of its children.

Often you will use the setter function to store API data in the state, and then use that data to render components for every item.

The useEffect hook

Second most important hook is the useEffect hook. It is used to replace lifecycle hooks of class components that run when component mounts, dismounts, and updates. It allows you to plug in side-effects at any moment of the component’s lifecycle. Even more than that, useEffect hooks allows you to specify the state variables to ‘watch out’ for. Changes to certain variables will trigger a re-render, while changes to others won’t.

Side-effects are very important part of React. You need them to set up subscriptions, do mutations, and log to the console, which helps with debugging.

First argument to the useEffect() hook is the side effect that you want to run. The second argument is the dependency array, which specifies state variables that the hook needs to ‘look out for’. If the dependency array is empty, the side effect will run only once – when the component mounts. This essentially replicates the results of componentDidMount() lifecycle method in React. If the dependency array contains multiple state values, then the side effect will run only if there’s change to those state variables. If there’s no second argument, the side effect will run every time the component updates. useEffect without a dependency array runs when the component mounts and every time it rerenders.

Finally, the third optional argument is a function that runs when the component unmounts. It is necessary to remove subscriptions and other tasks related to cleaning up the application. The kind of tasks you would handle in a componentWillUnmount() lifecycle method.

useEffect(), in combination with useState(), plays an important role in fetching external data. Often times you need to make a call to the API when the component mounts. You can do that by creating a useEffect hook with empty dependency array. Then store loaded data in the state, which you can then use to render components or elements as normal.

useContext hook

The easiest way to pass data between components is props. However, when there are too many levels of components, passing data down via props becomes cumbersome. It is a practice called prop drilling, and it takes too much effort and clutters up your code. React community has created several ways to work around this. Mostly state management libraries like Redux. But with useContext hook, React offers its own way to easily share data from one component to another.

As a first step, you need to create a context instance using React.createContext method. Then pass it to the useContext hook and create a context wrapper. Anything passed as props to this wrapper will be accessible in other components in the same app.

useRef hook

Finally, the useRef hook allows us to access DOM elements in React. We do not have getElementById() method in React. Instead, you can set ref attribute to a ref created using the useRef() hook.

You need to create a variable to store a ref instance. Set the variable to a ref instance returned by useRef() hook.
Once the ref is created and tied to an element using ref attribute, you have access to that element. You might use the reference to change the element throughout lifecycle of the component or change its contents to something else. Refs are also useful for a ‘scroll to element’ feature. You need a reference to the element to call scrollIntoView() method to scroll that element into view.

forwardRef() allows you to pass refs from parent to child components, so you can maintain access to the DOM element.
Summary

Hooks are very important in React. Especially if you want to avoid difficult syntax of class components. Hopefully this will help you build interactive web applications with dynamic features.

 

Most useful dynamic features in React

React is the most popular library for building user interfaces right now, and for a good reason. It offers everything you need to build interactive, lightweight, and fast web applications. In this article, we’ll try to show you how to implement dynamic features in React. Namely – how to conditionally render and style elements and components.

Dynamic rendering in React

When building apps, sometimes you want to render certain parts of the page only if certain conditions are true. A simple example is to render a dashboard control panel only if the user is successfully logged in.

Using ternary operators is the most common way to implement dynamic rendering in React. It allows you to quickly check a condition and return a component if the condition is true, and another component if the condition is false. Alternatively, you can return nothing if the condition is false, or set up an additional condition, similar to else if statement in JavaScript.

You can also use familiar if/else and switch statements to conditionally return elements or components. However, these are not compatible with JSX. You will have to use these statements outside the JSX. In case of functional components, use else and switch in the function body. In class components, either in the body of the render() function or in the class definition.

If you have multiple and/or complex conditions for rendering a certain component, it’s best to skip ternary operators. They become less readable with complex conditions. Use familiar if/else statements. They work the exact same way in React.

For simple use-cases, you can use the logical AND operator (&&). You can use it to connect the condition and the component that needs to be rendered. Condition comes first, followed by AND operator, and followed by the component. If the condition is true, React will render the component. If not, nothing will be rendered. This approach is useful as it can be embedded inside JSX.

You can also use a library like react-router to dynamically render component for certain routes. The library also allows you to get current path and url in React.

Conditions for rendering

You can use any condition to dynamically render an element or a component. In practice, most React developers use values from state or props. These values are usually tied to event handlers, so user actions can determine when the component or element is rendered. For example, you can set up an onClick event handler to render (or not render) the element when the component clicks a button. The event handler updates the state variable, which in turn conditionally renders the component.

In functional components, usually we use the useState hook to create a variable and a function to update it. You will need that function to update the state from the event handler. In class components, you will need the setState() method to update the state. Keep in mind that React automatically re-renders the page every time there’s change to state or props. So updating the state will cause the condition to be evaluated again, and the page layout to be accordingly updated.

Dynamic Styling

The entire purpose of React is to build interactive websites. In other words, the application needs to respond to the user’s actions. Visual cues are often the strongest. If there’s been an error, make text red. This is only possible thanks to dynamic styling in React.

It’s important to remember that everything in React is actually JavaScript. Even the parts that look like HTML. JSX is just an easier way to structure web applications without having to work with top-level React API. JSX works similarly to HTML, except it also allows you to embed JavaScript expressions into the structure of your app. So you can set className attribute to a dynamic string or set inline styles to a JavaScript object where properties correspond to CSS properties. Here’s a guide that shows how to do string interpolation, which is very useful for dynamically styling elements in React.

Similar to conditional rendering, in this case we also use state values to set up conditions. In turn, state values are prone to change in response to users actions. We define and set up event handlers to change state values when users click or provide any other input. When state values change, the React component and all its children trigger a re-render to make sure the app depicts the latest changes on screen. In this re-render, React might realize that the condition for styling is now met, and apply the new conditional style.

Let’s look at an example:

<div style={{backgroundColor: dark ? “black” : “white”}}>contents of the page</div>

Let’s say there’s a checkbox that when checked, sets the dark state variable to true. Then checking and unchecking that checkbox (user action) determines the style of the page.

Notice that we need to use double curly braces to set inline styles in React. One pair of braces tells React to interpret the following part as a dynamic expression. The inner pair of curly braces are there to open and close the JavaScript object.

We could also conditionally set the className attribute. Note that React is entirely written in JavaScript, a language where class is a reserved word.

It’s not a requirement to use a ternary operator to conditionally style or render elements in React. However, it’s the easiest and most readable approach. Also, if and switch statements can not be embedded in JSX, so you will have to define these conditions outside the JSX and then reference variables inside JSX. For more complex or multiple conditions, this might be the better approach. But for the sake of simplicity, I almost always use ternary operators or logical AND (&&) operators to implement these dynamic features.

Summary

In today’s article, we discussed how to implement two important features in React. Hopefully you are now familiar with conditional rendering and styling, and why state values are necessary to implement these dynamic features.