Please enable JavaScript.
Coggle requires JavaScript to display documents.
Basic of React - Coggle Diagram
Basic of React
4 main concepts of React
1. more Declarative paradigm (novel concept)
Don't touch the DOM! I'll do it.
Dom is what browser uses to display Webapp.
imperative: in an imperative paradigm you directly change individual parts of your app in response to various user events and all these edge cases.
The browser has to do 2 really expensive operations: to repaint an element and to recalculate the layout
you need only declare to React how your app should look like.
React itself reacts on the changes of state, that's why it called React.
React uses the most efficient way to update the DOM, so it takes care of the DOM updates.
Virtual DOM
2. Components
building websites like Lego blocks(reusable components)
component - in a simple term, it's just plain JavaScript function(or Class) that receives props and returns jsx. React component ties together the logic and visual representation of a UI element, making it easier to manage and maintain the code.
-
4. UI library
I am only going to work with the view, the rest is up to you
-
Building process 'nmp build'
the npm build process in React transforms and optimizes the application's source code for production deployment,
Webpack
takes all of the various JavaScript and CSS files that make up a web application and bundles them together into a single file. It also handles other tasks such as minification, code splitting, and tree shaking to optimize the output file size and performance of the application.
Babble
Babel is a JavaScript compiler that transforms modern ES6+ JavaScript code into an equivalent version of JavaScript that is compatible with older web browsers and environments that do not support the latest language features.
Babel ensures that the code is compatible with a wide range of web browsers.
"npm eject"
it allows developers to customize the build process and configure it according to their specific needs.
NPM(node package manager.)
npm is primarily used to manage packages (i.e., install, update, and remove them)
npx
npx is used to execute a package
npx is a command-line tool that allows you to execute Node.js packages without installing them first, and it comes bundled with npm. It is different from npm, which is primarily used to manage packages rather than execute them.
react-scripts
react-scripts helps us to leverage such scripts as:
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
crucial libraries
React
React is the core library that provides the foundation for building UI components and managing state.
React is the engine that drives the logic and functionality of the UI components
ReactDom
React DOM is a package that allows developers to render those components to the browser's DOM for display.
History
1990s: Simple, static HTML documents.
Early 2000s: Introduction of JavaScript for interactivity.
Early 2000s: DOM introduced for more efficient manipulation of web pages. It is a tree structure that represents how our page looks like.
JS files started getting bigger and bigger
Mid-2000s: JQuery becomes popular for working with the DOM. JQuery had a unified easy API across different browsers
Early 2000s: AJAX allows updating parts of web pages without reloading.
Early 2010s: Backbone.js emerges for organizing complex JavaScript code.
Early 2010s: Single-page applications (SPAs) become popular.
2010: AngularJS by Google emerged
2013: React is released by Facebook for building user interfaces using components.
-
manifest.json file
is commonly used in Progressive Web Applications (PWAs) to provide a native-like experience to users.
"robots.txt" is a file that webmasters create to instruct web robots or search engine crawlers about which pages or sections of their website they are allowed to access or not.
JSX
JSX is indeed a syntax extension of JavaScript. It is a syntax that allows you to write HTML-like code in your JavaScript files, which is then transformed into regular JavaScript code during compilation.