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.

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.

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.

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.

Only ten years ago internet was very different from what it is today. Most major banks did not have internet presence, for example. From today’s perspective, even tech companies like Facebook and Google were lagging behind in terms of user experience. Web development is mature now. Not only that, but the process of building websites has changed as well. For this reason, it’s interesting to look back on web development in the past and try to describe changes.

Let’s start with the biggest changes internet has experienced.

Strong response to new web standards

A decade ago, a lot of people were still using slow browsers like internet explorer. Internet explorer was based on old tech infrastructure, so website-specific languages like HTML and CSS could not move forward. Some websites did modernize, but they had to also develop alternate versions of their websites for those who used old browsers. Internet Explorer and similar browsers could not support many new features present in newer versions (CSS3 and HTML5).

Improvements in UX

This is related to the previous point. These days, more and more browsers support HTML and CSS features that improve user experience. Flexbox and grid systems make it easy to design the web application layout for example. It is also easier to build responsive web applications. Because most web apps are viewed on phones today, this makes a big difference.

10 years ago, it was nearly impossible to browse internet on your phone. Now almost every theme and CMS tool builds beautiful websites optimized for mobiles.

The development of front-end frameworks like React have also helped. The virtual DOM feature of React can single handedly improve user experience for dynamic applications like Instagram and Facebook. React is by far the most popular tool used for building user interfaces and entire web apps. It allows you to conditionally display or hide certain elements, or use JavaScript to dynamically add conditional className values to certain elements. React also allows you to use refs, an alternative to getElementById() method. You can use refs to improve user experience as well. For example, scroll to a specific element.

https://simplefrontend.com/react-scroll-to-bottom/

Emergence of no-code

Content management systems (CMS) have always existed. WordPress was no less popular a decade ago than it is today. WordPress websites have become more beautiful, and have basic dynamic features. Mostly they are used for creating blog websites.

However, one big change is the emergence of no-code services. These tools allow you to build web apps with much wider functionality than simple WordPress blogs. There are plenty of tools that do not require a programming knowledge for building various types of applications. Even for developing mobile apps. Shopify has created a solution for building ecommerce websites, for example.

As a result, now everyone has access to building fairly complex web applications. It takes less time to build a simple prototype or even an MVP.

No-code has not replaced programming languages though. It is simply a tool for translating ‘what you want to the code. Under the hood, it will be HTML, CSS and JavaScript.

Ever since they were introduced, map() and filter() have become great tools for any programmer writing JavaScript code. Since React and other front-end frameworks are based on JavaScript, you can use these two methods in React as well.

In this article, we will discuss use cases for map() and filter() in React. Let’s start with the former.

React applications often receive data from an external API. When you need to display multiple components of the same type, data is usually formatted as array of objects. Each object describes an instance of a certain item. For example, an ecommerce website might receive an array of objects, where each object contains information about each product that needs to be displayed.

In these cases, you need to loop through an array of objects in React. map() is a great function to do just that. The method takes one argument – a callback function.

When you call map() on a certain array, it runs a callback function on every item in the array, then stores each of these items in a new array. You can use this functionality of map() to take objects in the array, and return JSX elements with specific attributes. You can get values from objects and use those values as contents or parameters of the JSX element.

JSX even allows you to embed a call to the map() function right in your code. JSX is nothing but JavaScript code disguised as HTML. Simply use curly braces to write JavaScript expressions within JSX. That way, the templating language will know that a certain part of your code should be evaluated as a JavaScript expression, not a normal content of the page.

React web developers often use map() to create JSX elements, or even separate components based on array of objects. It is a great way to automatically generate elements for every piece of data in the array.

Next is the filter() function. It works similarly to map(), with one big difference. It takes a callback function that returns a condition. The filter() function checks every item in the array against that condition, and creates a new array with items that met the condition. Therefore it is commonly used when you want to conditionally display elements and components for some items in the array.

To use filter() in JSX, you should follow similar rules to map().  You can embed it directly in JSX, but need to wrap the code with curly braces. You need the filter() method to conditionally loop through an array of objects in React.

In conclusion, these two functions are very useful for working with external data in React. You can use both map() and filter() methods to create elements from an array of objects. You take information from objects, and use it as content or attributes for components.

A lot of beginner web devs have asked me about applying conditional styles in React. I have finally found time to write this blog post to explain how to apply styles this way.

First off, I will quickly provide some background information to really understand conditional styles. React allows you to apply styles based on current value of a variable. It can be any variable, but input components in React typically store values in the state object. Whenever the state changes, component is rerendered. So if user changes their input, and the appearance of application depends on a state value, then component will be updated, and styles might change.

If you’ve ever tried switching from a dark to a light theme, this is why the change is so fast. Web apps you use are likely built in React (or similar front-end framework). They don’t have to reload. They store user’s inputs in the state, and if the user changes their selections, the styles for HTML elements change with it. This is an excellent guide on implementing dark mode in React web apps.

With that being said, let’s get back to the topic of using ternary operators for conditional styling in React. This is more common and easier to do than you might think.

Like in normal HTML, you can set inline styles to React elements in JSX. Even more importantly, JSX allows you to set style attribute to a JavaScript expression.

Inline styles in JSX are similar to those in HTML, but also different in few important ways. For once, they are not a string or a text. inline styles in React are formatted as objects, where object property is the CSS property, and the value is the style choice.

Since it’s just a normal JavaScript object, you can easily add ternary operators to conditionally style React elements. Let’s take a look at one example:

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

In this case, the <div> element is conditionally styled. You can go even further and nest multiple ternary operators to implement a if/else scenario. It will not be readable, but you can technically do it.

Using ternary operators to style elements is common practice among React web developers. It’s important to remember the syntax, especially if you’re going to nest multiple ternary operators or use them frequently.

If your conditions are too complex, your JSX query might become too confusing and difficult to follow. In that case, you can take the entire styles object out of the JSX code. Define it somewhere else. Add as much complexity and as many nested ternary operators as you’d like. Then in JSX, you can simply set the style attribute to reference of that object.

Overall, inline styling is a great feature for developers. It’s simple and often times effective. However, as your experience grows, you may want to explore other options for dynamic styling in React. For example, libraries like styled-components.

One alternative is to define a normal class, and add className conditionally in React. This is particularly useful when there are multiple styles that need to be conditionally applied. You can re-use the same class on multiple elements in JSX.