Introduction: What is React? Why is React Relevant?

React is an open-source JavaScript library created by Facebook that lets developers build user interfaces that are lightweight and easy to maintain. It was first introduced in 2013, but it has quickly become one of the most popular choices for front-end developers because it offers a lot of advantages over other libraries.

React makes use of a virtual DOM and one-way data flow architecture, which helps improve performance and reduce the number of bugs significantly. React’s virtual DOM provides a much faster and more efficient way to update your view than simply re-rendering the whole app on each change.

Setting Up A Logo Component

First, let's open up our text editor and create a folder called components and make our logo.js file inside of it. Once you have that set up let's go ahead and write out our default code for the react component. I'll just use here a class component:

logo.js

import React, { Component } from 'react';

class Logo extends Component {
  render() {
    return (
      <div className="logo-test">

      </div>
    )
  }
}

export default Logo;

In logo.js we can use the image we like let's say it's in path: /assets/test_square_logo.png we put this into the editor, close it and press ok.

<div className="logo-test">
  <img alt="test for ui logo in react js" src="/assets/test_square_logo.png"/>
</div>

So I just finished coding a default component and boilerplate React code. I created a new div with the class logo-test and an image source of /assets/test_square_logo.png.

But if we try to run our app this isn't going to render because we haven't imported it into our app.js so let's go ahead and do that now. Let's import Logo from './logo.js' file.

app.js

import React, { Component } from 'react';
import Logo from './logo';

export default class App extends Component {
  render () {
    return {
      <div>
        <div>
          <Logo/>
        </div>
      </div>
    };
  }
}

Now it's the main.css turn to edit and select the logo test class with the img to adjust the height and width:

main.css

.logo-test img {
    width: 170px;
    height: 170px;
  }

That's all for now we'll keep adding more articles, check soon!