DEV Community

Kauna Hassan
Kauna Hassan

Posted on

Introduction to React.js

Introduction

React is a popular open source javascript framework that uses components. React was created by a software engineer at Facebook named Jordan Walke.
As react gained popularity over the years, it began to shape the web development space and it gained much more relevance amongst developers.

Setting up the environment

To set up your react environment you will require the following:

  • An editor with vscode being a popular editor amongst developers.
  • Secondly, you will need to install node.js

What are components?

Components are the constituents of a React application and can be sub-divided into functional and class components.

Functional Components
A functional component works with properties commonly known as props to accept an input that will render what out user interface(UI) may eventually look like.

An example of a functional component

Class Components
Components written using ES6 classes in place of functions are called class components. We will now rewrite the functional component using classes.

A class component

While we have expanded on both components, the question then lies in how do I then know when to use which component?

With progression in your development journey it will become clearer when you'll need to add logic for event handlers, manage local state and when you'll need to add lifecycle methods. Else, I'll suggest using functional components.

Conclusion

In this article we have looked extensively on what components are and walked through installing our code editor and node.js. In the next article, we will look at using properties(props) and destructuring in react.

Top comments (0)