This is the third installment of the React Series. Those of you who know React already have a rough idea of what I’m going to talk about. This might be a bit hard for those who are new to React, but I hope you stick with it. This is a revolutionary innovation for front-end development by Facebook’s frontend gurus.

React

Without further ado, let’s look at some code:

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(<HelloMessage name="John" />, mountNode);Copy the code

HelloMessage Implements a component called HelloMessage, which receives a name attribute and displays Hello XXX on the page. Reactdom.render is used to render a component to a DOM node on the page.

In future articles, we’ll explain in detail how to create the React component and how to develop a complete React project. Now, what I’d like to discuss with you is how you felt when you saw the above code and got your first impression of React.

I’m sure a lot of people, when they first see code like this, are like, “What the hell is this, HTML is written into JavaScript code, presentation is separated from business logic, and you don’t understand?” To tell you the truth, that’s exactly how I felt. Luckily, I stuck with it and still use it now. Now my reaction to React is: “I’m cool and awesome.”

Just began to have this kind of idea is easy to understand, so much like I was “display to be separated from business logic” brainwashing this sentence is too long, in fact, this sentence really play value, is before the MVC development pattern, when the web application logic is simple, may start page is connect to the database, data query, The following is the HTML code to display the query results. If you know a little bit about PHP, at the beginning of the PHP file there’s a
, which was used in those days to separate PHP code from HTML code. But as web application logic becomes more and more complex, it becomes more and more difficult to maintain business logic code mixed with HTML code, hence the MVC development pattern.

It’s not that the phrase “presentation should be separated from business logic” doesn’t apply to web development anymore. What I’m saying is, let’s get back to the basics. Should we write React the way it is written? The judge should be whether React makes our front-end code clearer and more maintainable, not whether JavaScript is similar to HTML syntax. Never separate for the sake of separation.

It’s just sugar in JavaScript – JSX

The above syntax for writing HMTL-like code in JavaScript is called JSX. You can think of it as an extended version of JavaScript. Obviously, this syntax is not executable in the browser environment, so we need tools to translate it into standard JavaScript syntax before loading the code into the page, just as we can use ES6 syntax today, even though browsers don’t support it well yet. The following two pieces of code, for example, are actually equivalent.

JSX grammar:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);Copy the code

Standard JavaScript syntax translated from the code above:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world! '
);Copy the code

Do you feel that JSX syntax is more intuitive and simpler to write? So JSX is actually React. CreateElement (Component, props… Children) grammatical sugar.

If you are familiar with HTML, then JSX is no stress for you, because all the tags in HTML are supported in JSX, and there is basically no learning cost, with the following slight differences:

  • The class property becomes className
  • The tabIndex property changes to tabIndex
  • The for property becomes htmlFor
  • The value of a textarea is specified by requiring the value attribute
  • The value of the style property receives an object, and the CSS property becomes humped, such as backgroundColor.

In the last article, we talked about components. In fact, we can think of the HTML tags written in JSX as basic components already implemented inside React. In the next article I’ll show you in detail how to create a new component using these basic components, the ability to create a new HTML tag provided by React.

Write in the last

The main purpose of this article is to give you a basic impression of JSX, and I know that many students give up reading JSX just because they look at the syntax. I’m really sorry…

I’d like to share a personal lesson with you, which is simply about staying humble. As Steve Jobs said, “Stay hungry, Stay Foolish.”

When you are exposed to a new framework, new technology, when it conflicts with your existing experience, when you feel that the design is rubbish, do not rush to ridicule. This is especially true for frameworks or technologies that are still relatively popular. You have to trust that the designers of those frameworks have far more technical skills and engineering experience than you do. Do you think they really didn’t take into account what you’re not comfortable with? Seriously think about the frame designer’s mental journey when designing this framework, seriously learn from the best practices of others on this framework, the results will often surprise you.

Similarly, if you find that the framework is really lacking in some aspect, don’t rush to build the wheel, first go to the community to search, you may have encountered a problem for a long time, and have a pretty good solution, even if not, this process can give you a lot of inspiration.

I feel it personally and it works every time. I hope you enjoy it. Thank you.

PS: All articles in this series will be published simultaneously at segmentFault and Nuggets.

All rights reserved. Reproduction, distribution, exhibition and performance of the work shall not be permitted without the permission of the licensor. Do not allow others to create deductive works based on the work.