Table of contents
No headings in the article.
What is React?
React provides good maintenance services for keeping the application running quickly and dynamically, compared to Javascript. Developers can easily maintain and update web applications using react reusable components and virtualDOM, making it superior to plain Javascript.
The aim of React. js is to simplify complex interfaces by subdividing them into simple components. It uses JSX, which is a mixture of HTML and JavaScript.
Benefits of React.js
1. Simplified Scripting
React JS features a free syntax extension called JSX. This makes your HTML markup within the library much easier. Its writing shortcuts allow you to make your course code simpler and cleaner, converting your HTML mockups into ReactElement trees.
2. Component-based architecture
React.js uses a component-based architecture that allows developers to create reusable components for the user interface. This makes it easier to maintain and scale applications.
3. Faster rendering
React’s “tree” model means that a problem at the top of the tree can cascade throughout the tree. To solve this problem, the Facebook development team created the Virtual DOM, which directs traffic and requests more efficiently. It provides key speed and accuracy for high-volume apps.
4. Stable Code Structure
In React, the data flows from the top to the bottom of the tree. And this has an enormously stabilizing effect on your code. Small changes or bugs in the “child” structure don’t affect the “parent” code.
PREREQUISITE
You should have basic knowledge of the following:
HTML and CSS
Fundamentals of JavaScript and ES6
Git and CLI (Command Line Interface)
Package Manager (Node + Npm).
HOW TO GET STARTED:
First, make sure you have the latest versions of Node and NPM installed.
Then, on your terminal run:
****
npx create-react-app my-app
cd my-app
*****
This command creates a folder with React and all configurations installed and prepared for you, with Babel and webpack working under the hood. Once you are finished working on your application, simple run
*****
npm run build
*****
This command will create an optimized build of your app in the build folder for you to deploy.
WHAT IS JSX?
JSX, JavaScript eXtension, is Javascript that looks like HTML. An example of JSX in React is shown below, creating a simple React component that renders "Hello World":
*****
class HelloWorld extends React.Component {
render() {
return(
<h1>Hello World&</h1>
);
}
}
*****
JSX is Javascript that looks like HTML. So, when the above code is ran, it is translated into regular JavaScript and looks like this.
*****
class HelloWorld extends React.Component {
render() {
return (
React.createElement(
'h1',
{className: 'large'},
'Hello World'
)
);
}
}
*****
COMPONENTS:
Components in React return a piece of JSX code that tells what should be rendered on the screen. React can only return and render one parent element. Eg:
*****
class Example extends React.Component {
render() {
return (
<h1>Hello</h1>
<h2>World</h2>
);
}
}
*****
The code above would be incorrect and result in an error. To fix this, all you need to do is wrap the JSX in an enclosing, parent tag, like so:
*****
class Example extends React.Component {
render() {
return (
<div>
<h1>Hello</h1>
<h2>World</h2>
</div>
);
}
}
*****
There are two kinds of components: functional component and class components. Both have the same purpose, outputs JSX to become the UI, but have different ways of getting there.
Functional components JavaScript functions that takes in props and returns some JSX.
*****
function Greetings(props){
return (
<p>Hello {props.name}</p>
);
}
The following code is how React hooks onto the HTML file to render the JSX,
usually to a div with an id of "root" or "app"
*****
ReactDOM.render(
<Greetings name="Edgar" />,
document.getElementById('app')
)
*****
The above output would be "Hello Edgar."
To show reusability part of React based components. Say, you create an App component and decide to put 3 greeting component
*****
function Greetings(props){
return (
<p>Hello {props.name}</p>
);
}
function App() {
return (
<div>
<Greetings name="Edgar" />
<Greetings name="Carol" />
<Greetings name="Tony" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
*****
The App component above outputs the Greeting component 3 times. Each component is rendered with a different name being displayed since we passed different names as props, like so:
*****
<h1>Hello Edgar</h1>
<h1>Hello Carol</h1>
<h1>Hello Tony</h1>
*****