In my opinion, React is the best thing that ever happened to front-end development. It simplifies the process of designing and building user interfaces. You can create large interactive web applications step by step. React allows you to design individual blocks for web application. Changes to the internal state will automatically be reflected on the screen. User doesn’t have to reload the page. Interactive web application automatically displays changes on the screen.
Let’s go through the process of building beautiful web applications in React.
When building an application, you should have a general idea of app’s layout and its functionality. Based on this general information, you should decide what components you’re going to need. Ideally, you should sketch a general user interface of your app. Mark each ‘building block’ of the user interface, and create corresponding components.
Reusable components Is perhaps the most important concept in React. You define a component – a piece of HTML, CSS and JavaScript. You can think of components as small parts of a website that do something. Then you can reuse those components throughout your application. When building web applications in React, you should aim to reuse as many components as possible.
You should understand the difference between React elements and custom components. Elements are essentially stand-ins for HTML elements. Their functionality and appearance is essentially the same. As for custom components, they are custom building blocks for user interfaces. To differentiate between React elements and custom components, start names of custom React components with a capital letter.
Next, you should understand JSX – what it is, what it does, and its use cases. In short, JSX is React’s replacement for HTML. JSX looks essentially like HTML, but it’s JavaScript under the hood. Therefore JSX allows you to implement more dynamic features than HTML. It allows you to set multiple className values conditionally in React. JSX also supports rendering a certain element (or component) depending on condition outcome.
In JSX, you can loop through arrays to create elements or components. This is often beneficial for rendering lists. For example, if you get data that describes products, you can use JSX to conditionally render all items in the list. Specifically, you will have to use array methods like map() to return a new list of React elements.
Next, we need to discuss props and state. The former is a way for React elements to share data between one another. Typically props are passed down from parent to child components. React recommends to maintain an internal state in one parent component, and pass it down to children components. This is called the ‘Single Source of Truth’.
State object is also a very important concept in React. It essentially contains data to describe current ‘status’ of the app. For example, user inputs are stored in the state. Then you might use state values to apply conditional className values or conditional styles.
Class components used to be the only way to maintain state with React. With introduction of hooks, that has changed. Functional components can now maintain a state. Hooks provide a much easier interface for updating state values.
Functional components have simpler syntax and require much less code to set up. These days most companies build web apps using functional components.