What is React?

React is a javascript library created by Jordan Walke, a software engineer at Facebook, in 2013. It is used for building user interfaces and web applications efficiently with significantly less code than you would with vanilla Javascript. A question might arise: Why React? Think of react components like lego blocks. If you want to change one block, you can easily change it without affecting the others. But if it had been a huge chunk of plastic, things would have been much more difficult. This is why React is used, it breaks the UI elements into components thus making our work much easier.

Components

React apps are made out of components. Components in React have their own logic. They can be as small as a button to as big as a page. Think of them as lego blocks. Each lego block contributes to the formation of the final structure, while keeping their own appearence. This is how React components work.

export default function App(){
    return(
        <button>Button 1</button>
    );
}

In the above piece of code, we have created a function App which returns a component which is a button.

It should be noted that react components can return only one element. So, if we have multiple elements that we need to return we can wrap it in a div. If you don't want to wrap it in a div, then you can use <> and </>.

export default function App(){
    return(
        <>
            <h1>This is the Heading</h1>
            <button>Button 1</button>
        </>
    );
}

JSX

JSX stands for for JavaScript XML. It is a syntax extension of JavaScript and allows us to directly write HTML in React. Instead of writing markup and logic in seperate files, React allows us to write it together using components and JSX. JSX might be similiar to HTML but it is a lot stricter than HTML. Each opening tag must have a closing tag and we cannot use reserved names like class. You might get various errors if you copy and paste your HTML file in JSX.

A very important thing you must understand is that the name of a component in React must always begin with an uppercase letter. If it doesn't start with an uppercase letter, React will throw an error. This is because React will treat it as a built-in element if it starts with a lowercase letter.

function Heading(){
    return(
        <h1>This is the Heading</h1>
    );
}

export default function App(){
    return(
        <>
            <Heading/>
            <p>This is a paragraph</p>
            <button>Button 1</button>
        </>
    );
}

Notice how the Heading function starts with an uppercase letter, 'H'.

JSX allows you to open a window into JavaScript using curly brackets. Using this we can write logic inside the markup.

export default function App(){
    const name = "React";
    return(
        <div>
            <p>This Blog is about {name} </p>
        </div>
    );
}

The curly brackets around "name" opens a window into JavaScript and thus we know that is referring to a variable called name. This will give an output: "This Blog is about React".

One important thing to keep in mind is that attributes written in JSX become keys of JavaScript objects. But JavaScript has limitations to it's variable names. A variable name can't be a reserved word or it can't contain dashes. Because of this, many HTML attributes are written in camelCase.

<img 
  src="https://imgur.com/gallery/rEvusTN" 
  alt="Cat" 
  className="image"
/>

Here, instead of class, we're using className as class is a reserved word in JavaScript.

Props

Props are the information that you pass to a JSX tag. React components communicate with each other using Props. You can pass any JavaScript value through props, like arrays, objects, etc.

function Books({book, author}){
    return(
        <h1>{book} is written by {author}</h1>
    );
}

export default function App(){
    return(
        <div>
            <Books book= "The Hobbit" author= "J.R.R. Tolkien" />
        </div>
    );
}

This is how props work. Remember to always put the double curly brackets { and } when using props.

Conditional Rendering

You might often want to display different things during different conditions. In React, you can conditionally render JSX using if statement, && and ? : operators.

function Render({statement, correct}){
  if(correct){
    return(
      <div>
        <p>{statement} = true</p>
      </div>
    );
  }
  else{
    return(
      <div>
        <p>{statement} = false</p>
      </div>
    );
  }
}

export default function App() {
  return (
    <>
       <Render statement= "The world is round" correct= {true}/>
       <Render statement= "2 + 2 is 5" correct= {false}/>
       <Render statement= "January has 30 days" correct= {false}/>
    </>
  );
}

This code will give the following output:

Conclusion

React is a very useful JavaScript library that is much more efficient than Vanilla JavaScript. Remember to always think about your page as a component and break it down into more components just like a Lego Model. Brush up you Javascript basics before jumping into React as it can be very confusing and near impossible to learn React before having a basic understanding of Vanilla Javascript.

If you're interested in topics like Web Development, Javascript, etc. feel free to connect with me and have a discussion anytime !

LinkedIn: https://www.linkedin.com/in/maanav-nair-2a8049253/

Twitter: https://twitter.com/maanav_nair