Start Coding :)

VS Code editor — https://code.visualstudio.com/

Creating Component and then rendering it into the DOM

Install “React Developer Tools” extension in Chrome for debugging

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

If you are running your app from a local file:// URL, don't forget to check "Allow access to file URLs" on the Chrome Extensions settings page. You can find it by opening Settings > Extensions:

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

JSX
JSX stands for JavaScript XML.
JSX allows us to write HTML in React.
JSX makes it easier to write and add HTML in React.

If you’re curious to see more examples of how JSX is converted to JavaScript, you can try out the online Babel compiler.

Example without JSX:

Example with JSX:

  • why to render html inside component , instead we can write it inside html template directly?
    Dynamic code is not possible inside html template. Rendering inside component allows us to write dynamic code using {} braces.
  • React Component is JavaScript code which returns HTML(JSX) dynamically. React.js library generates UI with the HTML(JSX). React.js library only updates the particular component which is needed to change with the help of virtual DOM. As a result the react application faster than other traditional web applications.

Components come in two types, Class components and Function(UI) components

Class components: When creating a React component, the component’s name must start with an upper case letter.

The component has to include the extends React.Component statement, this statement creates an inheritance to React.Component, and gives your component access to React.Component's functions.

The component also requires a render() method, this method returns HTML.

The class component also a code block of javascript and its state-full. This type of component has more features and it also maintains its own private data. You can maintain complex UI logic in the class components.

Functional component(UI Component): just a simple javascript function. Use functional component as much as possible and State not maintain in the functional component. This type of component only responsible for UI (User Interface of application). Generally in function component no complex logic exists. Also functional components called “Stateless” or “Dump”.

Now you can use the component in your project as a <TAG>. Please see the following example, hare we will use the above component in the “App.js” file.

Output : User Details

Hare we just simply use the User component. To use the component you need to import the javascript file which contains the component.

Lifecycle of Components

The three phases are: Mounting, Updating, and Unmounting.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — —Events!

Event Handler: onClick

<button onClick={this.clickMe()}></button>

  • {this.clickMe()} This will automatically invoke, instead we need to invoke the function only when the user clicks the button. so we need to use {this.clickMe}

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —Create React App

You’ll need to have Node >= 8.10 and npm >= 5.6 on your machine. To create a project, run:

I am open to cross-train and interested in learning new technology.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store