React: a simple Introduction

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.

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.

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.

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!

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.

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.