Step-by-Step: Create a React Project From Scratch
Hello learners. In this tutorial we will learn How to create a new React app.
Before we begin, we need to understand few things. These tutorials are aimed for the aspiring and seasoned web developers & designer.
If you are an aspiring web developer who wants to establish their career in React and other modern frontend technologies, these tutorials will provide you the basic understanding that you need to learn, rehearse and practice. And some additional links as a part of suggestive reading, which you can further dwell upon.
As a lifelong learner, we need to be open to new ideas however they may challenge your beliefs at first.
Technology is a work in progress. It composes of sections of stable parts which can be applied to solve the problem of our lives. And some sections which are the part of debate and undergoing experimentation and transformation by the pioneers who forged & nurture the systems.
The cutting-edge technology tends to follow approximately the following adoption curve.
Source: Crossing the Chasm (1990) –Author: Geoffrey Moore
As you can see, the curve is divided among 5 sections as categorized by the work of:
Area under the curve represents number of customers
During the second phase, there is an important phase known as Chasm.
Any nascent technology which becomes main stream must grow this phase with the help of Early adopters along with innovators. And every promising technology has gone through this phase before it has gained enough momentum and has gone mainstream.
Before we learn React. We need to learn some concepts. And It will be good to have some basic understanding of how internet works. There are various technical jargon associated and it is a broad topic. If you are complete starter, I hope it will give you some base.
We will try to understand and answer the following:
When a user is connected to the internet with the help of browser (Google Chrome, Mozilla Firefox, Internet Explorer, Safari & Opera).
And when we type or do the google search with the help of keywords. We are presented a list of search results. The user computer is a client and google search engine act as server. As it serves to your queries in the form of the best matched results in a reasonable short time, it is good to say that the search results are produced at the blink of an eye.
World wide web (W3C) is a consortium which governs the internet. It has set of rules and protocols which defines how the different machines can communicate over the internet. Sir Tim burner Lee is the inventor of the W3C.
.png)
HTTP is a protocol, which tells and describe the transmission of hypermedia on the internet. It is designed based on the client server concept. In which one system is a client which seeks the information and other system is a server who act and fulfil the request of the client.
In HTTP, there are various status codes for server, and it describes the status of server based on the client request.
Whether the request has been
HTML is a mark-up language which is used to create hypermedia document on the internet. Hypermedia based documents are used to exchange information on the internet. HTML should not be confused with programming language such as C, C++, Java & C#.
Let’s write a Hello World! HTML document as below:
To run the above code we can write it down or copy & paste in our favorite text editor and save it as Hello World.html. Please note .html is the file extension. And once we open the file with the browser it will show us the output as below.
.png)
HTML is composed of various tags which defines the document and it’s semantic. Semantic add meaning to the content as expressed by enclosing tags and it is not purely for visual presentation purpose.
The HTML 5 document begins with <!DOCTYPE html>
HTML has also undergone various revisions and modifications.
For e.g. If We need to present the information as paragraph.
Then we need to use <p> tag.
For Tabular data <table>, Order list <ol> & unordered list <ul> and so on.
References:
Brief history
CSS refers to the cascading style sheets. In the beginning year of the HTML, when HTML was used primarily to exchange information with the help of HTML document on the internet.
There was limited functionality to style the webpages. In fact, there were some tags which allows to style a page and change its formatting. But there was no separation of concerns, for e.g. the formatting tag and its associated attributes were often mixed with semantic HTML..png)
And one of the early innovators Håkon Wium Lie recognized that there is a need of web page styling language which can address the presentation part of the webpages including the layout. And there is a need of separation of concerns.
Håkon Wium Lie along with the co-inventor Bert Bos had written the specification of CSS.
<table> & its sibling tags were heavily used to structure the layout of the webpages.
For E.g. To create multi column layout <table> were frequently used. It worked well to create the initial push to the web layouts, but it has own draw backs.
More on the history of CSS
https://www.w3.org/Style/CSS20/history.html
To know more about how we can use CSS, we will start with previous code. To change the text color of Hello World! from black to green, we will declare a stylesheet called text.css.
Naming convention for filename plays important rule, in recalling the file name when your source code becomes huge. It is good to start building on these habits.
Hello World.html
Text.css
.png)
As you can see from the browser, it displays the Hello World! text in red color and font appearance is bold & larger.
CSS has lots of modules which helps us to create sophisticated layouts, cool animations, image processing using css filters, accessibility (a11y) & much more.
The current version of CSS is CSS3. As technology gradually evolved, so did the CSS.
It is maintained by CSS working group, which consists of invited experts and working group members.
If you are interested to explore more you may check some of these links.
Reference:
CSS Almanac https://css-tricks.com/almanac/
Cool tricks
Homer CSS (2008)
http://www.romancortes.com/blog/homer-css/
Animated your HTML http://animateyourhtml5.appspot.com/
As described in the previous sections that the HTML is responsible for the structure and semantic aspect for the webpage. And with the help of CSS, the look and feel, advanced layouts and interactivity can be added using animation and pseudo classes.
JavaScript brings lots of interactivity to your pages. It is good to say that it adds wings to your creation. But sometimes these wings catch the fire, so we also know how to troubleshoot and prevent such instances from happening.
For e.g. If you ask your user to input their age. To validate the age, we can write the JavaScript code and validate, whether the input is correct or not. .png)
To recap and understand the HTML, CSS and JavaScript in brief. We can refer to the above presentation.
ECMAScript describes the functionality of JavaScript. ECMAScript is maintained by ECMA International.
The aim of ECMA Script is to ensure that webpages can run the same JavaScript code across different browser, & it is also interoperable with other programming language. In this context the Interoperability means that other programming language can invoke JavaScript function.
Programming languages such as Dart can run JavaScript code. Some framework such as Blazor in the world of . NET can invoke functions written in JavaScript. In terms of specification it tries to draws the line of standard for different browser vendors. Microsoft, Firefox, Google, Chrome, Opera & Apple each has its own browsers which runs on different operating systems whether it is on Windows, Linux and macOS. Sometimes the browser vendor takes a lead while implementing a feature. But the specifications for that feature are written later by standard body (ECMA International). The new feature may be adopted by another browsers vendor later in the evolution process.
Different browser vendor has different development life cycle in terms of feature’s implementation. And it takes time for the specification to become a standard. And the new version of browser is released by multiple vendor with the specification and takes time to become a standard on Web. In past few years since ECMAScript has undergone various revisions and changes as described by ES6, ES7, ES8 & ES9 & more we will see in future.
And these changes have resulted into the major impact on the JavaScript syntax. More references:
ECMA Script version history
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources
ECMA Script
https://www.ecma-international.org/publications/standards/Ecma-262.htm
React is a library which is publicly released by Facebook in 2013.
React was created by Jordan Walke, a software engineer working at Facebook. React allows us to divide our code into components. And these components communicate with each other in a unidirectional flow. As the components follows a standard development structure in nomenclature and design patterns. This helps in reducing of the knowledge gaps when different team members work and manage a project in which they have not worked from scratch.
React is based on the Functional programming principles as the design pattern. It is also follow the DRY principle. DRY stands for Don’t repeat yourself. That means any piece of code which serves a specific task or function should not be repeated as the duplicate code. But we can declare it as a component and increase the reusability. Design pattern is a wide topic. If you are interested to know more about the design pattern you may check out these references.
https://addyosmani.com/resources/essentialjsdesignpatterns/book/
https://refactoring.guru/design-patterns
Technology goes through a lot of wear and tear before it is adopted in mainstream and it also need to prove it’s worth in real life production environment.
The complete timeline of React release is available on GitHub.
Some of the interesting highlights from React release.
Reference:
https://github.com/facebook/react/blob/master/CHANGELOG.md#
https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/
The beauty to work with React is that you can structure and assemble your code in components. The parent component can contain various child components. The parent component passes the data values to child, to maintain the uni–directional data flow.
For data driven apps, React seems to be a good choice.
Before we understand Virtual DOM, let’s take a look at DOM. DOM refers to document object model.DOM is referred by the browser to render the HTML. .png)
The HTML is converted into DOM. To simply visualise the DOM you can think of a tree trunk and which has its roots spread down below.
.png)
In DOM visualisation tree we can see that there are different nodes which are connected to html. In DOM, whenever the new nodes are inserted and deleted there is cost in terms of computation and memory footprint during such operations. And this is a little costly affair.
Virtual DOM acts as performance optimiser in these operations.
The Virtual DOM has two copies, one is the master copy of the node and another one is the copy of the changes to be done.
Virtual DOM reduces the cost in terms of memory and processing time to apply the changes. It applies the minimal changes required on the DOM. The process is also called reconciliation and is achieved by render() function in React.
Reference:
View Live DOM Tree: https://software.hixie.ch/utilities/js/live-dom-viewer/
d3.DOM Visualizer
http://bioub.github.io/dom-visualizer/
Reconciliation
https://reactjs.org/docs/reconciliation.html
To work with code, we need an editor which can provides us the following:
There are various editors available for developers in market such as Sublime, Atom, Brackets and Visual Studio Code & WebStorm IDE. All of them have their pros & cons.
In our current project we are sticking to Visual studio code. It is available for Windows, Mac and Linux.
You may download the editor based on your operating system https://code.visualstudio.com/
To run React we will require Node.js on our operating system. Node.js is written by Ryan Dahl and is based on Chrome V8 engine.
Download Node.js & visit the url
https://nodejs.org/en/download/
And we will install the release with even number and LTS (Long term support)
We will be installing the Node.js version 12. It also includes npm which we will use to run our first app in React.
To run Node.js we can use command prompt on Windows and use Terminal on macOS.To check the Node.js version, we need to run the following command.
.png)
node –version
As you can see from screenshot that we have installed version 12 (v12.18.2)
After installation of Node & npm.we will be creating to create a React app with command line interface (CLI).
Installation of create-react-app
I have created a directory called Codefactory.
And in that directory, I am going to run the following command
After couple of minutes, the packages will be installed.
In the previous sections we have mentioned the use of Node and NPM.
Node.js help developers to use JavaScript as the main language to build their apps. It is open source.
Some of its salient features are:
Ryan Dahl is the creator of Node.js.
V8 supports new features of JavaScript and those features are made available to Node.js. And which keep the Node.js in mainstream based on the recent development and upgradation happening in the ecosystem of JavaScript and ECMAScript.
Since modularity is much needed and required by developers.
Node.js follows the concepts of modules as characterized by NPM.
NPM is a package manager for Node.js modules and various packages are available for developers to test and experiment with their code.
Official site : npmjs.com
References:
Node.js Ryal Dahl (2009)
https://www.youtube.com/watch?v=ztspvPYybIY
Start with the boilerplate app
Now let’s go back to terminal & run our app.
We will go to directory my-app and after running the following command
cd my-app
Now you are in my-app directory, where the npx has downloaded the dependencies and modules.
Now, we will go to Visual studio code. We will go to menu bar and Add the folder my-app to workspace.
 (1).jpg)
