React Introduction

Photo by Ferenc Almasi on Unsplash

React is a JavaScript library developed for front-end management. It is a complete mixture of HTML,CSS and JS.

To create react projects, follow instructions mentioned on React’s official doc.

React is popular because it comes with in-built virtual DOM which puts lesser load on browser and also it is easy to learn. React uses JSX(JavaScript XML) for component creation.

To use React and it’s virtual DOM, the modules need to be imported in the following :

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

To render something using ReactDOM:

ReactDOM.render(<div><h1>Hello World</h1><p>Content</p></div>,
document.getElementById("root"));

NOTE: only single HTML tag is allowed in render function. Therefore, two tags were included inside one parent div tag.

To add JavaScript syntax within HTML tags in render() which uses JSX, { } are used. Example:

let content = "Hello, World";
...
ReactDOM.render(<h1>{content}</h1>, document.getElementById("root"));

NOTE: only expressions can be used inside curly braces. Statement can’t be added inside render(). Therefore conditions checking and iterations can’t be done directly inside render function.

Sample React project can be found here.

--

--

--

Learner. Observer. Interested in software development.

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

Recommended from Medium

Developer’s Guide to Unit Testing in Angular — Part 2 (Services, Pipes, Directives)

React.js Tutorial : How to implement a shuffle card game from scratch.

Converting file to base64 on Javascript client side

How to use async methods inside Redux actions using Redux-Thunk

Connecting to Ethereum wallet with Angular.

App Development Using React Native:

Developing a Kanban Board using react-dnd

Capture the flag: A Node.js web app vulnerability practice (part 1)

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
Akanksha Pardeshi

Akanksha Pardeshi

Learner. Observer. Interested in software development.

More from Medium

Introduction to React JS

Introduction to React.

React JS Bad Practices

React Hooks Basics