Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

July 24, 2020 03:54 am GMT

A complete guide to writing React Applications: A Step-by-step tutorial guide

Introduction

React is a painless open-source JavaScript library for building interactive user interfaces. This great astonishing work can be used as a base in the development of single-page or mobile applications par excellent. It is maintained by Facebook Inc, a community of individual developers, and companies across the globe. In this article, you will learn and uncover how to write pure React and then proceed to use one of its elegant tool called Parcel

React Abstraction layers (Libraries)

React provides us with majorly two layers of abstraction in the cause of developing a reactive based application.

The first layer is an interface that enables and shows us how to interact with React effectively. All methods one uses comes via this library except one which is rendering itself to the DOM.
The second library is the rendering layer which renders to the browser by extensively making use of the React DOM. There are a lot of other React libraries like the A-Frame React, React Native, React 360, React Blessed, and et al, but the two aforementioned libraries are at the core of building a React-based application.

Let's set up a workspace

Firstly, create your project directory. Mine is going to be called todo-app since we're going to be building a task manager app. Create an index.html and put it into a src/ directory inside of the created project folder (todo-app ). Open the working directory with any text editor.

Let's write Pure React

Lets write pure React. No Webpack or parcel, JSX, and Babel; just some cool JavaScript on the page with its two layers of abstracted libraries. Open the index.html and put:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Todo App</title></head><body>    <div id="root-container">Hello, React!</div>    <!-- Load React. -->    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>    <!-- Our pure React goes below -->    <script >    </script></body></html>

Let's create a component

Now, in the last script tag let's create a component called, App. React is all about creating components, and then taking those components and making more components out of those components created.

const getElement = (name) => {    return document.querySelector(name);}const App  = () => {    return React.createElement(        'div',        {},        React.createElement('h1', {}, 'Todo App')    );}ReactDOM.render(React.createElement(App), getElement('#root-container'));

