ReactJS — Key Concepts from a Noob

What is ReactJS??

ReactJS is a library used to build user interfaces using components. While ReactJS can be written in JavaScript, it is more commonly written in JSX, a JavaScript “syntax extension.” If written in JSX, it is important to note a JSX compiler, like Babel, is needed to translate the code back to JavaScript so the browser can read the code. Below are three key concepts to know about in ReactJS.

  1. Components are everything

Components in ReactJS are reusable, composable, and stateful —we can think of them as functions. There are two types of components: container components (smart components) and presentational components (dumb components). Unlike container components, presentational components generally do not keep track of state.

2. Props vs. State

Both component types take in data as input, in the form of properties (props) and state. Props are immutable data (read should not be changed during the component’s lifecycle), and if not set, are passed to components by default. In JSX, JavaScript expressions can be passed in as props when wrapped in { }. State stores information about the component, and by default are stateless, until their state is set.

ReactJS monitors if there are any changes to a components’ state through the use of a virtual DOM — if a change is detected, rather than reloading the entire page, it “reacts” to the change by invoking the render( ) function and only updating that specific components’ data.

3. Lifecycle Methods

Lifecycle methods are reserved components provide by the ReactJS library that will run logic before or after rendering (`componentWillMount` vs. `componentDidMount`), that can be applied to components in order to free up resources, and to describe the order of when things should happen.

Good use case for ReactJS

ReactJS is good tool to build Single Page Applications (SPA) because they follow similar logic — a SPA loads once and when data is requested, the client only sends a request for the data the user is asking for; this avoids unnecessary page reloads, making the application more efficient, and in turn provides the user with a better overall experience.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.