Introducing React for Web Applications

React?

· React is a library built on the concept of component-driven development.

· In React simpler components are composed or come together to make more complex components.

What is the difference between the React libraries and the ReactDom libraries when you are working with React?

· React libraries include the component API and ReactDOM libraries include the API to render components

React Native?

· Library to build mobile applications using the React framework

foundational concept behind React

· Component-driven development

integral features of the React library

· Virtual DOM design strategy

· Server-side rendering

· Declarative nature

React JavaScript development files which end with the suffix development.js

· They contain additional error reporting which helps in prototyping

· They contain the original JavaScript which can be used in prototyping and development

React JavaScript development files which end with the suffix production.min.js

· They contain minified JavaScript which can be used for production environments

· The files sizes are much smaller as compared with the original JavaScript files

JSX

· JSX can evaluate expressions in JavaScript

· Expressions can reference values stored in JavaScript variables and constants

advantages of using JSX to define the HTML structure of the web page

· Code is easier to read and maintain

· Converted to pure JavaScript automatically

· Concise and familiar representation

· Allows defining a tree structure with attributes

expressions specified in JSX

· Within curly braces {}

virtual DOM

· A mirror copy of the actual DOM of our application

· Used to speed up rendering of the actual DOM

Babel compiler

· Babel is a pre-processor for the HTML code specified using JSX

· Babel performs transformations at different times based on whether code is used in development or production

When does the in-browser Babel compiler transform JSX code to pure JavaScript?

· On the fly, when the code is executed in the browser

How many top-level HTML tags does the ReactDOM.render() function accept?

· 1

While creating nested elements in React using React.createElement(), when do you encounter the React keys warning?

· When you have multiple sibling elements with no unique key to identify the elements

· to fix the warning related to React keys,Have every node which has sibling nodes at the same level be identified with a unique key

ReactJS Automatic Installation:

1. Download nodejs according to your operating system from the following link

https://nodejs.org/en/download/

2. Run the command prompt and create the project folder and go to the folder location and install reactjs modules.

npm install -g create-react-app

3. Check reactjs is installed properly or not

create-react-app --version

4. Create a new reactjs app

create-react-app new-app

5. Go to project folder

cd new-app

6. Start the server

npm start

7. Modify App.js file and run the file.