Over recent years, React has been a popular library used to develop front-end applications. Instagram, Khan Academy, and Netflix are built with React.js, so React.js is one skill used commonly. Coming from JavaScript and learning React.js, here are some concepts you need to know to have a better experience creating a React App.

What is React?

React.js is an open-source JavaScript library created by a software engineer at Facebook and was first developed on Facebook’s News Feed. As for the front end (what the user sees on a site), React.js targets parts of the website into components. You can think of components as small building blocks that make up the website.

Components & Props

As known components let you split the UI into independent and reusable code. Components play a big part in React.js having the functionality and the presentation. No matter what components do in your application the goal is always the same. It must contain some sort of code that describes what it should do and display it to the DOM. To distinguish a component, those names that start with a capital letter are components.

function App () { 
  return (
    <>
       <Article />
    </>
  )
} 

Here we have a parent Article component. The Article component has information about an interesting topic.

(Having issues with dev not displaying my diagram of showing the tree files)

The image shown above shows the hierarchy of components. The Article component is a parent component while the MysteryTopic component is a child component. In React.js components files look like this:
https://ph-files.imgix.net/2129752d-63f7-4e5b-96f5-4c3697a0ca52.png?auto=format&fit=crop

Props

Props are an important mechanism for passing and accessing information/data between React.js components. Props are also known as properties, which refer to the “props” of an object. At first glance, props can be a little tricky in how they behave. Passing information as props goes in a one-directional flow(down) and data that has been passed down, cannot be changed. Props can be sent up to their parent components but are not recommended at first, and that is another discussion in the future.
Usually, you would think that creates a limitation to using props but, it's good because it provides a layer of protection to performance and security in your React code.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Here we're passing some information as "props" and targeting the props(information) names.

States

A state is also an object which can contain as many properties as needed. The state holds information that is dynamic which changes the output of the render or changes over time when the user interacts with the application. This gives us a way to maintain and update information within our React.js components.

function AddNumber() {
  const [count, setCount]= useState(0);

  function increment() {
      setCount(count + 1);
      }
return <button onClick={increment}>{count}</button>;

Here we have a single component that is rendering an integer to our React App. As the user each time it clicks on the button, it should increment the integer by 1. The useState is holding our current value integer to 0. We represent the integer value in the component using state and updating when it's clicked adding 1 each time.

Hooks

As in Rect 16.8 version Hooks were introduced as a new feature. What are hooks? A hook is a feature that uses state and other React features in functional components without writing class. In other other words, it allows function components to have access to states just as shown in the previous code. Just make sure to use import Hooks from “react”. The rules to use hooks are, to only be called inside React function components, called at the top level of a component, and cannot be conditional.

Thank you for taking the time to read! I hope you enjoyed and learned a lot about React. Reading is a part of learning but, the only way to master is to apply the practice.