Would you like to learn React as rapidly as possible?

In order to offer you a thorough review of every React topic you'll need to understand in 2022, I've put together a really handy cheatsheet. If you liked it, wait for my next article. The good news is that it is beginner-friendly and I covered a really simple concept.

The Game begins here!

Create a React App

Create React App provides a pleasant learning environment for React and is the easiest approach to begin constructing a new single-page application in React.

// Create a new app
npx create-react-app hello-world

// Run the created app
cd hello-world
npm start

// http://localhost:3000

Components

Components are self-contained and reusable pieces of code. They perform the same job as JavaScript functions, except they act independently and return pseudo_HTML syntex. Components are classified into two types: class components and function components. This course will focus on function components.

Functional Component

There is no need to import. React from the word react (since React 17).JSX must be returned if the first letter is uppercase.

// React Component
function App(){
  return <h1>Hey, I'm Functional Component</h1>
} 

export default App;

Two ways to import Component

Separate files will be created for each component. Each component must be exported and then imported.

function Card(){
    return <>
<div className="card">
<h1>I'm Card.. </h1>
</div>
</>
}
export default Card;

This component may be imported in the following ways; you can also alter its name during importing.

import ICard from './Card'

function App(){
    return <ICard/>
}

or name export...

export const Card = () => {
    return <>
<div className="card">
<h1>I'm Card.. </h1>
</div>
</>
}
export default Card

This component may then be imported.

import {Card} from './Card'

function App(){
    return <Card/>
}

Nested Components

A component that is nested is a subcomponent of the component it contains. Relative to that parent, the child component is positioned and shown.

// Arrow function shorthand component
const User = () => <h1>Khansa</h1>

// Arrow function component
const Message = () => {
    return <h1>Hello!</h1>
}

// Function component
function App(){
  return (
      <>
          <Message />
          <User />
      </>
  )
}

Some JSX Rules Are here

It is a JavaScript syntactic extension. We advocate utilising it alongside React to specify how the user interface should appear.

parent element

Return just one element (only one parent element)

// not valid
return <h1>Hello world</h1><h2>Hi!</h2>

// valid with React fragment. 
return (
   <React.Fragment>
        <h1>Hello World</h1>
        <h2>Hi!</h2>
    </React.Fragment>
)

// valid with fragment as Well. 
return (
    <>
        <h1>Hello World</h1>
        <h2>Hi!</h2>
    </>
)

// Noted the parenthesis for multi-line formatting

Instead of class, use className. Explanation: The only reason it uses className instead of the class is that class is a reserved term in JavaScript, and since we use JSX in React, which is an extension of JavaScript, we must use className instead of the class attribute. Also, all attribute names must be in camelCase.

// not valid
return (
    <div class="card">
        I'm Card..
    </div>
)

// valid
return (
    <div className="card">
         I'm Card..
    </div>
)

Close every element is important as well..

return (
    <img src="image.jpg" />
    <input type="text" placeholder="write your name..." />
)

JSX Elements

Like standard HTML components, React elements are written in the same way. Any legitimate HTML element may be written in React.

// valid
const input = <input type="text" />
// valid as well
<h1>I am Header</h1>
<p>I am paragraph </p>
<button>I am button</button>

JSX Functions

All of your primitives may be passed in JSX functions.

// JSX Functions
const name = "khansa";
const age = 22;
const isHuman = true;
return (
<h1>My name is {name}. I am {age} year's old.</h1>
);

JSX Conditional rendering

By utilising an if statement alone:

import React from "react";
export default function Weather(props) {
  if (props.temperature >= 20) {
    return (
      <p>
        It is {props.temperature}°C (Warm) in {props.city}
      </p>
    );
  } else {
    return (
      <p>
        It is {props.temperature}°C in {props.city}
      </p>
    );
  }
}

by utilising a Ternary Operator

const name = "khansa";
const age = 22;
const isHuman = true;
return (
{ isHuman ? <h1>My name is {name}. I am {age} year's old.</h1> : <p>I'm not here</p>}
);

By utilising a Truth value or && operator

const name = "khansa";
const age = 22;
const isHuman = true;
return (
{ isHuman && <h1>My name is {name}. I am {age} year's old.</h1> || <p>I'm not here</p>}
);

By utilising an || operator.

const name = "khansa";
const age = 22;
const isHuman = false;
return (
{ isHuman || <h1>My name is {name}. I am {age} year's old.</h1> || <p>I'm not here</p>}
);

Properties

The component's input values come from properties. When rendering the component and setting the state, they are utilised (discussed shortly). The component's properties should be regarded as immutable after they have been instantiated.

<User firstName="Khansa" lastName="Mueen" age={22} pro={true} />

Default Props value

The value attribute on form elements will take precedence over the value in the DOM during the React rendering process. You frequently want React to specify the initial value for an uncontrolled component, but let future updates be uncontrolled.

const User = ({name, age, children}) => {
    return (
        <h1>Name: {name} Age: {age}</h1>
        <p>{children}</p>
    )
}

User.defaultProps = {
    name: 'Khansa',
    age: 22,
}

List Using Spread Operator

export const SpreadData = () => {
 const users =   ["khansa", "Mueen", "Arshad"]

 const data = [...users, "Moiz"]

  return <div>Users data is: {data}</div>;
};

List Using Map

On websites, menus are typically displayed using lists, which are used to display facts in an organised fashion. Lists in React can be built similarly to how lists are created in JavaScript.

const users = [
  {id: 1, name: 'khansa', age: 22},
  {id: 2, name: 'Arshad', age: 33},
  {id: 3, name: 'Mueen', age: 47},
]
function App(){
    return (
        users.map(person => {
            return <Person name={person.name} age={person.age}/>
        })
    )
} 

const Person = (props) => {
  return (
      <h1>Name: {props.name}, Age: {props.age}</h1>
  )
}

Props object destructuring

import React from "react"
import Card from './component/Card'

function App(){
    return(
    <div className = "App">
    <Card title="React Course" duration = "1 day"/>
    </div>
    );
}
export default App;

Conclusion

These are really basic concepts that I have covered for newcomers and I must finish the following section shortly. For additional updates, ping me on Twitter.

Technology Trends