Since HelloWord

Why stress

At the beginning of learning React, I only briefly read the documents without in-depth thinking and understanding. I just finished the business and basic use at that time. Now I plan to read various official documents of React from scratch. We’ll be thinking more about why?

What is React?

React. Js is not a framework, it’s just a library. It only provides solutions at the UI (View) level. In the actual project, it can not solve all our problems, we need to combine other libraries, such as Redux, React-Router, etc., to help provide a complete solution.

First line of codeHelloWorld

ReactDOM.render(
  <h1>Hello, world!</h1>.document.getElementById('root'));Copy the code

ReactDOM. Render (Element, container[, callback]) * Element: The element that needs to be rendered in container * container: The HTML container, in this case root, is the HTML div.id = of public'root' 
 * callback: //TODO:This callback function is executed every time render is executed, i.e. rendered and updated. React lifecycle is also involved
Copy the code

ReactDOM () provides dom methods that can be used at the top of an application in the first place. We may have forgotten that React doesn’t allow you to insert HTML strings directly, but we’ll hazard a guess just to be safe.

JSX

The first thing to remember is that JSX has all the capabilities of JS

• Why JSX?

  • JSX is a good way to describe the nature of the interaction the UI should represent
  • React argues that rendering logic is intrinsically coupled with other UI logic. That is, render parts should not be tied too closely to events and bindings.
  • React does not use artificial separation of markup and logic into separate files. Instead, it separates concerns by storing both together in loosely coupled units called components.
  • Still not understand? React wants to keep the execution of rendering and logic processing separate

• Waring – At least all attributes used and rendered in JSX should follow the small hump usage, in order to prevent conflicts with HTML naming

• XSS prevention? React JSX prevents XSS attacks to a certain extent. The main reason is that JSX converts all rendered content to strings, avoiding undefined malicious code that you didn’t inject yourself. This is one of the reasons react recommends you use JSX.

• How does JSX render?

  • If you consider this question, you are serious! This is thanks to Babel, which prechecks, how to say, the rules for matching parentheses and concatenating string variables to generate HTML elements (a wild guess here).
  • There’s an API involved here, which isReact.createElement()This is why you should include the React library in every React component file.
  • Let’s look at the transformation

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
/**loading**/
// First Babel does the conversion
const element = {
  type: 'h1'.props: {
    className: 'greeting'.children: 'Hello, world! '}};/**loading**/
/* This function is then preprocessed after detecting the render method in your Component or the return in your functional Component
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world! '
);
Copy the code

With that in mind, let’s take a look at the react.createElement () API (always keep in mind that you won’t just look at the document) :

/* This function returns a React element that forms part of the React page, which you can think of as an HTML page */
React.createElement(
  type,
  [props],
  [...children]
)
Copy the code

component

React here puts forward the function components and the class components in two ways, first, you will have a problem, function component words more convenient, why do you want to have a class components this thing, in fact, so to speak, first, because React.Com ponent is a class, so we need to use this method to use inheritance, That’s why facebook engineers used classes to implement React.component. so we have to use classes whenever we use methods in classes.

In the previous section we said that we use Babel and React. CreateElement to convert our JSX to React elements, which is the same element that allows React to support our favorite custom components, just by passing in different parameters. So if you can understand. Let’s say we customize a HelloWorld component:

ReactDOM.render(
 <HelloWorld />.document.getElementById('root'))Copy the code

Add :(render process)

// react. createElement instantiates a helloWorld
const helloWorld = new HelloWorld(props, children)
// React.createElement calls the helloWorld.render method to render the contents of the component
const helloWorldJsxObject = helloWorld.render()

// ReactDOM uses rendered JavaScript objects to build real DOM elements
const helloWorldDOM = createDOMFromObject(helloWorldJsxObject)
// ReactDOM inserts DOM elements onto the page
document.getElementById('root').appendChild(helloWorldDOM)
Copy the code

In fact, what you understand now is some of the basic ideas that we will use to read the source code more deeply in React

Props(Looks like HTML Attributes)

State documents stored in JSX, the National Archives Bureau

When you pass properties that you need to pass to a child component (where properties contain values) or components to a child component, mount Props as properties on the component returned by your return or Render after the transformation described above, and the transformation is similar to shipping.

Warning: Props is a country file, you are only responsible for receiving and using the file, you do not have permission to modify the file.

State of ascension

When a state is dependent or affected by multiple components, the state is promoted to the nearest common parent of those components to manage the dependent or affected behavior, using props to pass data or functions. That’s the idea of state raising, but in reality we use redux and context more to solve these kinds of problems.

That’s what I’m going to do today, because as a front-end developer, you have to keep in mind the saying, “You don’t just read the document, you don’t just read it a few times.”