Components & Props, Oh My!

“Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.”

Step 1 — write the components

  • a new class, Article, is declared
  • the class extends React’s component class (which provides us with built in methods and attributes)
  • a render( ) method is defined, and what it should return is explicitly provided (in render( ), we tell React “Hey, when you want to put this component on the DOM, here is what it should become!”)

Step 2 — use the components

Making Components Dynamic

  • BlogContent — contains the content of the blog post
  • Comment — contains one user’s comment
  • BlogPost — the ‘top level’ React component, which is responsible for rendering both BlogContent and Comment

Passing Information

Expanding our Application

  • are modular, reusable, and enable a ‘templating’ like functionality
  • help us organize our user interface’s logic and presentation
  • enable us to think about each piece in isolation, enabling us to apply structure to complex programs

Conclusion

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Delete rows from a Sharepoint list through Powershell script

Use Hammerspoon to move cursor between monitors

How to Build Your Own Blockchain in NodeJS

Just JEST — In Just 60 Minutes

Credits — http://oels.byu.edu/student/idioms/proverbs/stitch.html

253. Meeting Rooms II

What Can You Do With Affinidi’s SDK?

React-Native Device Info List

What is AWS S3 Pre-Signed URL

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
Stephanie Segura

Stephanie Segura

More from Medium

7 Key Considerations While Hiring React Developers

Routes management without any magic strings (Not just another constants file approach)

Refactoring and Code Review in React

Startup guide of Jest for testing your JavaScript code. (Beginner)