Introduction

Let's create a React app using create-react-app CLI,

npx create-react-app styling-react

In the script, the project folder name is styling-react. We are using the npx script runner to create the barebone react app.

Let's replace the default boilerplate code src/App.js to,

// App.js
import React from 'react';

function App() {
  return <main></main>;
}

export default App;

Now let's create our FAQ component without any styles in components/faq.js inside src folder,

// components/faq.js
import React from 'react';

const FAQ = () => {
  return (
    <section>
      <h2>Can I pay for my Docs enterprise account via PayPal?</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
        tellus rutrum rhoncus ipsum maecenas tellus. Consequat odio viverra
        convallis.
      </p>
      <section>
        <img
          src="https://randomuser.me/api/portraits/women/39.jpg"
          alt="user"
        />
        <div>Emma Washington</div>
        <div>April 22, 2020</div>
      </section>
    </section>
  );
};

export default FAQ;

Now let's add the component in App.js,

// App.js
import React from 'react';
import FAQ from './components/faq';

function App() {
  return (
    <main>
      <FAQ />
    </main>
  );
}

export default App;

Now the component will render. But a component is all about reusability. But our FAQ component is static right now. Let's pass the values as props to the component and make the component reusable.

The component code will become,

// components/faq.js
import React from 'react';

const FAQ = props => {
  const { question, answer, author = {}, date } = props;
  const { image, name } = author;

  return (
    <section>
      <h2>{question}</h2>
      <p>{answer}</p>
      <section>
        <img src={image} alt="user" />
        <div>{name}</div>
        <div>{date}</div>
      </section>
    </section>
  );
};

export default FAQ;

Now, change the App.js code and pass proper props to the FAQ component,

// App.js
import React from 'react';
import FAQ from './components/faq';

function App() {
  return (
    <main>
      <FAQ
        question="Can I pay for my Docs enterprise account via PayPal?"
        answer="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
        tellus rutrum rhoncus ipsum maecenas tellus. Consequat odio viverra
        convallis."
        date="April 22, 2020"
        author={{
          name: 'Emma Washington',
          image: 'https://randomuser.me/api/portraits/women/39.jpg'
        }}
      />
    </main>
  );
}

export default App;

You can see it in action here in codesanbox,

Codesandbox helps you to run, interact, and play with the code. All our examples in this course are interactive using codesandbox.