React:  a simple Introduction
Tags: beginners, react, javascript
Published: 2020-09-07 03:23:43

Tired of hearing about Angular and AngularJs?! Well do I have a solution for you! Introducing: React! React is a framework built around the much needed improvement from Angular.

Created in 2013 by Facebook, React was invented with the intention of building reusable, simple interfaces. React is also the main framework being implemented in software development companies. The advantage it takes towards Angular JS is that React is easier to pass properties around the files. 

There are some main concepts to keep in mind when using this framework:

*1. Components*
*2. State*
*3. Props*
*4. JSX*
___
#### Components
React interfaces are composed of *components* that serve to do one thing: be rendered to the DOM (Document Object Model). These *components* are written in HTML then added to the DOM. *Components* tend to be transcribed in two forms: class or functional.

```js
class TestObject extends React.Component{
    render(){
        return <h1>Hello!</h1>
    }
}
``` 

The largest difference in the two forms is that class can hold something called "state." State can be thought of as a parameter. This allows *components* to be dynamic. Functional *components* cannot hold state.

```js
function testObject() {
    return <h1> Hello! </h1>
}
```
___
#### State
*State* refers to an object to its class component. It can be loaded by a user or a API key. *State* is passed around through "props." Think of this framework as a hierarchy. A component must be high on the totem pole in order to skip the extra steps to pass its props. 

*State* can be only passed down, NEVER passed lateral. Whenever a *state* is changed, the component and its kids will changed also. 

```js
class TestObject extends React.Component {
    constructor(props) {
       super(props);
       this.state = {
          isTrue: false,
       };
    }
 }
```
___
#### Props

*Props* are passed between components in order to create a dynamic. *Props* are the objects give to each component by its elder. Using *props*, we can ender dynamic & non-stagnant data.

The reason for a lot of children & parents is the ability to attack the entire problem in small batches. We want to use small components. If we uses one large component, the readability would be atrocious.  Especially if we wanted to render a certain portion with certain *props*. We would need to re-render the ENTIRE component for just that small portion! 

```js
const customerData = props => {
    return (
       <div>
          <p>Name: {props.fullName}</p>
          <p>age: {props.age}</p>
          <p>email: {props.email}</p>
       </div>
    );
 };
```
___
#### JSX
 *JSX* is considered a wing of JavaScript. *JSX* tells us what the user interface will resemble. This gives the control to create user interfaces and logic within the framework of React. When we implement this, we can embed Javascript thinking straight into our UI.

```js
const testName = 'Larry';
const testObj = {
    height: `5'10"`,
    age: '25',
    sign: 'scorpio'
}
const element = <h1>My name is {name} and my stats: {testObj}</h1>; 
```
___
#### Conclusion

To summarize, React is an incredibly useful framework. It allows us to create components in small doses to conquer a large problem. Using props from an "passed-down" type hierarchy, we are able to allow different type attributes to interweave from one file to another. React, all-in-all, forms a seamless way to interconnect properties!

Hopefully this small blog has helped you to better understand react and its workings. Stay tuned to the blog regarding the updated: React Hooks.