10 Things you should know about react

1. What is React?

React is a popular javascript library. Day by day its popularity is increasing. Because it shortens the time and increases the efficiency of code. It creates a pipeline for the frontend only. But you can use it with the backend easily.

2. Create React app:

If you want to do a project with react you must create a react app. For this, you must operate some command. For this, you must have npm and the latest node version on your computer. Then you will go to your drive and run this command by command prompt or vs code.

npx create-react-app my-app
cd my-app
npm start

Here my-app is your project folder. You can change your project folder name as your wish.

3. Introducing JSX:

Actually, react doesn’t work as plain javascript. It uses some different but interesting way to use javascript. Which called JSX.

JSX means javascript XML. It allows us to write HTML in react. It also allows us to add any type of components in javascript without createElement() and appendChild()

Again the syntax of JSX is different than simple HTML.Such as

Input:

import React from 'react';
import ReactDOM from 'react-dom';

const myelement = <h1>I Love JSX!</h1>;

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

Output:

I Love JSX!

4. Components :

Components are like javascript functions that return HTML elements.There are two types of components in react. Class components and function components.

Create a Class component called Car

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Create a Function component called Car

function Car() {
  return <h2>Hi, I am also a Car!</h2>;
}

5. Props:

Props are that which used to pass data through components. It works like function arguments in JavaScript and attributes in HTML.

const myelement = <Car brand="Ford" />;

Here <Car/> is a component which is called in myelement. And an argument brand has been passed through <Car/> component. Hence this argument will be accessed in the <Car /> component.

6. React Events:

Just like javascript events react has many events like onClick, mouseOver etc. The main difference between javascript events and react events is their syntax. In javascript then event onclick is right but in react it is written in camelCase. like onClick.

import React from 'react';
import ReactDOM from 'react-dom';

function shoot() {
  alert("Great Shot!");
}

const myelement = (
  <button onClick={shoot}>Take the shot!</button>
);


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

7. React Style :

There are many ways to include CSS in react components.

** The first one is inline CSS which will be written like an object. Such as -

<h1 style={{color: "red"}}>Hello Style!</h1>

** The second method is to create a style object in the main function.

class MyHeader extends React.Component {
  render() {
    const mystyle = {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10px",
      fontFamily: "Arial"
    };
    return (
      <div>
      <h1 style={mystyle}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

** The third method is to create a style.css file in the same folder and access it. Such as -

import “./style.css”;

8. React SASS :

It is a CSS preprocessor. Sass files are executed on the server and send CSS to the browser.If you use the create-react-app in your project, you can easily install and use Sass in your React projects.

Install Sass by running this command in your terminal:

C:\Users\Your Name>npm install node-sass

Now you are ready to include Sass files in your project!

Example:

$myColor: red;

h1 {
  color: $myColor;
}