An overview of React

What is React

React is a JavaScript Library. It is used for building user interface. It is not a framework. Frameworks want you to code in a certain way. Whereas, libraries give you freedom to code the way you want. You can use additional libraries with a library. That’s the reason behind the popularity of React. It doesn’t force you to in any way, you have complete freedom of choosing the style of your application.

JSX

JSX stands for JavaScript XML. It’s syntax looks like HTML, where you can use curly braces to write JavaScript Expression. It gets transpiled into plain JavaScript with the help of Babel.

function App() {
   return (
      <div className='App'>
          <h1>This is a Heading</h1>
      </div>
   );
}

Here code inside return look like HTML, but it isn’t. It’s actually JSX which gets converted into JavaScript.

Babel

Babel is a transpiler which converts modern JavaScript codes into ES5 that can run in older browser too. The code above will get transpiled by babel like this:

function App() {
  return /*#__PURE__*/React.createElement("div", {
    className: "App"
  }, /*#__PURE__*/React.createElement("h1", null, "This is a Heading"));
}

State

The state in JavaScript is a storage space for your component which is used to store data in your component. When a state of a component changes, the component that holds that state will be marked to re-render.

function App() {
    const [name, setName] = useState('Batman');
    return (
        <div>
            <h1>Hello,  {name}</h1>
        </div>
    );
}

Here state is declared with useState() hook.

Props

Components receive properties from their parent component and it is referred to as props.

function App() {
    return (
        <div>
            <Name name='Ashik' />
            <Name name='Shaheen' />
            <Name name='Peter' />
        </div>
    );
}
function Name(props) {
    return (
        <div>
            <h1>Hello, {props.name}</h1>
        </div>
    );
}

Which results in

Notice that, we passed a prop named name . You can pass as many components as you want.

Expression

You can use JavaScript expression in JSX. You need to put the expression in curly braces.

function App() {
    return <div className="App">{new Date().toDateString()}</div>;
}

Here the expression displays the current date to the browser.

Lifecycle Effects

These are functions which are called when any component is created, updated or removed. These are managed with useEffect hook. Each component has a lifecycle which has three phases. They are: mounting, updating, and unmounting.

Hooks

Hooks are functions which allow us to use state and lifecycle methods in functional components. Hooks names start with use word.

function App() {
    return (
        <div className='App'>
            <Name />
        </div>
    );
}
function Name(props) {
    const [name, setName] = useState('Batman');
return (
        <div>
            <h1>Hello, {name}</h1>
            <button onClick={() => setName('Ashik')}>Change Name</button>
        </div>
    );
}

The code snippet here uses the useState() hook. When the button is clicked the useState hook fires and changes the name .

Virtual DOM

React stores a copy of current DOM to it’s memory. When any changes occurs to any component such as an state update or lifecycle changes, React creates a new DOM. Then it compares two DOM trees and detect the changes using the ‘Diffing Algorithm’. Then it updates the part of the browser DOM only where any changes needed. The rest of the DOM is left as it was.

Components

Components are the basic building block of a React app. A React app can have many components. If you think your computer/laptop as an application, then every single element like display, processor, ram, rom etc are each a component. In this way, different parts of a website are called a component in React.

Elements

A beginner React learner might get confused between Components and Elements. A component is a blueprint and an element is what returned from the component.

function Name(props) {
    const [name, setName] = useState('Batman');
return (
        <div>
            <h1>Hello, {name}</h1>
            <button onClick={() => setName('Ashik')}>Change Name</button>
        </div>
    );
}

Here Name is a component and the return block is elements.

Conclusion

React is great. If you use it, you will love it. It’s simple, fast and easy to use. I’ve been learning React and now I feel more comfortable and confident working with React.