React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Declarative views make your code more predictable and easier to debug.
Build encapsulated components that manage their own state, then compose them to make complex UIs.
Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
Here is a sample snippet from one of my react project:
import Login from "./components/Login";
import home from "./components/Home";
import {
BrowserRouter as Router,
Route,
} from "react-router-dom";
import './App.css';
function App() {
return (
<div className="App">
<Router>
<Route exact path="/home" component={home} />
<Route exact path="/" component={Login} />
</Router>
</div>
);
}
export default App;
Here App is the main component. Based on the current route (url) it will load home or login component inside App div. Here you would notice DOM has 'className' instead of just 'class' attribute. And CSS can be added simply by import statement.
React and Angular both can export code which is production ready compact build folder. When you build an app that requires dynamic meta tags, for instance e-commerce, you may need to look at server side rendering (SSR).
