React JS for Absolute Beginners
--
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?
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.
