8000 Added new Features · mutasim77/ReactJS-Notebook@4c87f42 · GitHub
[go: up one dir, main page]
Skip to content

Commit 4c87f42

Browse files
mutasim77mutasim77
committed
Added new Features
1 parent b033231 commit 4c87f42

File tree

11 files changed

+54
-122
lines changed

11 files changed

+54
-122
lines changed

‎my-docs/2.React Props/README.md renamed to ‎docs/2.React Props/README.md

File renamed without changes.

‎my-docs/1.Basics/README.md renamed to ‎docs/basics.md

Lines changed: 23 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,29 @@
1+
---
2+
sidebar_position: 2
3+
---
4+
15
# Basics 📌
26

37
React is a JavaScript library for building user interfaces created by Facebook. Using React you can build user interfaces specifically Single Page Applications (SPA) or websites. Let’s learn some basics before jumping into the code.
48

59
- ES6: React uses ES6. It stands for ECMAScript 6. It was created to standardize JavaScript.
610
- Core syntax: React uses a syntax extension of JavaScript called JSX which allows you to write HTML tag inside javaScript and helps to keep your code readable. For example :
711

8-
```javascript
9-
const element = <h1>Hello World!</h1>
10-
```
12+
```jsx
13+
const element = <h1>Hello World!</h1>
14+
```
15+
1116
- Component: Everything in React is a component. Component is an independent, reusable code block. There are two types of components in React.
1217
- 1 Class Component
1318
- 2 Functional Component
1419

15-
Let’s see them in detail
1620

17-
<hr>
18-
<b>Class Component</b>: Class component is an ES6 class. You can create a class component by extending the React-Component. It must have a render( ) method which returns a React element. Let’s create a Class component called Hello :
21+
Let’s see them in detail
1922

20-
<br>
23+
**Class Component**: Class component is an ES6 class. You can create a class component by extending the React-Component. It must have a render( ) method which returns a React element. Let’s create a Class component called Hello :
2124

22-
```javascript
25+
26+
```jsx
2327
import React from 'react';
2428

