React JS for Beginners: 10 Things Every React Developer Should Know

React JS is one of the most popular JavaScript library for building user interfaces, developed by the creators of Facebook in early 2013. This is an declarative, open-source library for building single-page applications, super developer friendly. React JS has become highly popular because of its extra simplicity and flexibility for web developers. If you are reading this article, you may want to know some basics of it. So let’s jump into it:

1. React is a JavaScript Framework/Library:

This is a common confusion among beginners, between library and framework. To put this simply, React is a JavaScript Library, not a Framework. Because in React you can make all decisions by yourself: state handling, props, lifecycle, components etc. Also React is light and very easy to cope with other third party libraries, to make development smooth. Libraries have this freedom, but frameworks don’t provide us that.

2. React is basically JavaScript:

React is a component based language, and each component is a file with .js extension. In stateless react or functional component, there is a default variable, which returns something(JSX) and exported to share the component globally.

3. React Returns JSX:

JSX stands for “JavaScript XML” , its a syntax extension to JavaScript. JSX allow us to write HTML in react. After that, JSX helps to render or place HTML elements into the DOM without any createElement() or appendChild() method, and is translated into regular JavaScript at runtime. In the functional component, a default function calculated any method and returns a JSX.

4. Separation of Technologies:

In React, HTML, JS and CSS often work together as a component. In a .js extension file in a create-react-app, we can write JavaScript logic with HTML syntactic sugar JSX, and inline CSS/CSS objects to get a fruitful outcome.

5. Data passing in React:

In React, we can pass data from one component to another using React Props or ‘properties’. Like in HTML tags there is fixed attributes, like in h1 tag there are attributes like height, weight, color etc. React props, or ‘properties’ are like attributes of React components, but they are used to send data from one component to another. Validation of React props is known as PropTypes. As said, React props allow us to send data — like numbers, strings, objects, arrays, functions etc. to a component when someone call on that component. When we have multiple component in a create-react-app, then we can pass props like attributes in HTML. An example may be beneficial.

<MyComponent height='30px' />

6. State in React:

One of the benefits of using React is using state instead of complex DOM manipulation. State is a kind of object where we can store property values that belong to the component. When the state changes, the component re-renders, meaning that the output will change according to the new state value. State contains as many properties as you like. In functional React Component, React hook “useState” is used.

const [eatFood, setEatFood] = useState({eating: false, foodName: '', foodPrice: null});

7. Rendering in React:

Every state change, for example in previously setEatFood(), call informs React about state change. Then, React calls a method “render()” to update the components representations in memory of “Virtual DOM”. If there are changes, React does the smallest possible update to the DOM. When a component renders, its child components know that they need to re-render, because state changing has effect on props.

8. Handling Event in React:

This is very similar to updating/handling events on DOM elements, except some syntax difference.

# React events are named using camelCase, rather than lowercase in DOM. For example, DOM event onclick will be “onClick” in React.

# In React, we can pass a function with JSX. On the other hand, in DOM event we used string. For example,

// DOM
<a href="#' onclick='submit()'>
// JSX/React
<button onClick={submit()}

9. Conditional Rendering:

Conditional rendering in React works the same way conditions work in JS. In JavaScript, we use operators like “if” or “else”. But in React we can use inline conditions.

We can use logical && operators is JSX by wrapping them into curly braces. true && expression always evaluates expression, but false && expression evaluates to false.

const score = 0;
<div> {
score && <h2> Text: {score}</h2>
}

We can also use inline if-else condition, the syntax is condition ? true : false;

10. Multiple Component Rendering:

We can build collection of elements and put them in JSX using curly braces{}. We can access those elements via mapping and put elements into different list items.

const values = [2,4,6,8,10]
const list = values.map((v) => <li>{v}</li>);
// list variable will show every elements of "values" in a HTML list

That’s it for today, hope you enjoyed this. Have a good day!

I am a junior MERN Stack developer, basically front-end focused development is my passion. I can write scalable, re-usable code for development purpose.