React Props - React Vernacular Campaign 09

React Props - React 白話文運動 09

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

  1. A React element in JSX is composed of an HTML element and JavaScript.
  2. Component is a return value in a function declaration or class declaration.
  3. 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;

				
			

React Props

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;
				
			

Conclusion

This post explains the concept of React props parameter passing, in addition to the different ways of declaring components.

It also explains the differences between React Components, Component instance, and Elements.

I hope the above will be helpful to the readers.

Feel free to leave a comment if you have any suggestions or questions!

Quote

React White Paper Campaign 10-React Props

React Vernacular Campaign Series

Building a React Project - React Vernacular Campaign 08

Babel & Webpack & NPM - React Whitepaper Campaign 07

React JSX - React Vernacular Campaign 06

How React Works - React Vernacular Campaign 05

JavaScript Advanced Functions - React Vernacular Campaign 04

JavaScript Async Await - React Vernacular Campaign 03

JavaScript ES6 Object - React White Paper Campaign 02

JavaScript ES6 - React White Paper Campaign 01

 

Leave a Comment

Your email address will not be published. Required fields are marked *

en_USEnglish