The first thing we do is to create a reusable function to get elements from the DOM; it will help us extensively throughout our development process.
Secondly, we create our own component, App
There are two types of components, function components, and class components. The component we'd create is a functional component.
A function component must at all-time return a markup (which is what React.createElement generates)
React.createElement creates one instance of some components. If you pass it a string, it will create a DOM tag with that as the string. We used div and h1, those tags are output to the DOM
The second empty object (you can put null too) is attributes we're passing to the tag or component. Whatever we put in this will be output to the element (like id or style.)
ReactDOM.render is what takes our rendered App component and puts in the DOM (in our case we're putting it in the root-container element)

Let's separate the script out of the index.html

Let's separate the script tag on the DOM to its own script file. We will do that by making a new file in your src/ directory called App.js and cut and paste your code into it. In addition, we will modify the code by creating another component called User. Remember to point the path of App.js in the index.html file.

const getElement = (name) => {  return document.querySelector(name);};const User = () => {  return React.createElement("div", {}, [    React.createElement("h2", {}, "Kater"),    React.createElement("h3", {}, "[email protected]"),    React.createElement("h4", {}, "user")  ]);};const App = () => {  return React.createElement(    "div",    {},    React.createElement("h1", {}, "Todo App - Users"),    React.createElement(User),    React.createElement(User)  );};ReactDOM.render(React.createElement(App), getElement("#root-container"));

To make an element have multiple children, just pass it an array of elements.
We created a second new component, the User component. This component represents a user. When you have distinct ideas represented as markup, that's a good idea to separate it into a component as we did above.
Since we have a new User component, we can use it multiple times! We just use multiple calls to React.createElement in the App component.
Okay so we can have multiple users but it's not a useful component yet since not all users have the username, email, and role. Let's make the component more meaningful.

const getElement = (name) => {  return document.querySelector(name);};const User = (props) => {  return React.createElement("div", {}, [    React.createElement("h2", {}, props.username),    React.createElement("h3", {}, props.name),    React.createElement("h4", {}, props.email),    React.createElement("h5", {}, props.role)  ]);};const App = () => {  return React.createElement(    "div",    {},    React.createElement("h1", {}, "Todo App - Users"),    React.createElement(User, {      username: "kater",      name: "Kater Akeren",      email: "[email protected]",      role: "Software Engineer"    }),    React.createElement(User, {      username: "fabs",      name: "Fabian Aondo",      email: "[email protected]",      role: "CTO"    }),    React.createElement(User, {      username: "juliet-faith",      name: "Juliet-Faith Idoko",      email: "[email protected]",      role: "UI Designer"    })  );};ReactDOM.render(React.createElement(App), getElement("#root-container"));

We have a more reusable and flexible component that accepts props from its parent. Props are variables that a parent (App) passes to its children (the instances of User.) Now each user can be different! Now that is far more useful than it was since each instance of the User component can represent not just Kater, but any User. This is the most profound power of React! We can make multiple, reusable components. We can then use these components to build larger components, which in turn make up yet-larger components. This is how React apps are made profoundly.
We can destruct the props and make it look:

const getElement = (name) => {  return document.querySelector(name);};const User = ({ username, name, email, role }) => {  return React.createElement("div", {}, [    React.createElement("h2", {}, username),    React.createElement("h3", {}, name),    React.createElement("h4", {}, email),    React.createElement("h5", {}, role)  ]);};const App = () => {  return React.createElement(    "div",    {},    React.createElement("h1", {}, "Todo App - Users"),    React.createElement(User, {      username: "kater",      name: "Kater Akeren",      email: "[email protected]",      role: "Software Engineer"    }),    React.createElement(User, {      username: "fabs",      name: "Fabian Aondo",      email: "[email protected]",      role: "CTO"    }),    React.createElement(User, {      username: "juliet-faith",      name: "Juliet-Faith Idoko",      email: "[email protected]",      role: "UI Designer"    })  );};ReactDOM.render(React.createElement(App), getElement("#root-container"));

Parcel

The parcel is a modern web application bundler, differentiated by its developer experience. It offers blazing-fast performance utilizing multicore processing and requires zero configuration. Already our React app has two components in one file: App and User. It'd be better if these were in separate files so it'd be easier to keep track of what was where. This is where Parcel can help us profoundly. We will install parcel as a dev-dependence, but it can be installed globally. if you want to check it up: Getting started with Parcel.

First, let's initialize the npm registry package.json file by simply typing the command below in the root terminal of your working directory; for it to keep track of the npm packages we will be installing.
install parcel:
Now inside of our package.json we will configure parcel below in the script section:

"scripts" {  "dev": "parcel src/index.html"}

Start the parcel server:

React and ReactDOM dependencies

Lastly, before we do a complete refactoring; let's fix the React and ReactDOM dependencies. Right now these are coming from unpkg.com. Unpkg isn't meant to serve production traffic. We install both libraries from the npm registry. Remove completely the Unpkg libraries from the index.html

Complete Refactoring

import to the top of App.js the two installed libraries and the User component

import React from "react";import {render} from "react-dom";import { User } from "./User";const getElement = (name) => {  return document.querySelector(name);};const App = () => {  return React.createElement(    "div",    {},    React.createElement("h1", {}, "Todo App - Users"),    React.createElement(User, {      username: "kater",      name: "Kater Akeren",      email: "[email protected]",      role: "Software Engineer"    }),    React.createElement(User, {      username: "fabs",      name: "Fabian Aondo",      email: "[email protected]",      role: "CTO"    }),    React.createElement(User, {      username: "juliet-faith",      name: "Juliet-Faith Idoko",      email: "[email protected]",      role: "UI Designer"    })  );};render(React.createElement(App), getElement("#root-container"));

Create a new file called User.js cut the User component in the App.js and past it to the newly created User.js:

import React from "react";export const User = ({ username, name, email, role }) => {  return React.createElement("div", {}, [    React.createElement("h2", {}, username),    React.createElement("h3", {}, name),    React.createElement("h4", {}, email),    React.createElement("h5", {}, role)  ]);};

Conclusion

I appreciate you for being with me on this journey up to this moment. We have successfully learned and uncovered the fundamentals of React technology from the abstract point of view and concluding with its elegant, blazing-fast performance utilizing multicore processing, and requires zero configuration. Thank you and

References

Original Link: https://dev.to/katerakeren/a-complete-guide-to-writing-react-applications-a-step-by-step-tutorial-guide-405g

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To