ReactJs separates the webpage in multiple blocks that might look alike but with different data. We declare those blocks as operational components. Where eqch component contains some HTML, some CSS and some JavaScript inside them. But under the hood it’s all JavaScript. Now, to continue with the workflow of ReactJS, we must need to understand,

How does ReactJS work?

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello React</h1>
    </div>
  );
};

export default App;

If we take a look at the above code, we have this HTML alike code inside App.js component. And the component is basically a custom HTML Element. And we do this with a declarative approach.

This means, that with React we define the desired target state and it is React’s responsibility to what to show on the screen under certain conditions.

//this is the App function that returns our desired target state.
const App = () => {
  return (
//our desired target state, that will render a h2 tag inside a div container.
    <div>
      <h2>Hello React</h2>
    </div>
  );
};

In the above code snippet, the <div>...</div> tag is our desired target state. Where we want to render a <div> with <h2> tag in it that says, Hello React.

So ultimately it’s this HTML code, which will be rendering on our screen and we will be able to see the preview of it on our browser.

Now, in the App.js component, let’s add another heading and a paragraph inside of the <div> tag and save it.

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello React</h1>

      {/* Another Heading */}
      <h2>This is second heading</h2>

      {/* A paragraph */}
      <p>This one right here, is a Paragraph.</p>
    </div>
  );
};

export default App;

After saving the changes and if the developer server is running perfectly, the changes we have just made can be visible on our web browser screen.

ReactJS project workflow

If we take a look at our created ReactJS project folder structure, we will be able to see some more folders and files. Even though we don’t have to work with every file and folder that are inside our Project folder. There, we can see a folder named src and a JavaScript file named package.json

In package.json we will see all the dependencies that our ReactJS project has. And if we want to install any external packages for further use the dependencies of that package will be saved here.

But we will work inside src folder most of the time. First take a look at the index.js file inside src folder

If we open index.js we will be able to see the below code inside of it.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Here, we can see some basic JavaScript code. We are getting an element with the id of root (which is located in public/index.html) and we are holding this element with createRoot method in a constant variable called root.

After that, we are rendering (or telling ReactJS what to render) the App.js file. Which is nothing but a component. And we are telling React to render everything that is inside the App component.

And the StrictMode helps the application to render with some precautions. Such as if the App component holds some side effects that might risk the entire project or rendering effects, it will warn this on the console.

Now, if we go inside App component (App.js),

We will some pre-occupied codes as below,

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

We can some codes that are mixed up with JavaScript and HTML. As we already know, we can’t add HTML tags inside JavaScript. But in React, we can.

Even though it looks like HTML elements but it’s not. It basically is JSX. To know more about JSX, read this article.

Here, we can see a <div> containing a <header> tag. To continue with our project we will be removing this. But React components are nothing but a sort of function. So it must need to be returning something.

Hence, this App component is returning a <div> tag and we can add every other tag or even other components inside this <div> tag that the App function is returning.

And everything inside this <div> tag will be visible to our browser. And all the changes will be previewed in the browser as well.

How ReactJS Works?

How does ReactJS work?

ReactJS project workflow