React JS for beginners
Hi All,
LIFE IS BEAUTIFUL 🙂 I hope we all are safe 🙂 STAY SAFE, STAY HEALTHY STAY HOME 🙂
Today bit different article since I submitted session for React Virtual Conference, so I am preparing for it and this article has birth 🙂
Note : You will find lots of articles on React but still I’ll be writing from my side and by my way (dont want to reinvent the wheel :)) and in upcoming articles I need to explain with SharePoint for SPFX component.
Take away from this article :
- What is React
- How React works
- What are React Components
- Starting with React – creating first simple React App
Prerequisites :
- Basic knowledge of HTML
- Basic knowledge of JavaScript
- Basic programming concepts – Functions, Classes, Arrays etc.
- Basic understanding of DOM
What is React :
- JavaScript library for building User Interfaces
- Very popular library
- React is an open-source project created by Facebook
- React is the view layer of an MVC application (Model View Controller)
- React is used to build single page applications
- React allows us to create reusable UI components
What are React Components :
- Custom, reusable HTML elements
- These are like JavaScript function which accepts input and returns React elements – what should be shown on UI
- Components allows us to update the content on the page without refreshing the complete page
- These components are defined as either classes or functions
- We can define React component class by deriving from React.Component as
class MyFirstReactApp extends React.Component {
render() {
return <h1>This is my first react component class, {this.props.name}</h1>;
}
}- We can define React component function as
function MyFirstReactComponent(props) {
return <h1>This is my first react component function, {props.name}</h1>;
}- The above react component function accept parameter – “props” – properties object argument.
Starting with React – writing our first react app – Creating simple react app : Simple way to start and understand react is crate html file, create a react component and render. Lets have following sample .html file
Choose the IDE of your choice and install. I prefer Visual Studio Code – Microsoft’s open source IDE. You could download it from – https://code.visualstudio.com/
- Create HTML file – “myfirstreactapp.html” and include three scripts from cdn as
<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js">
</script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js">
</script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js">
</script>
</html>- First two scripts allows us to include React code in our JS file. First library is for React top level APIs and second is for manipulating DOM-specific methods
- Babel is JavaScript compiler. This compiler is used to convert one source code to another. This compiler enables us to use new ES6 (ECMAScript 6 – ECMA script was created to standardize JavaScript. ES6 was the 6th version of ECMAScript) feature in old browser by converting new code to plain old ES5
- Include <body> element and add <div> element which will be rendered on the UI as
<body>
<div id="reactdiv"></div>
</body>- Now we will write actual React component. As discussed React component is derived from React.Component as
<script type="text/babel">
class MyFirstReactApp extends React.Component
{
}//class
</script>- script type “text/babel” is mandatory for using Babel.
- React component implements render() method which returns the react element – which is shown / rendered on the UI as
<script type="text/babel">
class MyFirstReactApp extends React.Component
{
render()
{
return <h1>My First React App Testing</h1>
} //render method
}//class
</script>- Once we have render() method ready, we need to call ReactDOM.render(). This method is used to render react app / component in root DOM node , here we are passing two parameter – React element – HTML code and HTML element in which we need to render react element
ReactDOM.render(<MyFirstReactApp/>,document.getElementById('reactdiv'))- We are using component like HTML tag in ReactDOM.render()
- Best Practice :
- Component name should be in PascalCase. For ex. in our code we have component name My First React App should be MyFirstReactApp
- Complete code :
<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
<div id="reactdiv"></div>
<script type="text/babel">
class MyFirstReactApp extends React.Component
{
render()
{
return <h1>My First React App Testing</h1>
} //render method
}//class
ReactDOM.render(<MyFirstReactApp/>,document.getElementById('reactdiv'))
</script>
</body>
</html>How React works :
- React uses virtual DOM. It wont directly uses regular DOM.
- Since React creates virtual DOM in memory, it improves performance
- React does all required manipulation in virtual DOM and then update browser DOM
Next article – In next article we will discuss one more approach to start with React and few more details. We will use “create-react-app” to create our React app
References :
- JavaScript basics
- React – Getting Started
- Node.js downloads – https://nodejs.org/en/download/
- Components and Props
- React.Component
Thanks for reading 🙂 Feel free to discuss / comment / questions. SHARING IS CARING 🙂
Share In Teams:Enjoy the beautiful life 🙂 Have a FUN 🙂 HAVE A SAFE LIFE 🙂 TAKE CARE 🙂
4 Responses
[…] last two articles – React JS for beginners and React JS for beginners – Part 2 – Preparing environment for creating React app we discussed […]
[…] React JS for beginners […]
[…] React JS for beginners – https://knowledge-junction.in/2020/08/23/react-js-for-beginners/ […]
[…] React JS for beginners – https://knowledge-junction.in/2020/08/23/react-js-for-beginners/ […]