How does React.js fit into a front end stack?

When using React.js to create UI is it used primarily to create the interactive UI component of a website and everything else is created using vanilla HTML, CSS and JS or any other frameworks? or for example, would you create a website, using say Bootstrap 4, then add any UI components that need to change with React? Or would you actually create an entire website using React?

Just trying to get my head around React’s role.

think of react as a wrapper and you use everything inside it and then it renders it all to the browser.

so for instance in your html file all you will have is one element like <div id="app"></div> this is the wrapper, everything else that you use is created inside a js or jsx file which is your root component and is usually called something like App.js.

in this component you will write html inside a javascript class or function, this is called JSX, it looks something like this…

//functional component - App.js

const App = () => {
  return (
      <div className="app">
         <!-- html goes here... -->

          <Footer />  <!-- this is another component -->
      </div>
  )
}

export default App

All your other components will go inside this like the <Footer /> component
and then you can just import your css file and any 3rd party libraries like bootstrap or material ui and use them inside too, then all this is rendered to the dom with something called ReactDOM.render().

hope this helps :slightly_smiling_face:

1 Like

No, not commonly. It’s primarily for building web applications that need to behave (to a user) like an application your desktop or phone (single page apps) that are hosted on an HTML page. So the entire app is written in JS. When a user of the React app does something that access/modifies/etc data, the app reacts to that and updates anything that needs updating in the UI.

The end result is HTML – in React you use a thing that looks like HTML (called JSX) to describe how you want the end result HTML to look like.

CSS doesn’t care what generates the HTML, you just write it the same. It’s written in JS, so yes it uses JS, but React handles interacting with the DOM

No, React is not really for designing websites (there are good React frameworks that do allow this though – Next.js and Gatsby). If you are building an application, you’d ideally want to start with how the data is structured & how you want the UI to work & build in React.

1 Like

Ah ok I see, thanks both for your explanations, very helpful. :slight_smile:

1 Like