A Simple Introduction to React JS
Tags: react, codenewbie, javascript, womenintech
Published: 2021-04-20 09:55:53

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](https://nodejs.org)
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😊