React Props

Table of contents

Preface

Building a React Project - React Vernacular Campaign 08 Introduces how to build a React project: setting up the environment, building the project, and launching the project.

This article explains more about React syntax. React JSX - React Vernacular Campaign 06 You'll learn how to build a React component, and you'll learn that components have a parent-child relationship. This article introduces the concept of React Props, including: React component declaration, React Props.

React component declaration

Let's go over the syntax of React components and declarations here, using the syntax from the previous JSX article.

				
					import React from 'react'; import ReactDOM from 'react-dom/client'; const myElement = ( <ul> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> < /ul> ); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);

As you can see from the code above, an element called myElement is first declared and rendered at root. However, in addition to rendering in one file, it is also possible to load a written element from another file.

So first, I've modified the above file and named it app.js. I've also declared a component called fruit.jsx, which I've declared twice.

app.js

				
					import React, { Component } from &#039;react&#039;; import Fruit from &#039;./fruits&#039;; class App extends Component { render() { return (
            <div classname="App">
                <ul>
                    <fruit fruit_name="banana"/>
                    <fruit fruit_name="apple"/>
                </ul>
            </div>

        ); } } export default App;

fruits.jsx

functional declaration

				
					import React from &#039;react&#039;; const Fruit = (props) =&gt; { return <p> this is {props.fruit_name}.</p>
} export default Fruit;

Classification

				
					import React from &#039;react&#039;; class Fruit extends React.Component { render() { return (
        <p> this is {this.props.fruit_name}.</p>
      ); } } export default Fruit;

Both of these methods can be used to pass in props, but nowadays it's more common to use function declarations, which are relatively simple to write.

React Components、 Component instance、 Elements difference

A React element in JSX is composed of an HTML element and JavaScript.
Component is a return value in a function declaration or class declaration.
Component instance is Component implement。

				
					import React, { Component } from &#039;react&#039;; const Fruit = (props) =&gt; { // Fruit() is component return <p> this is {props.fruit_name}.</p> // <p></p> The inside is element } const banana = <fruit fruit_name="banana" /> // banana is an instance of the component component instance class App extends Component { render() { return (
            <div classname="App">
                <ul>
                    {banana}
                    <fruit fruit_name="apple" />
                </ul>
            </div>

        ); } } export default App;

In parent and child components, if you want to pass parameter values, similar to the concept of arguments in functions, you can use props to do so. However, there are some differences between function-declared components and class-declared components.

Functions

It can be noticed that function declaration is similar to quoting, so when external components are used, they can be imported as long as they use parameters, while the function components themselves can be imported as long as they use props.

				
					import React from &#039;react&#039;; const Fruit = (props) =&gt; { return <p> this is {props.fruit_name}.</p>
} export default Fruit;

Classification

Classes themselves are an object-oriented programming language concept, where a class has its own variables and props are passed in via { this.props.[variable name]}.

				
					import React from &#039;react&#039;; class Fruit extends React.Component { render() { return (
        <p> this is {this.props.fruit_name}.</p>
      ); } } export default Fruit;