React JS for Absolute Beginners

Photo by Lautaro Andreani on Unsplash

What is React JS?

React is the most popular front-end JavaScript library in the field of web development. It is used by large, established companies and newly-minted startups alike (Netflix, Airbnb, Instagram, and the New York Times, to name a few). React brings many advantages to the table, making it a better choice than other frameworks like Angular.js.

How much JavaScript do I need to make React apps?

Before starting to develop a React application, I recommend you to have a solid grasp in some core JavaScript concepts. You don’t need to be a complete master and know all the workarounds about programming in JavaScript, but it will help you to understand how things work in this library and will make the learning process easier.

  • Arrow Functions
  • Objects and Arrays
  • Destructuring
  • Callbacks
  • Template Literals

What is JSX?

Photo by Ferenc Almasi on Unsplash

At first glance you might think that JSX is HTML, but in reality it is something a little different. JSX is a special JavaScript syntax that allows rendering React elements. React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting markup and logic in separate files, React separates elements into units called ‘components’ that contain both.

Components

Components are the heart of React. Every element that you see in a web page can be represented as a component in React. Components are the building blocks of any React application, and a single app usually consists of multiple components. A component is essentially a piece of the user interface. React splits the UI into independent, reusable parts that can be processed separately.

Props

Props are short for properties. It is a React built-in object which stores the value of a tag’s attributes and works similar to the HTML attributes. It provides a way to pass data from one component to other components in the same way as arguments are passed in a function.

State

The state is a built-in React object that is used to contain data or information about the component. A component’s state can change over time; whenever it changes, the component re-renders. The change in state can happen as a response to user action or system-generated events, and these changes determine the behavior of the component and how it will render.

How to Build a React Project

One of the many great parts of React is how it makes you think about apps as you build them.

Step 1: Break The UI Into A Component Hierarchy

The first thing you’ll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. Use the single responsibility technique to asses if a component should be decomposed into smaller subcomponents.

Step 2: Build a Static Version in React

Now that you have your component hierarchy, you can implement your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. Don’t use state at all.

Step 3: Identify the Minimal (But Complete) Representation of UI State

To make your UI interactive, you need to be able to trigger changes to your underlying data model. React achieves this with state.

Step 4: Identify Where Your State Should Live

React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. This is often the most challenging part for us newbies to understand (I still struggle with this).

Step 5: Add Inverse Data Flow

The last step is to support data flowing the other way. React makes this data flow explicit to help you understand how your program works, but it does require a little more typing than traditional two-way data binding.

Free Learning Resources

Photo by Sharon McCutcheon on Unsplash

Learn JavaScript!

Learn CSS!

Learn React!

Front-End Development Libraries Certification!

Responsive Web Design Certification!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store