Skhokho πͺ π§π½βπ» π₯
Step by Step guide to creating your own content Generator with OpenAI and ReactJS
In this tutorial, we show you how to create a Content Creation website on ReactJS using OpenAI API.
YouTube Video:
βhttps://www.youtube.com/watch?v=Xxtu-bkSAB8β
Written Notes

npx create-react-app content
cd content
npm install bootstrap react-bootstrap react-router-dom openai
atom .
npm start
Create Components Folder
Create Navigation.js
βββ
import React from 'react'
import { Component } from βreact'
class Home extends Component {
render() {
return (
<div>
<h1>This is the Home Page</h1>
</div>
)
}
}
export default Home
βββ
Inside the App.js
import Home from β./components/Home'
Inside the Navigation File:
βββ
import logo from '../favicon.png'
import React from 'react'
import { Component } from 'react'
import 'bootstrap/dist/css/bootstrap.css'
import { Nav, Navbar } from 'react-bootstrap'
class Navigation extends Component {
render() {
return (
<div>
<Navbar bg="dark" variant="dark" sticky="top" expand="md" collapseOnSelect>
<Navbar.Brand href="/">
<img src={logo} width="50px" />
Skolo Online Learning
</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse>
<Nav>
<Nav.Link href="product-description"> Product Description </Nav.Link>
<Nav.Link href="cold-emails"> Cold Emails </Nav.Link>
<Nav.Link href="tweets"> Tweets </Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
}
export default Navigation
βββ
Back in the App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
** Wrap everything in Router
** Wrap the Paths inside Routes (Except the Navbar)
β Add <Route path="/" exact element={<Home/>} />
β Add <Route path="/product-description" element={<ProductDescription/>} />
