Author: b4qzy

Once upon a time, users had to refresh pages to see new posts and notifications on social media. The same for receiving any kind of updates. No one really thought about it, but Facebook realized there was a room for improvement. They launched React and web development was never the same again. Thanks to React, UX has dramatically improved and users set higher expectations every year.

These days, React is the most popular library for building interactive user interfaces. In this article, we will look at most important concepts in React.

Virtual DOM

React maintains a shadow copy of the DOM. Data displayed on the page is stored in the state and props. Whenever any data changes, React calls the render() method to update the page.

Virtual DOM’s best feature is the efficiency. Virtual DOM updates the entire component tree. Then React compares virtual DOM with the real DOM and settles differences. This ensures efficiency of the web application. It also ensures that web applications always display the most recent updates.

State, props, single-way data flow

In React, state is the object that stores current ‘status’ of the component. For example, if a new post needs to be displayed, the id of the new post would be added to the state. As you know, changes in the state (and props) also triggers update of the page.

State is often used for dynamic functionalities. For example, dynamic rendering of certain elements or components. State values are also used to conditionally style elements using inline styles or className values.

React recommends to store state data in the component at the top of the tree. This is called a ‘single source of truth’. Every component in a web application should receive data from the main parent component.

Finally, this brings us to props. This is how parent component passes data down to children components. In JSX, you can define props as simple custom attributes on React elements and custom components. Props can be passed from parent components to children, not the other way round. This is called single-way data flow.

JSX

React comes with a custom templating language JSX. It looks like HTML, but JSX is actually JavaScript. This template language allows you to build components, which are essentially small parts of a website. JSX defines what the component should look like and what elements it contains.

Other front-end frameworks like Angular require a separation of logic and presentation. JSX combines presentation and logic. JavaScript expressions can be easily embedded. To do this, you need to wrap JavaScript expressions in curly braces.

You can embed JavaScript expression as prop or attribute values. You can also embed them as contents of JSX elements. React developers often use the map() method to create React elements and components by looping over objects in the array in React.

In JSX, you can conditionally display error messages, or even hide entire components depending on state values.

The most common problem of beginner front-end developers is that they don’t have online presence. Having a strong portfolio is only a part of that process. A blog can be a great tool for making yourself known and noticed on the internet. If you plan to become a contractor or freelancer, it can be a source of clients for you.

I personally ran a web development blog for 10 years, and I can say it has been one of the best decisions for my career. Let’s go over few reasons why blogging is good for your development as a web developer and obviously for the community as well.

Opportunity to learn

You don’t have to be an expert to start a front-end development blog. Everyone has expertise in certain area of front-end development. And in case you don’t think you are knowledgeable about anything, even better – it could be an opportunity to learn.

For instance, this blog post on SimpleFrontEnd about working with forms could be a great learning opportunity for the person writing it: https://simplefrontend.com/clear-form-after-submit-in-react/ .

There’s a saying that you can only truly know something if you can explain it to others in simple words. Blogging is an easy way to explain things you think you know. If it turns out that you’re not as much of an expert as you thought, then writing about it will be an opportunity to gain an in-depth knowledge.

More importantly, keeping a blog can be an opportunity to learn writing as well. It is a useful skill because web developers not only have to write code, but also comments for one another.

Stay up to date on programming trends and technologies

Blogging about front-end development is a great way to stay updated on latest changes in your technology. It can also be an opportunity to explore other tech stacks and see if there’s anything else for your application.

Sometimes you will learn a new language and have recruiters reach out to you.

Keep it focused

If you want people to follow your blog, write about one topic consistently. The focus of your blog can be very narrow, like one specific front-end framework. You could focus on React, for example. Alternatively, you can dedicate your blog to front-end development in general.

Be consistent

If you decide to publish weekly blog posts, stick with that plan. There is nothing more frustrating than expecting a new blog post and not getting it. If you anticipate that certain time will be difficult for you to write, then write in advance.

Writing technical tutorials in advance also gives you time to proofread them before publishing. It’s a bad idea to write something the day you plan on publishing it. It’s much better to proofread it the next day, or even three days later, to look at it with a fresh perspective.