....In this Article; we'll be talking about REACT as a Javascript library or as a framework, functions and features of react. But before we do that, we'll like to look at the following:
What is Javascript as a programming language.
Introduction to React (as a Javascript library).
Features or benefits of react (functionalities).
Guide to installation of React.js.
Summary.
N/B: There are a few things you should know in advance before you start playing around with React. If you've never used JavaScript or the DOM at all before,Here are what I consider to be React prerequisites before we proceed-:
Basic knowledge of HTML, CSS and JavaScript.
Familiarity with the DOM, ES6.
What is Javascript?
Well for starters that know a thing or more about programming languages; i believe that at some point you might have heard of the word javascript. Well, let's know what javascript is.
Javascript is a programming language that allows you to implement complex features on a web page alongside HTML and CSS. In other words, it's a language for programming or making websites. For now, we won't go deep into javascript, cause that's not why we are here.
What is React?
Now for the main deal of the day; React aka React.js is Declarative, Effective and Flexible Javascript library for building user interfaces, specifically for single-page applications i.e it's a javascript library (made out of javascript) that present day developers used in creating an efficient, flexible web page in less time.
it was invented by a software engineer working for facebook in the year 2013, and ever since then React has made it's way to the top list of developers web tool with it's extra simplicity and flexibility abilities.
Features of React.
When we talk about features we talk about specifications, benefits, advantages and functionalities of React. It may please you to know that react has interesting features that made developers love using it, let's take a look at them;
Virtual DOM.
This characteristic of React helps to speed up the app development process and offers flexibility. The algorithm facilitates the replication of a web page in React’s virtual memory. The original DOM is thereby represented by a virtual DOM. Whenever the app is modified or updated, the entire UI is rendered again by the virtual DOM, by updating the components that have been modified. This reduces the time and cost taken for development.
React Native.
Uses native, rather than web components to facilitate native React JS development for Android and iOS. Basically, this feature transforms React code to render it compatible with iOS or Android platforms and provides access to their native features.
Components Based Architecture.
This simply means that the user interface of an app based on React JS is made up of several components, with each of them having its particular logic, written in JS. Due to this, developers can relay the data across the app without the DOM being impacted. React JS components play a huge part in deciding the app visuals and interactions.
Avantages of React.
Easy to Learn.
In comparison with other frameworks, React JS is very easy to learn, pushing it up the popularity charts; this allows developers to complete their projects in record time. Businesses can be up and running online in minimal time.
SEO-Friendly.
For any app to do well, it is important that search engines like it; two factors are critical for apps: fast load time and rendering. If both these boxes are ticked, your app will rank higher on Google result pages. The super-fast rendering feature of React brings down the load time of the page drastically, enabling businesses to get their apps ranked on the first page of Google search.
Helpful Developer Toolset.
Facebook has included several developer tools for React and Chrome in the react js framework, and they help developers immensely in discovering parent and child components, observe their hierarchies and examine their present state and so on. Through self-learning, developers will be able to use the emerging technologies in actual, live, projects.
Set up and Installation.
There are a few ways to set up React,but we'll be talking about two here, which are Adding React to a Website and Creating a New React App. The formal is not a popular way of setting up React and for that reason we'd focus on the later.
CREATING NEW REACT APP.
Facebook has created Create React App, an environment that comes pre-configured with everything you need to build a React app. It will create a live development server, use Webpack to automatically compile React, JSX, and ES6, auto-prefix CSS files, and use ESLint to test and warn about mistakes in the code.
To set up create-react-app
Run the following code in your terminal, one directory up from where you want the project to live.
$ npx create-react-app my-app-location
Once that finishes installing, move to the newly created directory and start the project. note: the newly created directory is my-app-location.
$ cd my-app-location && npm start
Once you run this command, a new window will popup at localhost:3000 with your new React app.
And there you have it; your first react app, although it's looks reactive i guess. Create React App is very good for getting started for beginners as well as large-scale enterprise applications, but it's not perfect for every workflow. You can also create your own Webpack setup for React.
my-app-location
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
└── setupTests.js
If you look into the project structure above, you'll see a /public and /src directory, along with the regular node_modules, .gitignore, README.md and package.json.
In /public, our important file is index.html, the /src directory will contain all our React code.
To see how the environment automatically compiles and updates your React code, find the line that looks like this in /src/App.js:
To get started, edit `src/App.js` and save to reload.
And replace it with any other text. Once you save the file, you'll notice localhost:3000 compiles and refreshes with the new data.
Go ahead and delete all the files out of the /src directory, as well create your own boilerplate file without any bloat.
Alright! There you have it, that's all on this article about React, hopefully on our next article we'd be talking about props and componets of React.
Link and Reference.
reactjs.org/docs/getting-started.html
github.com/facebook/create-react-app#creati..