What is React and how to learn as a beginner

React: A Beginner Guide 

React is a powerful website framework for building reusable user-interfaces. It is developed and maintained by Meta. React is useful for creating a single-page application, where a user can interact with the page without refreshing it. As React is created based on JavaScript Programming language, it mostly follows the declarative programming paradigm. React developers can also use the classes to implement object-oriented paradigm. 

React uses JavaScriptXML (JSX), allowing you to write HTML-like coded in JavaScript File. 

Components are reusable building blocks for the UI components. Components can be as small as a button, card, single post to as large as a form, navigation bar and a single page.  

import React from "react";

import "./styles.css";

function BlogPost() {

 return <h1>Hello, {props.name}!</h1>;

}

Sample Code for the component called Blog, using JSX Syntax.

If you are familiar with Browser DOM, it would be very easier to understand how React uses Virtual DOM. (If not, please review the JavaScript: DOM article.) In react, we don't normally interact with the browser DOM. We interact with the virtualDOM, a copy of the real one but in memory. Whenever we create a new component, it is added as a child component to the VirtualDOM. React only updates a virtual representation of React DOM and updates the real DOM only when necessary. This makes UI updates faster without needing to loading the page again. Please review the DOM Article in FreeCodeCamp to understand better. 

In react application, we organize our UI as tree-structure. Each component can have child components and each child component can have nested child components and so on.

Resources : 

React-Component-Hierarchy

To start building the application, you need a node package manager (NPM). Download NodeJS here. 

Please follow the procedures from the article FreeCodeCamp here exactly to build a React Application in a local computer.

You can also use SandBox to play around with React. 

State and props

Each component can have an internal state. State can be used to store data and they can also be modified according to the interaction of a user. Props(short for properties) are how components receive data from their parent components. 

Try the following code in the App.js file. 

import React from "react";

import "./styles.css";

function Greeting(props) {

 return <h1>Hello, {props.name}!</h1>;

}

export default function App() {

 let [food, setFood] = React.useState("pizza");

 return (

   <div className="App">

     <Greeting name="Mohammed" />

     <p>Favorite food: {food}</p>

   </div>

 );

}

Sample Code for practicing state and props

Website Interface View

You will get the following result. We have a child component, called Greeting. The component accepts the props as an argument and can be used in a parent component, App, that takes a name props and renders the Greeting. I’ve also defined the state using useState react hook. The initial state(food) is set to ‘pizza’ and it can be modified using useState(newValue) function. 

Resources : 

https://codesandbox.io/s/react-new

https://www.freecodecamp.org/news/reactjs-basics-dom-components-declarative-views/

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/