React JS for Absolute Beginners
What is React JS?
- Arrow Functions
- Objects and Arrays
- Template Literals
What is JSX?
Instead of artificially separating technologies by putting markup and logic in separate files, React separates elements into units called ‘components’ that contain both.
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 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.
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.