Introduction To React

Photo by Ferenc Almasi on Unsplash

1.What is JSX?

JSX is nothing but a power of react which gives us the power to use html and JavaScript together .

Look at the variable declaration which is given bellow:

const element = <h1>Hello, world!</h1>;

This looks funny but this is the power of JSX which allows us this syntax to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind us of a template language, but it comes with the full power of JavaScript. JSX produces React elements. We will explore rendering them to the DOM in the next section.

2. React

React is a JavaScript library for building user interfaces. It is not a framework that why you need to use more libraries to react to solve any problem. Contrarily, Frameworks serve a great purpose, especially for startups and young teams. When you work with a framework much elegant design is already built for you which gives you to focus on writing good application logic. Frameworks are not flexible that you have to write code in a certain way. React follows Unix thinking as it is a small library that focuses on one thing and on doing that thing very well. So, that “one thing” defined “building user interfaces”. User Interfaces means that users interact with a machine.

3. Virtual Dom

When react was released, there was a lot of gossip about its performance as it introduced the idea of a virtual DOM that can be used to reconcile the actual DOM.

DOM means Document Object Model which is a browser’s programming interface for HTML and XML documents that are used as tree structures.

As virtual DOM is more of a pattern than a specific technology, people say that it is different. In React, virtual DOM is related to React Elements since they are the objects representing the user interface.

4. Features in React .

Major features of React are listed below:

1. It uses the virtual DOM instead of the real DOM.
2. It uses server-side rendering.
3. It follows unidirectional data flow or data binding.

5. React Props.

Props is the shorthand for Properties in React. They are read-only components which must be kept pure i.e. immutable. They are always passed down from the parent to the child components throughout the application. A child component can never send a prop back to the parent component. This helps in maintaining the unidirectional data flow and is generally used to render the dynamically generated data.

6. Components

React components allow you to break up the user interface into separate pieces that can be reused and handled independently. React component takes an optional input and returns a React element which is rendered on the screen. React components can be either “stateful” or “stateless”. Stateful components are class types and Stateless components are function types.

Class Component

class Car extends React.Component {
render() {
return <h2>This is a car</h2>;
}
}

Function Component

function Car() {
return <h2>This is another car</h2>;
}

7. Props

Props are like function arguments and can be used to send data to the component. They are fixed properties, which makes them read-only. This also makes them come in handy when you want to display fixed values.

class Car extends React.Component {
render() {
return <h2>I am a {this.props.color} Car!</h2>;
}
}
ReactDOM.render(<Car color=”red”/>, document.getElementById(‘root’));

8. State

React components has a built-in state object. The state object is where store property values belong to the components. When the state object changes, the component re-renders.

class Car extends React.Component {
constructor(props) {
super(props);
this.state = {brand: “Ford”};
}
render() {
return (
<div>
<h1>My Car</h1>
</div>);
}
}

9. Events

Just like HTML, React can perform actions based on user events. React has the same events as HTML. React Events are written in camelCase like onClick and React event handlers are written inside curly braces like onClick={shoot}.

<button onClick={shoot}>Take the Shot!</button>

10. Hooks

Hooks in a React component are called to a special function. All hooks functions start with the word “use”. Some of them can be used to provide a functional component with stateful elements like ‘useState’, others can be used to manage side effects like ‘useEffect’. Hooks are very powerful and React hook functions can only be used in functional components.

11. Conditional Rendering

Conditional rendering is the term to describe the ability to render different user interface (UI) markup if a condition is true or false. In React it allows rendering different elements or components based on a condition. This concept is applied when- rendering external data from an API, showing or hiding elements, toggling application functionality, implementing permission levels, handling authentication, and authorization. There are seven ways to implement conditional rendering — 1. If — else, 2. Switch, 3. Element variables, 4. Ternary operator (?), 5. Logical &&, 6. Immediately Invoked Function Expressions (IIFEs), 7. Enhanced JSX Libraries.