React.JS Overview | For Absolute Beginners

What is React? | How it Works?

Basically React is a JavaScript Library. React helps you to create user-interface by component. If you like to code MVC pattern you can replace the view selection with react. React is used to build single-page applications & React allows us to create reusable UI components.

Whenever you changed something inside your component react understand (using Diff Algorithm) exactly where should be minimum changed, Work specifically with that location (using virtual DOM) Then (minimum render) that Component.

//React Structure Example:
const Book = () => {
    return (
        <h1>Hello World!</h1>
    )
}
export default Book
ReactDOM.render(<Book  />, document.getElementById('root'))

Setting Up React Environment | Run React Application.

Start working with react you must need npm environment and for npm environment, you need to install node.js application.

If you already installed the node.js application that you can install react application boilerplate on you pc by the command given bellow:

npx create-react-app myFirstReactApp

The create-react-app command will setup everything you need now it’s time to run the application. Run the application by the command given bellow:

npm start

Should Learn Basic ES6

React Uses ES6 Pattern, you should be familiar with most commonly used es6 elements like.

Export | Import

To make objects, functions, classes or variables in any file & export them. When you need those objects, function, or classes importing them where needed in other files.

//Export Function
const Book = () => {
    return (
        <h1>Hello World!</h1>
    )
}
export default Book
//Import Function & Work on it
import Book from 'Book.js'
Use this function anywhere you want....

Arrow Function

Arrow function makes our regular function shorter & smarter.

// Basic Arrow Function
hello = () => {
  return "Pro Nazmul!";
}
//Arrow Function Return Value By Default 
hello = () => "I a Arrow Fucntion Data Default Return!"
//Arrow Function Single Parameters Without Parentheses
hello = name => "My Name is" + name

What is JSX?

JSX stands for JavaScript XML, JSX allows you to write HTML in react.

// JSX Example:
const jsxElement = <h1>I am programmer Nazmul!</h1>
ReactDOM.render(jsxElement, document.getElementById('root'))
// Without JSX Example:
const jsxElement = React.createElement('h1', {}, 'I am programmer Nazmul!')
ReactDOM.render(jsxElement, document.getElementById('root'))

ReactDOM.Rander()

JSX JavaScript XML helps to write HTML code in JavaScript & ReactDOM.Rander() makes JSX HTML inside the specified HTML element.

// ReactDOM.Rander() Example:
const jsxElement = <h1>I am programmer Nazmul!</h1>
ReactDOM.render(jsxElement, document.getElementById('root'))

React Component

React Component moto is: Similar in look Different in data

Components are reusable by a block of code. React divides UI into a number of small components. There are two types of component Functional Component & Class Component.

Functional Component:

//Example Functional Component: 
const Book = () => {
    return (
        <h1>Hello World!</h1>
    )
}
export default Book

Class Component:

//Example Class Component
class Car extends React.Component {
  constructor() {
    super()
    this.state = {color: "red"}
  }
  render() {
    return <h2>I am a {this.state.color} Car!</h2>
  }
}

Props in React

Props is a reserved keyword in react. Props used to pass data from one component to another component ( parent to child Component). Receive Props value like function parameter.

// Use of Props in a Class Component
<About name="ProNazmul" />
class About extends React.Component {
  render() {
    return <h2> My Name is {this.props.name}!</h2>;
  }
}
// Use of Props in a Functional Component
<About name="ProNazmul" />
const About = (props) => {
    return (
        <h1>My name is {props.name}</h1>
    )
}
export default About