Image Description
Author
dev k
Published
Aug 23, 2019

WHAT IS REACT + HELLO WORLD

React is a JavaScript library for building user interfaces. It is the view layer for web applications.
At the heart of all React applications are components. A component is a self-contained module that renders some output. We can write interface elements like a button or an input field as a React component. Components are composable. A component might include one or more other components in its output.

Broadly speaking, to write React apps we write React components that correspond to various interface elements. We then organize these components inside higher-level components which define the structure of our application.

For example, take a form. A form might consist of many interface elements, like input fields, labels, or buttons. Each element inside the form can be written as a React component. We'd then write a higher-level component, the form component itself. The form component would specify the structure of the form and include each of these interface elements inside of it.

Importantly, each component in a React app abides by strict data management principles. Complex, interactive user interfaces often involve complex data and application state. The surface area of React is limited and aimed at giving us the tools to be able to anticipate how our application will look with a given set of circumstances.

HOW DOES REACT WORK

Unlike many of its predecessors, React operates not directly on the browser's Document Object Model (DOM) immediately, but on a virtual DOM. That is, rather than manipulating the document in a browser after changes to our data (which can be quite slow) it resolves changes on a DOM built and run entirely in memory. After the virtual DOM has been updated, React intelligently determines what changes to make to the actual browser's DOM.

The React Virtual DOM exists entirely in-memory and is a representation of the web browser's DOM. Because of this, when we write a React component, we're not writing directly to the DOM, but we're writing a virtual component that React will turn into the DOM.

we'll look at what this means for us as we build our React components and jump into JSX and writing our first real components.

INTSALL NODE GLOBALLY

We can download node globally on our system by going to nodejs.org .

                                step 1. open Terminal/Command Prompt

step 2. type sudo npm install -g @angular/cli
                            

INSTALL REACT CLI

On Terminal type :

                                npm install -g create-react-app
                            

CREATE REACT HELLO WORLD

Now that we have the CLI installed globally, we can create our first React application.
Command to create new react app is npx create-react-app hello-world
After create-react-app installs all the packages, we will get following list of commands as output

START REACT HELLO WORLD APPLICATION

As we can see, our application is started on http://localhost:3000
Edit App.js and see the changes on browser.

                                cd hello-world  npm start
                            

Comments


Ask Question/Share Feedback

Comment
Name
Email