10 React Basic Fundamentals Concept.

What is react.js?

React is a javascript library. We have some misconception about reactjs. We think reactjs is framework but it is. It is javascript library for fron-end development. It’s the popular front-end library in 2021. React is a most powerful fron-end library for develop complex web app in 2021. If we start to learn react in 2021 we need to know top 10 basic fundamental concept.

1.What is JSX?

You don’t worry to look this word JSX. It is just write HTML code inside javascript code. It is so easy to learn JSX. I think this the important thing and most powerful thing for us. Where we can write HTML and javascript together. Now I will some example JSX code that will help to understand what is it.

function formatName(user) {
return user.firstName + ' ' + user.lastName;
}

const user = {
firstName: 'Harper',
lastName: 'Perez'
};

const element = (
<h1>
Hello, {formatName(user)}! </h1>
);

ReactDOM.render(
element,
document.getElementById('root')
);

2. What is props?

You think what is it? What does this word means? Don’t worry I will explain you basic fundamental thing about the props. You can imagine that it is like a variable to pass the value to the other component. You should follow on that props you can pass only the child components. So what is moral of the story about props is. Props is use to pass a value to the other child components. I will give you some example about the props down below.

class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

it is a present component and you try to send the value on his resent child component. Look the example of how to receive the props value withe code.

function Welcome(props) {  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;ReactDOM.render(
element,
document.getElementById('root')
);

3. What is useState?

useState is a react hook component. You can say it is a temporary database. It is most powerful react hook. It make our thinking so easy. If we need to store something and we should pass to our other components then we can use this react hook. We can can store anything what we want inside this useSate react hook. Now I will give you some example as you can understand and you can also get a clear view about the useState react hook.

class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}

componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}

componentWillUnmount() {
clearInterval(this.timerID);
}

tick() { this.setState({ date: new Date() }); }
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}

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

Yeap this it. I hope you guys you understand what is.

4. Event Handeling.

This is most useful thing and make our developer life so easy. We can do anything what we want like after click the “button” we can see some behaviour in our web app. For more interactive our web app. Now i will give you some example for this event handeling. After that you can get some clear view and you will surprised how its’s cool.

function ActionLink() {
function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); }
return (
<a href="#" onClick={handleClick}> Click me
</a>
);
}

5. Conditional Rendering.

Now I talking about what is Conditional Rendering. It is most easy to understand to show something on display logically and also do something logically. So it can make our life so easy and we can do most powerful thing by using this Conditional Rendering method. Now I will give you some code example down below.

function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />;}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />, document.getElementById('root'));

6. Lists and Keys.

What is lists and keys? You don’t need to worry about it. In react when we store something inside of an array then we want to show something then we use map function it’s show on display as a single items. All the single items need a unique value for that we get the items easily. Now I will give you some example as you can understand easily. Look the down below.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}> {number}
</li>
);

7. React Forms

Guy’s you all of you hear you form. When we use form we can face many deficaltis but in react it make our work so easy. We handle many complex form by using react form. So I will give some example about react froms.

class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(event) { this.setState({value: event.target.value}); }
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}

render() {
return (
<form onSubmit={this.handleSubmit}> <label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} /> </label>
<input type="submit" value="Submit" />
</form>
);
}
}

7. Context API

Guy’s belive or not context API is most important and useful for a react developer. If you need a global verable then you should use context API. It will make you developing life so easy by using this on. Now I give you some example.

class App extends React.Component {
render() {
return (
<ThemeContext.Provider value="dark"> <Toolbar />
</ThemeContext.Provider>
);
}
}

// A component in the middle doesn't have to// pass the theme down explicitly anymore.function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}

class ThemedButton extends React.Component {

render() {
return <Button theme={this.context} />; }
}

8. useEffect

What is useEffect? Don’t it complex but I will try to describe it as easy as possible to explain. Wenh we need to fetch API the we can use it. We can save our data in our useState. I give example to get clear view.

import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);

// Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; });
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

9. API

Now I am taking about what is API. API is a data nothing else. We combine our all data and we make a link so that we can use and fetch the data for our personal uses. Now I give some example down below.

import React from 'react'

const Example = (props) => {
let [translation, setTranslation] = React.useState('') // state hook

React.useEffect(() => { // side effect hook
// call API with props.greeting parameter
setTranslation(response.data.translation)
}, [setTranslation])

return (
<h1>{translation}</h1> // use state in component
)
}

export default Example

10. useReducer

code:-

const initialState = {count: 0};

function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}

function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Getting Start with Vue Scheduler

Let’s learn ECMAScript 6 basics in simple terms!

Any Holy Grail for Web Components?

How to implement node express by typescript

Build a Creative Agency Website in 4 Steps

Validating `multipart/form-data` with Laravel Validation Rules with proper JSON data types

Iterator in ES6

Address Form Autocomplete with Vue 3 and Lob

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
Hb Hridoy

Hb Hridoy

More from Medium

Mastering ReactJS in Elegant Way: From Zero to Hero — Step 1

Let’s start Version Controlling and NoSQL

CREATE REACT APP : A SIMPLIFIED FOLDER STRUCTURE EXPLANATION FOR BEGINNERS.

Time and Piece-rate System for Remote Workers, Which Way to Go?