React Learning Guide, Introduction to React

Sajjad Hussain
Sep 16 · 5 min read
Image for post
Image for post

What is React

React IS A JAVA LIBRARY FOR BUILDING USER INTERFACES From React official website.In a narrow sense, React is a front-end UI development framework open sourced by Facebook. In a broad sense, React is not only the js framework itself, but also a complete front-end development ecosystem. This system includes:

React.js

ReactRenders: ReactDOM / ReactServer / ReactCanvas

Flux mode and its implementation (Redux, Fluxxor)

React open source components

React Native

GraphQl + Relay

Any technology is the same, the core of the technology itself is not too complicated, but there will be many dependent knowledge points around this subject to form a systematic technology stack. So when we talk about learning React, we are not just learning React itself, but learning this development system and the entire technology stack.

Let’s first understand the basic concepts in React

React.js

React.js is the core library of React. The core library must be loaded in the application.

ReactDOM.js

ReactDOM.js is React’s DOM renderer. React separates the core library from the renderer. In order to display the developed components in the web page, you need to call the ReactDOM.render method. The first parameter is the React component, and the second parameter For HTMLElement.

JSX

JSX is React’s custom grammar, and eventually JSX will be converted to JS and run on the page.

Component

Component is the core concept in React. All elements in the page are expressed through React components. Most of the React code we will write is in the development of React components.

VIRTUAL DOM

The virtual DOM tree abstracted by React, the virtual tree is the key to React’s high performance.

One-way data flow one-way reactive data flow

The core design pattern of React application, data flow from top to bottom

Hello React World

I am also a quick-tempered person. According to the convention in the technical field, before learning a technology, I must first say: “Hello World!”.

<!DOCTYPE html>

<html>

<head>

<metacharset = “UTF-8”/>

<title> Hello React! </title>

<src = “http://facebook.github.io/react/js/react.js" ></>

<src = “http://facebook.github.io/react/js/react-dom.js" ></>

<src = “https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" ></>

</head>

<body>

<divid = “example” ></div>

<type = “text/babel” >

varHello=React . CreateClass ({

render :function (){

return< div > Hello{ this . props . name }</ div >;

}

});

ReactDOM . The render (

< Hello name = “World”/>,

document . getElementById ( ‘example’ )

);

</>

</body>

</html>

Readers can copy the code into a new HTML file and open it through a browser. At present, we only care about the code in the tag in the above html. The syntax in the tag is JSX syntax, and ReactDOM is React’s DOM renderer.

After understanding the basic concepts and seeing Hello World, readers may start to have questions:

How is jsx syntax the same as HTML?

Answer: Yes, it looks the same, but the essential difference between jsx and HTML is that jsx writes xml tags directly in the function. In section 1.2, we will introduce jsx in detail and compare it with HTML.

What makes React unique

Compared to other front-end frameworks, why is React unique and stand out from the crowd?

Combination mode of components

The combination mode is sometimes called the part-whole mode. It obscures the concepts of simple and complex elements in our tree structure. Client programs can handle complex elements in the same way as simple elements. Decoupling the internal structure of the program from complex elements

Image for post
Image for post

React is based on the composition model. Whether it is an application level or a form or a button, it is regarded as a component, and then the entire application is built based on the combination of components. This structure has always been a web component that the front-end industry wants but has not come to .

Based on the advantages of the combination model

Build reusable components: The development of components can form the company’s component library, and the development of each business can accumulate reusable components.

No learning barriers: The structure naturally conforms to HTML, and there are almost no learning barriers for front-end developers.

Flexible architecture: The combined model is simple but effective, and it can build simple pages and large front-end applications.

High maintainability of source code: Development is only part of the work, and the launch of the application is the beginning of the nightmare. Many large-scale applications cannot respond quickly to business requirements due to the copied business logic and have low maintainability.

We all know that Java is a scripting language. It cannot be compiled and positioned like a static language. If you want to clearly locate the bugs in the application, you need to understand the business code in depth. For large front-end applications, the business code is large and complex. , It is difficult to locate the bug. However, React’s unidirectional data flow design makes front-end bug location simple. The UI and data of the page are unique. We can locate the page display problem by locating data changes.

Efficient performance

Here is a concept that you may have already understood or heard of, which is virtual dom. The reason why React can be designed in this way is due to the Virtual DOM algorithm, which allows only elements that need to be changed to be re-rendered. The implementation of the virtual DOM algorithm will be explained in detail in the following internal implementation chapter

Separated frame design

The current version of React.js has separated the source code into ReactDOM and React.js. This means that React can not only work on the web side, but even on the server side (nodejs) and native side.

At the same time, we can customize our own renderer to implement React rendering such as Three.js, Pixi.js, and D3.js.

Node.Js server-side rendering

Web applications are the starting point of React. We can use React to build applications ranging from simple TODOAPP to large e-commerce shopping websites. At the same time, in addition to being able to process HTML, on the Web side, we can also use React to realize data visualization, chart display, and even game development:

Native application

In addition to the web side, we can use the same jsx syntax to build IOS or Android applications, thanks to Facebook’s open source React Native. Based on React Native, we will be able to use jsx to implement a UI with native application performance to run in IOS and Android, and we can also use NW.js or Electron to implement React-based desktop applications.

Cloud Belivers

Everything you need for your next application task

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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