Getting Started with React

Hello, getting started with learning ReactJS has helped me to see the power of independent, reusable components in coding. This straightforward yet simple article will definitely excite you in getting started also!

ReactJS is a toolkit for building user interface which was first deployed by Facebook in 2011. It helps developers to build complex user interfaces using components.

Technically, react is a user interface library; it serves the purpose of organizing HTML elements into components (It is imperative to add here that you should have a prior knowledge of HTML in order to work well with reactJS), even though it's a lot more like a front-end framework.

What make react unique and powerful are the components. React allows you to build a complex user interface with simple components.

Components are the pieces of a user interface. For example, take a look at this interface:

It can be broken into Navs (search & play) and Album lists. Each of these sections will be placed in different individual component which ultimately makes up a react app.

The search nav reflects:

The play nav reflects:

And the album lists reflect:

For implementation
A react component is implemented as a JavaScript class which has state and render.

For example

class song { 
            state = {};
            render() {

            }
}

The state will hold the data we want to display when the component is rendered. The render is for describing what the user interface looks like, the output of the render is a react element.

In summary, react is a powerful in making building complex user interfaces a lot easier for you, that's why it has definitely grown popular and that's why you should learn it as well!

See you soon as we further dive into react.

Comments

[Femi Akinyemi]

React components are not only implemented as a JavaScript Class which has state and render. According to beta.reactjs.org/learn. React components are JavaScript functions that return markup:

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

According to the new documentation, this can either be in Hooks or Classes. Using Hooks is strictly encouraged rather than classes.
You can read more here beta.reactjs.org/.

[mercy.io]

@femi_dev thank you for pointing that out to me! Will read up on it.