Class and Function based Components In React

In the last post, we talked about creating your first React application. Now let's take a deeper dive into the inner workings of react. The next step after opening up your project with "npm start" on your terminal is to similarly open the file in your code editor. You will immediately notice so many folders that indicate the dependencies that have been downloaded for your app to function properly.

Some of the more important folders include the 'public' folder which contains the 'index.html' file where all external stylesheets, CDN and the 'div' with the id of "root" are found. Another important folder is the 'node_modules' folder where important dependencies such as babel, react and react-dom are found. Lastly, we also have the 'src' folder. In the React community, it is common to practice to delete all the files found in the 'src' folder and replace them with a single 'index.js' file. This file will serve as the parent component within which all other child components are rendered.

What are React Components?

There is no official definition of what a component is, so let's explain with code. In react, a component may be 'class-based' i.e using the conventional javascript class syntax or 'function-based' using the ES6 javascript arrow function syntax. Now either of these may be used within your react app, however a common rule of thumb when deciding which to use is that the class components are preferred when you intend to write a lot of code as they are easier to maintain long term when compared to the function components.

Before creating any component, the first step is to import React and ReactDOM from the package folder by using the syntax:

  ```import React from 'react'```

  ```import ReactDOM from 'react-dom'```

CLASS BASED COMPONENTS

Within your 'index.js' file, it is common practice to name your parent component 'App'. Please note that components are usually named with the first letter capitalized.

The syntax is:

class App extends React.Component {
render(){
return (
<div>
App
</div>;
)
}
};

The 'extends' means that the newly created 'App' class component is basically a subclass of 'React.Component'. This is similar to the class and subclass syntax in vanilla javascript. When using this class syntax, it is important to include a 'render' method which returns a value or a nasty error message will be shown.

FUNCTION BASED COMPONENTS

This is similar to the arrow function syntax in ES6.

The syntax is:

const App = () => {
return (
<div>
App
</div>
)
};

Both Function and class based components serve very similar purposes with just a few differences here and there.

FINAL STEPS

Lastly, after creating our App component, we need to render it so that it would appear on our web page. The syntax is:

ReactDOM.render(<App />, document.getElementById('root');

After these, you have successfully created your first components in React☺️☺️