Be a better front-end Developer
To Be a front-end developer a javascript framework is a must. So at first let’s talk about react. To be an expert in react you have to expert in javascript. So, let’s know about react.
React JSX: JSX is one of the core concepts in react. So if you want to write better code in react you have to understand JSX. What is JSX? JSX is a JavaScript Extension Syntax used in React to easily write HTML and JavaScript together. Why should we use JSX?
1.Basically, JSX is faster than regular javascript.
2.It makes it easier to create templates.
3.Most of the error can be found at compilation time.
Example:
const javascriptExtension = <p>This is a paragraph</p>
React Component: Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render() function. Components are two types class components and function components. Modern developers use function component.
Import and Export: Import and export are one of the fundamental and main concepts of react. In react you have to import and export various type of modules, files. Without import and export, you can’t do anything with these. That’s why import and export are one of the main things of react.
To be a better front end developer you have to know something about virtual dom. What is virtual dom? The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM.
This approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app.
To work with react app you have to optimize your application. There are many ways to optimize your app. In this article, we will talk about some of these. What we should do to optimize my app?
Create React App:
If your project is created with create react app run this commandnpm run build
This is necessary for deploying production. This command will create a build folder of the project.
Single-File Builds:
We offer production-ready versions of React and React DOM as single files:
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>Remember that only React files ending with .production.min.js are suitable for production.
Browserify:
For the most efficient Browserify production build, install a few plugins:
# If you use npm
npm install --save-dev envify terser uglifyify# If you use Yarn
yarn add --dev envify terser uglifyify
