Skip to content

Commit

Permalink
Update learn > fundamentals.mdx
Browse files Browse the repository at this point in the history
  • Loading branch information
SanskritiGupta05 authored Oct 15, 2023
1 parent 7a06819 commit eabc45f
Showing 1 changed file with 14 additions and 14 deletions.
28 changes: 14 additions & 14 deletions content/batch/build/react/fundamentals.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ Want to improve this page? Raise a issue on [@github](https://github.com/ManishB
- They are simpler and more concise.
- we start it with a function.

```react
```js
function Greeting(){
return <h1>Hello</h1>
}
Expand All @@ -64,7 +64,7 @@ Want to improve this page? Raise a issue on [@github](https://github.com/ManishB
- They are defined as ES6 classes that extend the `React.Component` class.
- class components were being used in 2012, now they are history.

```react
```js
//we also need to import it at top of js file
import {Componet} from "react";
Expand All @@ -85,13 +85,13 @@ Want to improve this page? Raise a issue on [@github](https://github.com/ManishB

in `index.js` we are importing our app or `app.js` using:

```react
```js
import App from "./App";
```

but before this, we MUST `export` our App in `app.js` :

```react
```js
export default App;
```

Expand All @@ -101,7 +101,7 @@ Want to improve this page? Raise a issue on [@github](https://github.com/ManishB

`App.js`

```react
```js
export function App() {
return (
<div className="App">
Expand All @@ -117,7 +117,7 @@ Want to improve this page? Raise a issue on [@github](https://github.com/ManishB

`index.js`

```react
```js
import {App} from "./App";
const rootElement = document.getElementById("root");
Expand All @@ -134,7 +134,7 @@ Want to improve this page? Raise a issue on [@github](https://github.com/ManishB

`App.js`

```react
```js
function App() {
return (
<div className="App">
Expand All @@ -149,7 +149,7 @@ Want to improve this page? Raise a issue on [@github](https://github.com/ManishB

`index.js`

```react
```js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
Expand Down Expand Up @@ -182,7 +182,7 @@ Want to improve this page? Raise a issue on [@github](https://github.com/ManishB

### Components in React:

```react
```js
function Greeting(){
return <h1>Hello</h1>
}
Expand All @@ -194,7 +194,7 @@ Want to improve this page? Raise a issue on [@github](https://github.com/ManishB

### JSX:

```react
```js
function App() {
return (
<div className="App">
Expand All @@ -221,7 +221,7 @@ Want to improve this page? Raise a issue on [@github](https://github.com/ManishB

Props are the __properties__ of the component that are used to pass data from `parent` component to `child` component.

```react
```js
function Greeting({name}){
return <h1>Hello {name}</h1>
}
Expand All @@ -239,7 +239,7 @@ Want to improve this page? Raise a issue on [@github](https://github.com/ManishB

#### Using Props:

```react
```js
function Greeting(props){
return <h1>Hello {props.name}, {props.greeting}</h1>
}
Expand All @@ -256,7 +256,7 @@ Want to improve this page? Raise a issue on [@github](https://github.com/ManishB
### Default props:
when we don’t have a value, we can put a default value:

```react
```js
function Greeting({name,greeting="morning"}){
return <h1>Hello {name}, {greeting}</h1>
}
Expand All @@ -278,7 +278,7 @@ Want to improve this page? Raise a issue on [@github](https://github.com/ManishB

- to use it - `import {useState} from "react";`

```react
```js
//array destructuring
const [value, setterfunction] = useState(0);
```
Expand Down

0 comments on commit eabc45f

Please sign in to comment.