Learn what react is and how to create your first react app in this web development tutorial.
It is maintained by Meta (formerly Facebook) and a community of individual developers and companies.
React can be used as a base in the development of single-page, mobile, or server-rendered applications with frameworks like Next.js.
However, React is only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the use of additional libraries for routing, as well as certain client-side functionality.
How dos React work ?
React functions by using a couple of tools like
Declarative programming in React
Declarative programming paradigm is React core philosophy. This means that you will design views for each state of an application, and React updates by rendering each component when data changes.
React code is made of entities called components. These components are reusable and must be formed in the SRC folder following the Pascal Case as its naming convention (capitalize camelCase). Components can be rendered to a particular element in the DOM using the React DOM library. When rendering a component, one can pass the values between components through “props”
What is JSX?
HTML vs the DOM
If you look at the DOM elements inside your browser developer tools, you will notice the DOM includes the
<h1>element. The DOM of the page is different from the source code – or in other words, the original HTML file you created.
<h1>element with some text:
Getting Started with React
To use React in your project, you can load two React scripts from an external website called unpkg.com:
UNPKG : https://unpkg.com/
react is the core React library.
react-dom provides DOM-specific methods that enable you to use React with the DOM.
<h1> title inside our #app element.
ReactDOM.render(<h1>My React App</h1>, app);
But if you try to run this code in the browser, you will get a syntax error:
This is because
To add Babel to your project, copy and paste the following script in your index.html file:
For a more in depth understanding of the subject, check out the video tutorial.