React‐ NextJS - ErectusPE5/pes GitHub Wiki

Java Script

Reviews

  • V8 – in Chrome, Opera and Edge.
  • SpiderMonkey – in Firefox.
  • There are other codenames like “Chakra” for IE, “JavaScriptCore”, “Nitro” and “SquirrelFish” for Safari, etc.

React

Installation

You can edit it directly or open it in a new tab by pressing the “Fork” button in the upper right corner.

Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, CodeSandbox, StackBlitz, or CodePen. Try React locally

To try React locally on your computer, download this HTML page. Open it in your editor and in your browser! Start a new React project

If you want to build an app or a website fully with React, start a new React project.

NextJS

Imperative vs. declarative programming In other words, imperative programming is like giving a chef step-by-step instructions on how to make a pizza. Declarative programming is like ordering a pizza without being concerned about the steps it takes to make the pizza. 🍕

React is a popular declarative library that you can use build user interfaces. To use React in your newly created project, load two React scripts from an external website called unpkg.com

react is the core React library. react-dom provides DOM-specific methods that enable you to use React with the DOM.

What is JSX? JSX is a syntax extension for JavaScript that allows you to describe your UI in a familiar HTML-like syntax. The nice thing about JSX is that apart from following three JSX rules , you don't need to learn any new symbols or syntax outside of HTML and JavaScript. But browsers don't understand JSX out of the box, so you'll need a JavaScript compiler, such as a Babel , to transform your JSX code into regular JavaScript.

Additional Resources: You don't need to know exactly how React updates the UI to start using it, but if you'd like to learn more, here are some additional resources:

Essential JavaScript for React While you can learn JavaScript and React at the same time, being familiar with JavaScript can make the process of learning React easier. In the next sections, you will be introduced to some core concepts of React from a JavaScript perspective. Here's a summary of the JavaScript topics that will be mentioned:

React core concepts There are three core concepts of React that you'll need to be familiar with to start building React applications. These are:

  • Components:-User interfaces can be broken down into smaller building blocks called components. In React, components are functions that > > returns UI elements.

Components Additional Resources:

  • Props:- Like Regular HTML elements attribute, you can pass pieces of information as properties to React components. These are called props

Props Additional Resources:

  • State:-You can use state to store and increment the number of times a user has clicked the "Like" button. In fact, the React hook used to manage state is called: useState()

In the next chapters, we will go through these concepts and provide resources where you can continue learning them. After you're familiar with these concepts, we'll then show you how to install Next.js and use newer React features such as Server and Client Components.

Note: In React, data flows down the component tree. This is referred to as one-way data flow.

State and hooks

React has a set of functions called hooks. Hooks allow you to add additional logic such as state to your components. You can think of state as any information in your UI that changes over time, usually triggered by user interaction. Two different examples of state: 1. A toggle button that can be selected or unselected. 2. A like button that can be clicked multiple times.

**Note:** Unlike props which are passed to components as the first function parameter, the state is initiated and stored within a component. You can pass the state information to children components as props, but the logic for updating the state should be kept within the component where state was initially created.

Managing state

This was only an introduction to state, and there's more you can learn about managing state and data flow in your React applications. To learn more, we recommend you go through the Adding Interactivityand Managing State sections in the React documentation. Additional Resources:

Additional Reading:


Server and Client Components

Summary

To recap, you learned about the server and client environments and when to use each. You also learned that Next.js uses React Server Components by default to improve performance, and how you can opt into Client Components to smaller parts of your UI interactive.

Additional Reading There's a lot more to learn about Server and Client Components. Here are some additional resources:


Review more detail on invaluable reference of React Documentation which contains interactive sandboxes to help you practice the topics.