I got Started with react JS

When creating a react project we must be aware of some important files we can find in default at the beginning of the project.

We can find a folder called source folder which contains some important files named “index.js”, “app.js” and their CSS files. In default the source folder it contains some important files named “index.js”, “app.js” and their CSS files. Out of the source folder the “index.html” file.

Index.html is the main file of the react which is responsible for displaying the application in the browser. But we don’t do any changes for it. All the changes are committed via the files in the source folder.

Let’s now consider how to start coding in react,

In the source folder, in “index.js” file we can find the following codes,

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import App from ‘./App’;
import reportWebVitals from ‘./reportWebVitals’;
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById(‘root’)
);
reportWebVitals();

“react” & “react-dom” are some basic libraries of react.

The “react” library contains most of the basic features of react, and the “react-dom” library is responsible for carrying the features and changes we added in the source folder to the “index.html” file.

Here this is responsible for making the link between the “index.html” and “index.js” through the id “root”.

In the “index.html” file we can find a code segment as follows,

<div id=”root”></div>

In the “index.js” file as mentioned above we can find this code segment.

document.getElementById(‘root’)

Here the “document” refers to the App.js file. Simply the process happening here is that capture the modifications in the document which is referred by the Id “root” (The App.js file) and pass it to the place where the id name “root” is found. (You will find it at the index.html file). So, the changes done in the “App.js” file is captured by the “index.html” with the help of the id.

We can replace or add any JS file here in the form of <FileName />.

JSX

Another considerable thing we found in react is JSX. JSX stands for JavaScript XML. In react we use a virtual DOM. This virtual DOM is handled by JSX.

JSX converts HTML tags into react elements and allows us to write them in JavaScript, and place them in the DOM without any createElement() or appendChild() method.

Eg:

function App() {  return (
<div className=”App”>
<header className=”App-header”>
<img src={logo} className=”App-logo” alt=”logo” />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className=”App-link”
href=”https://reactjs.org"
target=”_blank”
rel=”noopener noreferrer”
>
Learn React
</a>
</header>
</div>
);
}
export default App;

The above cord is from JSX.

At the end of the code the file must be exported, so only if that we can import it in another file.

There are some points to be highlighted when we coding inside a function. First all the components should be wrapped inside a one component and next the component should be created in the same name of the file or otherwise it creates an error.

Eg: Following code gives us an error because all the elements are not wrapped within a one component.

function App() {
return (
<div className=”App”>
</div>
<div></div>
);
}

Function based components and Class based components

What is a component?

When creating a web application, the parts of the web page can be created as a collection of individual parts rather than as a one single unit. This each separate part is called a component.

We can create components in 2 ways in react.

1.) Function based components

We can create a function-based component as follows

function FuncComponent() {
return (
<div>
<div> This is a function based component </div>
</div>
);
}

A function can also be declared as follows,

const FuncComponent = () => {
return (
<div>
<div> This is a function based component </div>
</div>
)
}

2.) Class based components

To declare a class-based component we can use the following way,

import { Component } from ‘react’;class ClzComponent extends Component {
render() {
return(
<div>
<div> This is a class based component </div>
</div>
)
}
}
export default ClzComponent;

The class components need to be extended by the class called component. The component class should also be imported from react.

import { Component } from ‘react’;

Also the code must be rendered using the render() function before returning it.

By calling the component name in the “index.js” file the relevant component can be displayed.

ReactDOM.render(
<React.StrictMode>
<FuncComponent />
<ClzComponent />
</React.StrictMode>,
document.getElementById(‘root’)
);

A functional component is just a JavaScript function that accepts props as an argument and returns a react element. But in a class component you must the extend the class “Component” from react and create a render function before returns a react element.

Compile React

To run a react web application, give the command in the terminal

npm start

then your web application will display in your browser creating a web server.

Hooks

Hooks is a special feature that let us to use state and other react features without classes. We can implement a simple code with high efficiency.

Lifecycle hooks

Let’s consider lifecycle hooks as an example to identify hooks. We usually use lifecycle hooks with the class-based components.

Let’s see how to create a lifecycle hook to increase a counter when a button is clicked.

import React, {Component} from ‘react’;class ClzComponent extends Component {   state = {
counter : 0
}
submit = () => {
this.setState ({
counter: this.state.counter+1
})
}
render() {
return(
<div>
{this.state.counter}
<br></br>
<input type=”button” onClick={this.submit} value = “Submit”/>
</div>
);
}
}

The “state” means the current state of the program which is the value of the counter is “0”. Then we create a function called “submit” which is called when clicked the button, which its purpose is to increase the counter value when the button is clicked.

Most commonly a hook we use with function-based components a is “use state” hook. Let’s consider the use of “use state” hooks in order to do the same thing as in classes.

