
# Hello World

- npx create-react-app <project_name>
- npm create vite@latest

[Codevolution / ReactJS Tutorial - 2 / Hello World](https://youtu.be/9hb_0TZ_MVI?si=b4leeXMA3TImd_NI)


[Codevolution / ReactJS Tutorial - 3 / Folder Structure](https://youtu.be/9VIiLJL0H4Y?si=LJgRJE5DDqsjuUGn)

Hello World


# What is React?

- Open source library for building user interfaces
- Not a framework
- Focus on UI
- Rich ecosysrem

### Why learn React?

- Created and maintained by Facebook
- More than 100k starts on Github
- Huge community
- In demand skillset
- Component Based Architecture

![Component Based Architecture](component-based-architecture.jpg "Component Based Architecture")

- Reusable Code

![Reusable Code](reusable-code.jpg "Reusable Code")

- React is declarative
- Tell React what you want and React will build the actual UI
- React will handle efficiently updating and rendering of the components
- DOM updates are handles gracefully in React

### More on why React

- Sieamlessly integrate react into any of your application
- Portion of your page or a complete page or even an entire application itself
- React native for mobile applications

### Prerequisites

- HTML, CSS and JavaScript fundamentals
- ES6
- JavaScript - 'this' keyword, filter, map and reduce
- ES6 - let & const, arrow functions, template literals, default parameters, object literals, rest and spread operators and destructuring assignment

[Codevolution / ReactJS Tutorial - 1 / Introduction](https://youtu.be/QFaFIcGhPoM?si=Qc96wkDI7TkyEk_s)

What is React?


# JSX

- JavaScript XML (JSX) - Extension to the JavaScript language syntax
- Write XML-like code for elements and components
- JSX tags have a tag name, attributes, and children
- JSX is not necessity to write React applications
- JSX makes your react code simpler and elegant
- JSX ultimately transpiles to pure JavaScript which is understood by the browsers

### With JSX

```jsx
const Greet = () => {
  return (
    <div className="dummyClass">
      <h1>Hello Mariam</h1>
    </div>
  )
}
```

### Without JSX

```js
const Greet = () => {
  return React.createElement(
    'div',
    { className: 'dummyClass' },
    React.createElement('h1', null, 'Hello Mariam')
  )
}
```

### JSX differences

- class -> className
- for -> htmlFor
- camelCase property naming convention
  - onclick -> onClick
  - tabindex -> tabIndex

[Codevolution / ReactJS Tutorial - 8 / JSX](https://youtu.be/7fPXI_MnBOY?si=Wq0hCcoTFLVFSDQm)


# Props

```jsx
const Greet = props => {
  return <h1>Hello {props.name}</h1>;
};

function App() {
  return (
    <div className="App">
      <Greet name="Mariam" />
      <Greet name="Sofi" />
      <Greet name="Jasmine" />
    </div>
  );
}
```

### props.children

```jsx
const Greet = props => {
  return (
    <div>
      <h1>Hello {props.name}</h1>
      {props.children}
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <Greet name="Mariam">
        <p>Nice to see you 😊</p>
      </Greet>
      <Greet name="Sofi">
        <button>Click Me</button>
      </Greet>
    </div>
  );
}
```

[Codevolution / ReactJS Tutorial - 9 / Props](https://youtu.be/m7OWXtbiXX8?si=z1sz-GEw0N28fFik)

Props


NextJS is a **framework for ReactJS**.

Wait a second ... a "framework" for React? Isn't React itself already a framework for JavaScript?

Well ... first of all, React is a "library" for JavaScript. That seems to be important for some people.

Not for me, but still, there is a valid point: React already is a framework / library for JavaScript. So it's already an extra layer on top of JS.

## Why would we then need NextJS?

Because NextJS makes building React apps easier - especially React apps that should have server-side rendering (though it does way more than just take care of that).

In this article, we'll dive into the core concepts and features NextJS has to offer:

- File-based Routing
- Built-in Page Pre-rendering
- Rich Data Fetching Capabilities
- Image Optimization
- Much More

## File-based Routing

![Create routes via your file + folder structure](nextjs-file-based-routing.png)

... More content ...


Hi, I'm Maro

Featured Posts

Hello World

What is React?

JSX

Props

Getting Started with NextJS