After trudging through two whole weeks of JavaScript at my coding bootcamp, I came into contact with one of the most amazing frameworks of JavaScript to date. Reactjs is a framework that instantly delivers you an interactive webpage with very little content editing. Reactjs makes a clear distinction between content and functionality with the render function in the App.js taking care of what will be seen on the main page, while each Javascript module (known as a component in React) takes care of the functionality the web page requires.

The secret sauce to the instant content lies within the JSON (JavaScript Object Notation) file, which is a text file whose notation and overall format are similar to written JavaScript except much simpler structures. These structures are either names or value pairs consolidating into either an object, array, or a struct. The values these structures take can be a string, Boolean, array or another object. The ambiguity of a JSON file makes it palatable for many programming languages. The JSON file will either be stored locally, or fetched via API from a remote server. JSON serves no functionality, but only to provide quick content without getting messy in some HTML.

JSON only accepts these values

Within your App.js file, you will call components and import components in <html> tags, they MUST be nested within a <div> or <section> tag. On a sample page, you will see the basic pattern followed by React. First at the top is your imports, a very familiar practice in many programming languages, then your Class which acts as the mainline logic, tightly defining all of your JavaScript. Finally, your page ends with the render function, which defines how the data will be displayed. This pattern of imports, class, and render is what every component in Reactjs makes up.

Basic structure of every Reactjs component

When dealing with data, Reactjs objects are defined specifically with the keyword state. State is a foundational building block to Reactjs. Every declaration of state is an instance of the Class predefined for each component. When the data within state is manipulated, setState declares a new instance for the state and its new values. This is normal because the data only has a short lifecycle per render. To pass key values of the state from one component to the next, the receiving component becomes the child and the state is called props (short for properties).

Like Classes within other languages, your JavaScript functions will be defined within the class that is the component. It is made up a constructor for your state, but unlike other languages, there are special predefined functions called “lifecycle hooks” such as ComponentDidMount, specifically defined after the constructor to set an action to happen after a certain amount of time. Vice versa, is the ComponentWillUnmount, which calls an action after earlier mounted component ends its cycle being rendered.