A Simple Introduction to React JS

React is one of the most popular JavaScript library used for building user interfaces or UI components. React makes the process of building interfaces easier by dividing the UI into a collection of components. React is simple, fast and scalable, it allows developers to create large web applications that can change data, without reloading the page.
React is mostly concerned with state management and rendering that state to the DOM(Document Object Model), so creating React applications usually requires the use of additional libraries for routing, as well as certain client-side functionality.
Before going into React a good understanding of HTML, CSS, and basic JavaScript is needed, you don't have to be a JavaScript expect, but a good knowledge of JavaScript would be very helpful (knowing things like; variables, object and array destruturing, arrow functions, callbacks, template literals and ES6 Modules).
In these article we will be looking at the basic features to get you started.

Installation

The most simple and beginner friendly way of installing ReactJs is by installing create-react-app.
Create-react-app is a comfortable environment for learning React, its sets up your development environment and provides a nice developer experience. It will create a live development server, use Webpack to automatically compile React, JSX, and ES6, and use ESLint to test and warn about mistakes in the code. You will need to have Node Js on your machine. For a guide on how to download and install node, visit the official documentation
After this you can create a project by running the following code in the terminal;

npx create-react-app my-app
cd my-app
npm start

Once you run this command, a new windows will pop up at localhost:3000 with the React' welcome page

React Components

So let's move on to creating a component in React, remember at the introduction we mentioned that with React we build interfaces by dividing the UI into a collection of components.
The create-react-app comes with a lot of files that perform various functions. If you look into the project structure, you will find a /public and /src directories along with some other files. The /src directory is where we will be writing all our React code.
The /src/App.js is the most important of all the files you have there, every other component you would be creating would be rendered in the App.js component.
So let us start by analyzing our first component /src/App.js which I have simplified.

import React from 'react'

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    )
  }
}

export default App

You can see from the above that we imported a JavaScript library( the react npm paackage) and we have a class that returns a heading of "Hello, React" then we exported the function App. When we open our browser now, we would only be seeing our 'Hello, React'.
We can have more than one component and render them in our App.js component.
Take for example
We have a Header component in /src/Header.js

import React from 'react'

class Header extends React.Component {
  render() {
    return (
      <div className="header">
          <h1>This is a header</h1>
      </div>
    )
  }
}

export default Header

And we have another component Content in /src/Content.js

import React from 'react'

class Content extends React.Component {
  render() {
    return (
      <div className="content">
          <p>This is the content of the page</p>
      </div>
    )
  }
}

export default Content

We can now render both component in our App component /src/App.js

import React from 'react'
import Header from './Header'
import Content from './Content'

class App extends React.Component {
  render() {
    return (
      <div className="app">
          <Header />
          <Content />
      </div>
    )
  }
}

export default App

You can see that we have imported both our Header component and Content component and rendered them in our App component.

JSX

JSX (or JavaScript XML) is a special language we use to build component's output, it looks like HTML but it has some JavaScript embedded into it.
Take a look at the App function in the original example (the one we had after running create-react-app), it returns something that at first sight looks quite strange

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

From the above, we see that everything inside of the return statement is JSX. JSX is actually closer to JavaScript, not HTML, so there are a few key differences to note when writing it.

• We use className instead of class for adding a CSS class because class is a keyword in JavaScript
• Self closing tags must end with a slash e.g <img />
• Methods and properties in JSX are written in camelCase e.g onsubmit will become onSubmit
• JavaScript expressions can also be embedded inside JSX using curly braces, including variables, functions, and properties for example,

const name = 'Martha'
const greeting= <h1>Hello, {name}</h1>

Conclusion

This article covers the very basic introduction to React, there is still so much more you will need to learn, I hope you push further and get a mastery of React. Feel free to drop a comment on any topic you would like me to write about and stay tuned for more articles on React from me😊