Introduction to React - Key Features, Building blocks, and Local Environment Setup
At a high level, React (also knows as react.js or react js) is a new entrant in JavaScript library space which focuses on component based architectural model. It is developed at Facebook in 2011. It has grown in popularity because of its performance oriented nature, small learning curve and flexibility it provides to name a few.
Every react app is a tree of components. All these components are independent, isolated and reusable when tied together, builds a complex application.
- Key Features
- Flexibility to plug with other libraries, frameworks and easy maintenance
- Reusing existing components across applications by exporting the components as library or as a npm-module
- Great performance, and supports Server Side Rendering & Isomorphic JavaScript
- SPA design principle at the core
- Search Engine Optimization (SEO) friendly
- Has useful developer toolset and extensions
- Supports rapid application development
- Short learning curve
- Strong developer community
- Ease of template designing through JSX
- Its declarative in nature, meaning you only tell react how a component should look like without worrying about DOM manipulations, model/states of other components etc. React will take care of that for you!
- React vs Angular
- Angular is one of the widely used frameworks and has evolved from AngularJS to Angular. There are few notable differences between React and Angular though.
- Angular supports 2-way data binding, where React is based on flux architecture and supports Uni-directional data flow
- Angular has dependency on DOM for execution flow, where React handles that internally for you!
- Angular has steep learning curve in comparison to React.
- React offers better mobile cross-platform framework in comparison with Angular.
- React can be used with or without Typescript. Can be used with vanilla JavaScript (relief for the purists!)
- Supports functional as well as class components.
- Building blocks of React Application
- Components
- React application is a tree of components
- Reusable pieces of code, template
- Virtual DOM
- In order to render the UI on the browser, react uses a pattern called as virtual DOM
- Virtual DOM is an concept which is implemented by React in JavaScript on top of browser APIs
- Its an in-memory representation of DOM and synced with actual DOM whenever there is a need of update/re-render
- This allows react to update specific component (tree) without re-rendering entire DOM/web page
- State & props
- Models in react which hold local component state information
- props are inbuilt react objects which works as a messaging service, passing data between components in the same tree
- As react follows unidirectional data flow, sharing data between siblings is permitted through moving state to nearest ancestor component. This is called as Lifting State Up.
- Lifecycle Methods
- Every component in react follows a specific lifecycle
- Lifecycle methods provides methods to get in the lifecycle of an event and make necessary changes
- JavaScript XML (JSX)
- JSX is a technology used specifically by react to write HTML templates inside JavaScript code
- Its a wrapper created on top of your JavaScript and HTML keywords, extending their attributes, properties
- This encourages easy to write template and rendering logic
- Babel is a transpiler which converts the JSX code into code understood by browsers
- Components
- Every react application is made of several interlinked components
- All these components exhibit a parent-child relationship based on their use
- Every react app will have one root component, which will be starting point of the tree
- Every component will have state and access to react object called as props
- props are inbuilt react objects which works as a messaging service, passing data between components in the same tree
- React supports functional (representational/dumb) and class components.
- Setting up React development environment locally
- Pre-requisites
- Node.js app (download from official site based on the platform or preference)
- Any IDE which you are comfortable with! I personally recommend Visual Studio Code, its open source and has tons of extensions and features (official download based on you platform)
- There are 2 ways to setup react development environment locally:
- using create-react-app npm module (recommended way)
npm install --save-dev create-react-app
- this takes care of all the dependencies and their configuration
- Create a new project
create-react-app my-first-app
- And you are set!
- Manually setting up Webpack, Babel on your machine
- Flexibility to plug with other libraries, frameworks and easy maintenance
- Reusing existing components across applications by exporting the components as library or as a npm-module
- Great performance, and supports Server Side Rendering & Isomorphic JavaScript
- SPA design principle at the core
- Search Engine Optimization (SEO) friendly
- Has useful developer toolset and extensions
- Supports rapid application development
- Short learning curve
- Strong developer community
- Ease of template designing through JSX
- Its declarative in nature, meaning you only tell react how a component should look like without worrying about DOM manipulations, model/states of other components etc. React will take care of that for you!
- React vs Angular
- Angular is one of the widely used frameworks and has evolved from AngularJS to Angular. There are few notable differences between React and Angular though.
- Angular supports 2-way data binding, where React is based on flux architecture and supports Uni-directional data flow
- Angular has dependency on DOM for execution flow, where React handles that internally for you!
- Angular has steep learning curve in comparison to React.
- React offers better mobile cross-platform framework in comparison with Angular.
- React can be used with or without Typescript. Can be used with vanilla JavaScript (relief for the purists!)
- Supports functional as well as class components.
- Building blocks of React Application
- Components
- React application is a tree of components
- Reusable pieces of code, template
- Virtual DOM
- In order to render the UI on the browser, react uses a pattern called as virtual DOM
- Virtual DOM is an concept which is implemented by React in JavaScript on top of browser APIs
- Its an in-memory representation of DOM and synced with actual DOM whenever there is a need of update/re-render
- This allows react to update specific component (tree) without re-rendering entire DOM/web page
- State & props
- Models in react which hold local component state information
- props are inbuilt react objects which works as a messaging service, passing data between components in the same tree
- As react follows unidirectional data flow, sharing data between siblings is permitted through moving state to nearest ancestor component. This is called as Lifting State Up.
- Lifecycle Methods
- Every component in react follows a specific lifecycle
- Lifecycle methods provides methods to get in the lifecycle of an event and make necessary changes
- JavaScript XML (JSX)
- JSX is a technology used specifically by react to write HTML templates inside JavaScript code
- Its a wrapper created on top of your JavaScript and HTML keywords, extending their attributes, properties
- This encourages easy to write template and rendering logic
- Babel is a transpiler which converts the JSX code into code understood by browsers
- Components
- Every react application is made of several interlinked components
- All these components exhibit a parent-child relationship based on their use
- Every react app will have one root component, which will be starting point of the tree
- Every component will have state and access to react object called as props
- props are inbuilt react objects which works as a messaging service, passing data between components in the same tree
- React supports functional (representational/dumb) and class components.
- Setting up React development environment locally
- Pre-requisites
- Node.js app (download from official site based on the platform or preference)
- Any IDE which you are comfortable with! I personally recommend Visual Studio Code, its open source and has tons of extensions and features (official download based on you platform)
- There are 2 ways to setup react development environment locally:
- using create-react-app npm module (recommended way)
npm install --save-dev create-react-app- this takes care of all the dependencies and their configuration
- Create a new project
- create-react-app my-first-app
- And you are set!
- Manually setting up Webpack, Babel on your machine
Comments
Post a Comment