React Tutorial A Step-by-Step Guide(2)

Folder Structure of React Application

React Folder Structure
  • package.json File — This contains dependencies and the scripts which we need in the project.
  • gitignore File — Maintain git related files
  • README.md File
  • node_modules — This is the folder in which all the dependencies are installed. It is generated when you run the create-react-app command or when you run the npm install.
  • public Folder — This folder contains 3 files and the only special file which we need is the index.html file. This is the only HTML file you are going to have in your application. We are building single-page applications. The view might dynamically change in the browser. But application serves this HTML file. You are not going to add any code to this file. Maybe some changes in the head tag. But not in the body tag. You want React to control the UI. For that, we have one “div tag” called “root”.
<div id="root"></div>
  • Source Folder (src)— Mostly you will be working with this folder during development. The starting point of the React application is index.js. In the index.js we specified the root component which is the App Component and the DOM element which will be controlled by React. The DOM element in our code is an element with an ID of root. This is the element in our index.html file. We called this root element in index.html the root DOM node because everything inside it controls by React.

What is a React Component?

  • Root (App) component — which contains whole components
  • Header Component
  • SideNav Component
  • Main Content Component
  • Footer Component

React Nesting Components

Component Types

  • Stateless Functional Component — JavaScript Functions. It returns HTML which explains the UI.
  • Stateful Class Component — Regular ES6 classes that extend the Component class in the react library. They must contain a render method that returns HTML.

Functional Components

import React from "react";

function Hello() {
return <h1>
Hello Kasun Dissanayake
</h1>
}
export default Hello; //Hello.js 
import Hello from "./components/Hello"; //App.js
function App() {
return (
<div className="App">
<Hello />
</div>
);
}
Functional Component show in the Browser
  • Arrow functions don’t have their own bindings to this or super, and should not be used as methods.
  • Arrow functions don’t have access to the new.target keyword.
  • Arrow functions aren’t suitable for call, apply and bind methods, which generally rely on establishing a scope.
  • Arrow functions cannot be used as constructors.
  • Arrow functions cannot use yield, within its body.
const Hello = () => <h1> Hello Kasun Dissanayake</h1>

Class Components

  • Import React
  • Import “Component” Class from React
import React, {Component} from "react";
  • Extends the component class from React.
  • The class has to implement a render method that will return null or some HTML.
class Welcome extends Component {
render() {
return (
<div>
Welcome Kasun Dissanayake
</div>
);
}
}
export default Welcome; //Welcome.js
import Welcome from "./components/Welcome"; //App.js
//inside the App.js function add Welcome component
function App() {
return (
<div className="App">
<Hello />
<Welcome />
</div>
);
}

Functional Components vs Class components

  • Simple functions accepting props and returning the function declaration.
  • Use functional components as much as possible.
  • Absence of “this” keyword.
  • Solution without having a state — If you have a number of components each having its own state maintenance and debugging your application is kind of difficult.
  • Mainly responsible for the User Interface.
  • Also known as Stateless/ Dumb/ Presentational components
  • More feature-rich components.
  • Can also maintain their own private data called States.
  • Can contain complicated UI logic.
  • Provide lifecycle hooks.
  • Also known as Stateful/ Smart/ Container components.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kasun Dissanayake

Kasun Dissanayake

Software Engineer at IFS R & D International (Pvt) Ltd || Former Software Engineer at Pearson Lanka || Former Associate Software Engineer at hSenid Mobile