The main objectives of this article are:
Command to create the ReactJS application.
- Creating React JS(v18) Application.
- Install React JS Bootstrap
- Add Bootstrap Menu
Create React JS Application:
To create a React JS application our local machine should contain NodeJS. So go to "https://nodejs.org/en/download/".
npx create-react-app my-app
Command to run and start the ReactJS server.
npm start
Let's go through the project and explore important files.
index.html: Inside the public folder we can see the index.html. Only the HTML file of the entire ReactJS application. It contained a 'div' element whose 'id' value is 'root', inside of this element all ReactJS components get rendered.
index.js: Entry javascript file for ReactJS. It helps paint 'App' component content in 'index.html'.
App.js: The 'App.js' react component. It returns the 'JSX'(Javascript XML) content(JSX means writing HTML code inside of javascript directly).
Install ReactJS Bootstrap:
ReactJS Bootstrap is just built on Bootstrap. So that all UI components are straightforward to integrate into the ReactJS application.
Command to install the ReactJS Bootstrap.
npm install react-bootstrap bootstrap
Now import the bootstrap CSS node module file reference on the 'index.js'.
src/index.js:
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import "bootstrap/dist/css/bootstrap.min.css"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <App /> );
- (Line: 5) Added the bootstrap CSS file reference.
- Here removed existing default codes like 'reportWebVitals' and 'React.StrictMode'(react component) which we won't require for the local learners.
Add React Bootstrap Menu:
The 'Menu' is shared content for all the pages in any application. So let's create separate components like 'Layout.js' inside of a new folder path like 'components/shared'.
src/components/shared/Layout.js:
import Container from "react-bootstrap/Container"; import Navbar from "react-bootstrap/Navbar"; function Layout(props) { return ( <div> <Navbar bg="primary" variant="dark" expand="lg"> <Container> <Navbar.Brand>Supper Villans</Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav" /> </Container> </Navbar> <Container>{props.children}</Container> </div> ); } export default Layout;
- Here 'Layout' is our component function's entire logic is added inside of it and this function returns JSX content. The 'Layout' function has input params like 'props' which gives access to the either custom or default properties.
- (Line: 1&2) Imported the react-bootstrap component like 'Container' & 'Navbar'.
- (Line: 13) The 'Layout' function must be reander as custom tag like '<Layout></Layout>'. So to read the content inside of the 'Layout' element we have to use 'props.children' and to render content we have to ReactJS expression like '{}'(this can render plain text, HTML, even execute logic expression)
src/App.js:
import logo from './logo.svg'; import './App.css'; import Layout from './components/shared/Layout'; function App() { return ( <Layout> <h1>Hello World</h1> </Layout> ); } export default App;
- So here content is encapsulated with the 'Layout' component element.
Support Me!
Buy Me A Coffee
PayPal Me
Video Session:
Wrapping Up:
Hopefully, I think this article delivered some useful information on the .NET 6 Web API and React JS(v18). using I love to have your feedback, suggestions, and better techniques in the comment section below.
Refer:
Part-1 | .NET 6 Web API | SQL Database | React JS(v18) | CRUD Example
Part-3 | .NET 6 Web API | SQL Database | React JS(v18) | CRUD Example
Part-3 | .NET 6 Web API | SQL Database | React JS(v18) | CRUD Example
Part-4 | .NET 6 Web API | SQL Database | React JS(v18) | CRUD Example
Part-5 | .NET 6 Web API | SQL Database | React JS(v18) | CRUD Example
Part-6 | .NET 6 Web API | SQL Database | React JS(v18) | CRUD Example
Part-7 | .NET 6 Web API | SQL Database | React JS(v18) | CRUD Example
Part-5 | .NET 6 Web API | SQL Database | React JS(v18) | CRUD Example
Part-6 | .NET 6 Web API | SQL Database | React JS(v18) | CRUD Example
Part-7 | .NET 6 Web API | SQL Database | React JS(v18) | CRUD Example
Please provide github
ReplyDelete