In the Visual studio, the explorer will list down the files under the directory structure.
Now is the time to run the React app.
To open terminal go to menu bar and go to Terminal > New Terminal. This will open the terminal at the bottom.
We need to type following command in terminal to start the app.
The command line will instruct the app to open in a new browser .png)
http://localhost:3000/
So, here we can see the app running.
Good job so far!
And as per the instructions from screenshot we will open the App.js
The App.js will show a bunch of import statements and function App()
There are various methods to create React app via CLI such as yarn and npm on local system.
In case you are facing problems during installation.
As an alternative approach to create a React app, you can check StackBlitz
And create a new workspace of React
It will provide you an online playground to tinker and play with the source code in the browser itself. .jpg)
At the left there is a workspace and at the right output from the app.
It will show you the index.js which show the import statement, class App component declaration and the render() function. The render function contains JSX. And this allow us to write HTML in JS. This is for a little human friendly version for readability for both experienced programmers and newbie.
Reference
https://github.com/facebook/create-react-app
React provides the React Developer tools to check and inspect the components created. It is a very handy tool for debugging.
To install React developer tools we will open the below url in google chrome and install add-on from chrome web store
.png)
Once we have clicked on Add to Chrome, the tool will be installed.
 (1).jpg)
To open the tool go to your project at localhost. And right click it will show the context menu and click on inspect
To open the tool go to Components tab as shown below:
 (1).jpg)
Once we have opened the file App.js in our main project created from CLI. We can tinker around and play with the code.
On line number 10, We have a paragraph tag. We can choose any message we want to write and see how it appears on the React app.
For E.g. I have added this message in <p> Paragraph tag and inside of the paragraph tag there is a right foot icon enclosed in <big> Bigger text tag. Once we save the file, it will auto reload on the app. So, the auto reload feature saves us from manually load the browser when new changes are saved to disk.
.png)
Now feel free to introduce your messages, add some tags and play around. I hope this will serve a good starting point for you to learn and practice.
Before you acquire the skills to become a React developer, I hope the understanding of HTML, CSS and JavaScript will give you a good foundation. Happy Learning!.
Become a pro at Web Development with the help of our React training courses. Experience Immersive Learning.
Research & References of Step-by-Step: Create a React Project From Scratch|A&C Accounting And Tax Services
Source
0 Comments