ReactJS 1: declarative code, imperative code, component, babel, JSX

What is React?

React is a JavaScript library. It’s declarative, efficient, and flexible JS library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. (excerpt from reactjs.org)

How are Declarative and Imperative programming different?

Declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow. It’s about “WHAT” you do with the code. Let’s say you are at a grocery store, it’s like simply ordering what you want, “egg and cheese sandwich”. This type of programming results in less direct control.

Imperative programming is about “HOW” and “WHERE” you list detail step of a program. Basically you are buying all the ingredients for the sandwich, such as sourdough bread from la Bicyclette bakery, pink Himalayan salt, organic letters from the farmers market, tomatoes that your friend grew, eggs from upstate farm from the chicken name, Miho, cheese from Wisconsin farm, home made mustard from your cousin. Gather all the ingredients, slice bread in 1 cm, leave the butter on the room temperature for 1 hour, make sunny side egg, put letters on the bread, slice tomatoes, spread mustard, and make the sandwich for yourself, from the scratch, knowing how and where.

why is this important in react? — React will allow us to do declarative code.

DECLARATIVE CODE : “what”
IMPERATIVE CODE : “how” “where”

What is component in React?

Components are broken down DOM that are independent and reusable bits of code that are in isolation on the User Interface screen. In JS, it’s like class or function because components accept arbitrary inputs, called “PROPS” and return React element, JSX, describing what should appear on the screen via render function.

react component diagram
react hierarchy
  1. Class component (ES6)
  • define a render method that returns JSX.
  • use this.props to access props.
class component

2.function component

returns JSX

function component

What does Babel do in react?

Babel is a JavaScript compiler that converts JSX(html like JS syntax ExtendScript) to the standard JS(ex5)

<script type=”text/babel”>

What are differences between JSX and HTML?

JSX is JS XML(JavaScript eXtensible Markup Language), an extension of JS that allows writing HTML in React. React lets us code declaratively using JSX representing DOM elements.

HTML(HyperText Markup Language) is a standard markup language for documents designed for the web browser.

  1. JSX uses declarative style of programming.(whereas JS is considered imperative)

2. JSX is not a String.

3. JSX is the return value of the render() method.

4. JSX can include JS(but not all JS statements) If you want to add JS, you need to use the curly braces, {}.

JSX code lines cannot be adjacent to each other.

Resources for react study:

https://github.com/sudheerj/reactjs-interview-questions#what-is-react

--

--

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