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

ReactJS OpenAI API AI Content Generator

 

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/>} />

Skhokho