React basics every developer must know before hired

The common misconception is that React is framework but it is not. React is a popular JS library to build UI.

Let’s deep into the dive with React.

1. Create React App

To create react app
npx create-react-app react-app
command is required. And it will start the process of creating single page web application.

2. Directory view and Run the app
After creation of react app it will create a directory with the app name in the current directory.

react-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
 ├── App.css
 ├── App.js
 ├── App.test.js
 ├── index.css
 ├── index.js
 ├── logo.svg
 └── serviceWorker.js
 └── setupTests.js

With the ‘npm start’ command the app will be started and we will see the logo of React app by default.
Congratulation! You have made your own app. Let the journey begins.

3. Learn React

The detailed instructions about React can be found in the React documentation. Also there exists numerous blogs and videos on YouTube and several online platform. There also exists some professional course on Coursera and Udemy. One who wants learn React there exists huge options.

4. .js vs .jsx files in React

First of all .js and .jsx both of them are the extensions of React components. Basically, JS is the standard javascript, JSX is an HTML-like syntax that you can use with React to make it easier. The web browser does not understand .jsx or .js syntax. Whatever it is, it is ultimately JavaScript that runs inside the browser.

5. Components

The smaller block of a React application can be called as the Component. For example: the Header section can be called as one component, similarly the Contact section can also called as one component. To make the application development easy components are created and finally merged to the parent component.

6. props

props stands for properties which is a special keyword in React. It is being used for passing data from parent to the child. From the child component using this.props the data from parent component can be accessed.

7. Real/Actual DOM vs Virtual DOM

DOM means Document Object Model. It is basically an UI of an application for both XML and HTML documents. The DOM gets dynamically updated when the UI changed. Virtual DOM is the virtual representation of the Real DOM. As like as Real DOM it is also maintains a tree structure which have nodes.

8. event in React

An event is an action like a user pressing a key. clicking a mouse etc. In React the event name format should be in camelCase. Like onClick={handleClick}, where the event name handleClick is in camelCase format.

9. lists in React

With the regular JS we can create our lists in React. In React the lists are accessed through map() function.

Example:

const students = [Arif, Bablu, Camelia, Dalia];
const studentsName = () => {
 const single = students.map((name)) => <li key={name}>{name}</li>
 );
 return (
 <ul>{single}</ul>
 );
}

Here, in list a key should be used as an unique identifier. Otherwise it will give some warning as it is recommended in React.

10. Redux

Redux is an open-source JS library which commonly used with libraries like React or Angular to build UI. It is mostly used for application state management.