React Introduction- Basics
Hello Everyone.. !!
Here are some of my learning and finding for React JS
What is React JS ??
React is an open source JavaScript library used for building User interfaces.
It is not a framework, it is a library.
It is a library used for building user interfaces, does not focus on other aspects of application such as ROUTING or HTTP REQUESTS.
It has a rich ecosystem to handle the other aspects of application as ROUTING and HTTP REQUESTS.
React Architecture
React has a COMPONENT BASED ARCHITECTURE
React has a component based architecture, breakdown its app to small encapsulated parts which then can be composed to make more complex UIs.
A component which is made in react JS, can be used to other JS(Angular and Vue).
Example :Let us say, ‘HeaderComponent’ made in React JS can be used in Angular JS by passing the right data into the ‘HeaderComponent’.
Creating React Project
We can create a new React Project by using the following methods :
using npx : npx create-react-app <nameOfProject>
Get Utkarsh Tiwari’s stories in your inbox
Join Medium for free to get updates from this writer.
using npm :
- npm install create-react-app -g
- create-react-app <nameOfProject>
Then following commands are used to run the project :
- npm start : start development server
- npm run build : bundles the app into static files for production
- npm test : start test runner
NOTE : npx is npm package runner which gets install when you install node.
Flow of code in REACT
In ‘index.js’ we specify the root component which is ‘App Component’ and the DOM component which is control by react.
DOM element in our example is the element of id by ‘root’. Which is an element in our ‘index.html’ file.
When we run ‘npm start’, index.html file is served in the browser.
‘Index.html’ contain the root DOM node.
After this the control enter ‘index.js’ where react DOM renders the ‘App component’ into the DOM node.
The App component contains the HTML which is displayed in the browser.
