How to create a single component in React.js?

How to use Components in React.js?»

First off, get some Bootstrap and add it to your project.Go to https://getbootstrap.com/ and click “Get started”. From there, copy the CSS link.

Now go back to your project directory, go to the public directory and then open index.html. There, paste the copied link where the meta tags end.  In my case, it looks like:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

You’d notice that I’ve pasted the code after this line:

<meta name="theme-color" content="#000000" />

You can add it somewhere after the last <meta/> tag.

Now, save the file, go back to your browser and you should see “Hello World” written in different font style and color (as set by the Bootstrap Library). This remarks successful inclusion of Bootstrap in your project.

Write the following code in index.js to create first snippet of the news section:

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {

return (
<div className="container">
<div className="row">
<div className="col-md-8">
<div className="news-title">
<h2>Some news title here</h2>
</div>
<div className="publishdate">
<p>
May 12, 2019
</p>
</div>
<div className="news">
<p>
Lorem Ipsum ….
</p>
</div>
</div>
<div className="col-md-4">
</div>
</div>
</div>
);
};

ReactDOM.render(<App/>, document.querySelector("#root"));

Leave a Comment