Component
Let's have this structure
App.js
Navbar.js
BlogDetails.js
Sidebar.js
Categories.js
Tags.js
To Create a new component - create new js file, better to have inside folder
create "component" folder inside "src" folder
create "Navbar.js"
src/component/Navbar.js
create code
rcc tab
will generate
------------------------
import React, { Component } from 'react';
class Navbar extends Component {
render() {
return (
<div>
</div>
);
}
}
export default Navbar;
let's write some code block
class Navbar extends Component {
render() {
return (
<nav className="navbar">
<h1>Dojo blog</h1>
<div className="links">
<a href="/">Home</a>
<a href="/create">New Blog</a>
</div>
</nav>
);
}
}
Now let's import and use, inside App.js
once you import, you can nest it inside App.js
import Navbar from './component/Navbar'
add self close Navbar tab just above content
<Navbar />
Code looks like
-------------
import logo from './logo.svg';
import './App.css';
import Navbar from './component/Navbar'
function App() {
return (
<div className="App">
<Navbar />
<div className="content">
<h1>App Component</h1>
</div>
</div>
);
}
export default App;
-------------
Now you can see, Nav bar loaded
http://localhost:3000/
Now let's create a new component for "Home" page
create home.js file and continue above steps
home.js
rcc tab
------------------------------------------
import React, { Component } from 'react';
class Home extends Component {
render() {
return (
<div>
</div>
);
}
}
export default Home;
--------------------------------------------
just a add dive tag with className home
add a h2 tag with homepage
import React, { Component } from 'react';
class Home extends Component {
render() {
return (
<div className='home'>
<h2>Home Page</h2>
</div>
);
}
}
export default Home;
Now you can import in App.js -->
just remove h1 tag and use <Home />
import logo from './logo.svg';
import './App.css';
import Navbar from './component/Navbar';
import Home from './component/Home';
function App() {
return (
<div className="App">
<Navbar />
<div className="content">
<Home />
</div>
</div>
);
}
export default App;
-----------------
Just like that, you can create multiple components , export them and import and use