import React, {useState} from ‘react’;const App = () => {
const [stateCounter, setCounter] = useState ({
counter : 0
})
state = {
counter : 0
}
const submit = () => {
setCounter ({
counter : statecounter.counter + 1
})
}
return(
<div>
<br/>
<input type=”button” onClick={this.submit} value = “Submit”/>
</div>
);
}
export default App;

Props

“Props” stands for properties. Props are arguments passed into react components.

Simply it is like using a function for print something in programming.

Eg: In python,

def function (text):
print (text)
function(“hello”)

Here when called the function with the value “hello” the hello will be printed as the output. What props do is very similar to this.

When considering a function-based components the props can be used as follows.

In the component.js file you can create a prop as

const FuncComponent = (props) => {
//Code to be executed
<p>This is the sent props: {props.name}</p>
}

In the App.js file the component to passed via the prop should be given as follows.

function App () {
return (
<div className=”TheApp”>
<ClzComponent name=”This is a Function based component”/>
</div>
)
}

The browser will display the quote “This is a Function based component”. Props are passed to components via HTML attributes.

But in the class-based components there is no way to accept the props. How ever if there is a prop is passed to a class component, we can see it by using the code segment.

Unlike in functional components we must add the “this” key word.

<p>This is the sent props: {this.props.name}</p>

inside the class component the code looks like follows,

class ClzComponent extends Component {
render() {
return(
<div>
//Other Codes
<p>This is the sent props: {this.props.name}</p>
</div>
)
}
}

Then call the prop in the App.js in the App.js file.

function App () {
return (
<div className=”TheApp”>
<FunctComponent name=”This is a Function based component”/>
<ClzComponent name=”This is a Class based component”/>
</div>
)
}

Relevant to the above code the browser will display the two quotes

“This is a Function based component”.

“This is a Class based component”.

Styling in React

There are many ways for react styling. Out of them mainly we can consider.

1. CSS for react

2. React Bootstrap

1. CSS for react

CSS styling is quite similar to the styling in HTML. We can create a CSS file and add style to the web site via using the class names and IDs

To add the CSS to the web page you must add first import the relevant CSS file to the JS file

import ‘./App.css’;

Then add the class name or the id to the relevant tag

<h1 className=”topic”>Welcome to React</h1>

And in the CSS file add the styling as needed.

eg:

.topic {
color: red;
text-align: center;
}

According to the above styling you must see the quote “Welcome to react” will be appeared in the center of the page in red color.

We also can use inline CSS as the need

<h1 style={{color : ‘red’ }}>Welcome to React</h1>

Another way to use inline CSS is,

const styles = {
color:”green”
}
class clzComponent extends Component {
render() {
return(
<div>
<h1 style={styles}>Welcome to React</h1>
</div>
)
}

2. Bootstrap for React

For use react bootstrap we must install a package for it.

we Can install it by the following command in the terminal

npm i — save react-bootstrap bootstrap

Then we must import the bootstrap package. So in the index.js file

import’../node_modules/bootstrap/dist/css/bootstrap.min.css’

Now we can use bootstrap in the project.

As an example to add a button,

import { Button } from ‘react-bootstrap’;class ClzComponent extends Component {
render() {
return(
<div>
<button>Submit</button>
</div>
)
}
}

Make sure you import the component to the file.

We can find the relevant bootstrap codes for the components in

https://react-bootstrap.github.io/

Routing

For routing in react we must install two packages “React router” and “React router DOM” packages.

Install the packages as,

npm i react-routernpm i react-router-dom

After in the App.js file we must import some tags from the “react-router-dom”

import {BrowserRouter, Route} from “react-router-dom”;

Let’s take we have to navigate in to two pages called “Homepage” and “Loginpage”.

So, in the navigation page we can create the links for the pages using the link tag imported from the router-dom.

import {Link} from “react-router-dom”;  const NaveBar = () => {
return (
<div>
<Link to = “/Loginpage” >Loginpage </Link>
<Link to = “/Homepage” >Homepage </Link>
</div>
);
}

After in the App.js file, the paths for the relevant pages are given as components inside the “BrowserRouter” tag and the path for the file should be given.import Homepage from “./Components/Homepage”;

import Loginpage from “./Components/Loginpage”;  function App() {
return (
<Router>
<Route exact path=”/Loginpage” component={Loginpage}/>
<Route exact path=”/HomePage” component={Homepage}/>
</Router>
);
}

Here using “exact” for define the path is that commanding the browser to load only the exact page. Or other wise all the components will be loaded at once.

Now when you clicked the relevant name in the navigation bar. You will be directed to the selected page. The point using routing is that the page navigations are done without refreshing the page unlike when used “href”.

Here I was discussing only some very basics of how to use react. There can be much more ways of using the concepts such as hooks and routing etc. We can refer to the official document of react for further clarifications.

--

--

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