2529
class Hello extends React.Component {
@@ -33,12 +37,10 @@ class Hello extends React.Component {
3337

3438
Here, the class Hello extends React.Component so React understands that this class is a component. Inside render() it returns a React element. In the example above, it displays h1 tag with the text Hello world! inside it.
3539

36-
<hr>
37-
<b>Functional Component</b>: It is a JavaScript / ES6 function. It must return a React element. Let’s create a functional component called Hello :
40+
**Functional Component**: It is a JavaScript / ES6 function. It must return a React element. Let’s create a functional component called Hello :
3841

39-
<br>
4042

41-
```javascript
43+
```jsx
4244
function Hello(){
4345
return(
4446
<h1>Hello world!</h1>;
@@ -48,30 +50,24 @@ function Hello(){
4850

4951
or as an ES6 arrow function:
5052

51-
```javascript
53+
```jsx
5254
const Hello = () =>{
5355
return(
5456
<h1>Hello world!</h1>;
5557
)
5658
}
5759
```
58-
<br>
59-
<hr>
60-
To get your application render on the screen, we also have to use <code>ReactDOM.render()</code>
61-
62-
```javascript
63-
ReactDOM.render(
64-
<Hello />,
65-
document.getElementById("root")
66-
);
60+
61+
To get your application render on the screen, we also have to use **ReactDOM.render()**
62+
63+
```jsx
64+
ReactDOM.render(<Hello/>,document.getElementById("root"));
6765
```
6866
or
6967

70-
```javascript
68+
```jsx
7169
const root = ReactDOM.createRoot(document.getElementById('root'));
72-
root.render(
73-
<Hello />
74-
);
70+
root.render(<Hello/>);
7571
```
7672

77-
Here, the above code renders the <b>Hello</b> component inside the <b>DOM</b> with an id of root.
73+
Here, the above code renders the **Hello** component inside the **DOM** with an id of root.

‎docs/intro.md

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎docs/introduction.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# Introduction
6+
7+
Welcome to my Rea F438 ctJS notebook repository! This repository is a collection of notes and examples on learning ReactJS. It covers the basics of the library and progresses to more advanced topics. The goal of this repository is to provide a useful resource for anyone looking to learn ReactJS, as well as a personal notebook for tracking my own progress📊. If you find this repository helpful, please consider giving it a star to show your support. Thank you!
8+
9+
You can use this repository as a starting point and edit it to fit your needs.

‎docs/mutasim.md

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎docs/react-props.md

Whitespace-only changes.

‎docusaurus.config.js

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
77
/** @type {import('@docusaurus/types').Config} */
88
const config = {
99
title: 'ReactJS Notebook 📔',
10-
tagline: `If you aren't taking notes, you aren't learning`,
10+
tagline: `If you aren't taking notes, you aren't learning!`,
1111
favicon: 'img/logo.png',
1212

1313
// Set the production url of your site here
@@ -39,17 +39,9 @@ const config = {
3939
({
4040
docs: {
4141
sidebarPath: require.resolve('./sidebars.js'),
42-
// Please change this to your repo.
43-
// Remove this to remove the "edit this page" links.
44-
editUrl:
45-
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
4642
},
4743
blog: {
4844
showReadingTime: true,
49-
// Please change this to your repo.
50-
// Remove this to remove the "edit this page" links.
51-
editUrl:
52-
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
5345
},
5446
theme: {
5547
customCss: require.resolve('./src/css/custom.css'),
@@ -61,20 +53,20 @@ const config = {
6153
themeConfig:
6254
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
6355
({
64-
// Replace with your project's social card
6556
image: 'img/docusaurus-social-card.jpg',
6657
navbar: {
67-
title: 'Mutasim',
58+
title: 'ReactJs',
6859
logo: {
69-
alt: 'My Site Logo',
60+
alt: 'Notebook Logo',
7061
src: 'img/logo.png',
7162
},
63+
7264
items: [
7365
{
7466
type: 'docSidebar',
7567
sidebarId: 'tutorialSidebar',
7668
position: 'left',
77-
label: 'Tutorial',
69+
label: 'Notes',
7870
},
7971
{ to: '/blog', label: 'Blog', position: 'left' },
8072
{
@@ -84,6 +76,7 @@ const config = {
8476
},
8577
],
8678
},
79+
8780
footer: {
8881
style: 'dark',
8982
links: [
@@ -92,7 +85,7 @@ const config = {
9285
items: [
9386
{
9487
label: 'Tutorial',
95-
to: '/docs/intro',
88+
to: '/docs/introduction',
9689
},
9790
],
9891
},

‎src/css/custom.css

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,25 @@
66

77
/* You can override the default Infima variables here. */
88
:root {
9-
--ifm-color-primary: #2e8555;
10-
--ifm-color-primary-dark: #29784c;
11-
--ifm-color-primary-darker: #277148;
12-
--ifm-color-primary-darkest: #205d3b;
13-
--ifm-color-primary-light: #33925d;
14-
--ifm-color-primary-lighter: #359962;
15-
--ifm-color-primary-lightest: #3cad6e;
9+
--ifm-color-primary: #e63315;
10+
--ifm-color-primary-dark: #cf2e13;
11+
--ifm-color-primary-darker: #c32b12;
12+
--ifm-color-primary-darkest: #a1240f;
13+
--ifm-color-primary-light: #eb4529;
14+
--ifm-color-primary-lighter: #ec4f34;
15+
--ifm-color-primary-lightest: #f06d57;
1616
--ifm-code-font-size: 95%;
1717
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
1818
}
1919

2020
/* For readability concerns, you should choose a lighter palette in dark mode. */
2121
[data-theme='dark'] {
22-
--ifm-color-primary: #25c2a0;
23-
--ifm-color-primary-dark: #21af90;
24-
--ifm-color-primary-darker: #1fa588;
25-
--ifm-color-primary-darkest: #1a8870;
26-
--ifm-color-primary-light: #29d5b0;
27-
--ifm-color-primary-lighter: #32d8b4;
28-
--ifm-color-primary-lightest: #4fddbf;
22+
--ifm-color-primary: #fa583c;
23+
--ifm-color-primary-dark: #f93e1e;
24+
--ifm-color-primary-darker: #f9310f;
25+
--ifm-color-primary-darkest: #d42405;
26+
--ifm-color-primary-light: #fb725a;
27+
--ifm-color-primary-lighter: #fb7f69;
28+
--ifm-color-primary-lightest: #fca697;
2929
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
3030
}

‎src/pages/index.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,9 @@ function HomepageHeader() {
2727
}
2828

2929
export default function Home() {
30-
const { siteConfig } = useDocusaurusContext();
3130
return (
3231
<Layout
33-
title={`Hello from ${siteConfig.title}`}
34-
description="Description will go into a meta tag in <head />">
32+
description="ReactJs app using Docusaurus,Notebook app">
3533
<HomepageHeader />
3634
<main>
3735
<HomepageFeatures />

‎src/pages/index.module.css

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
/**
2-
* CSS files with the .module.css suffix will be treated as CSS modules
3-
* and scoped locally.
4-
*/
5-
61
.heroBanner {
72
padding: 4rem 0;
83
text-align: center;

0 commit comments

Comments
 (0)
0