React-Coding
Start Coding :)
VS Code editor — https://code.visualstudio.com/
Creating Component and then rendering it into the DOM
Install “React Developer Tools” extension in Chrome for debugging
If you are running your app from a local file:// URL, don't forget to check "Allow access to file URLs" on the Chrome Extensions settings page. You can find it by opening Settings > Extensions:
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
JSX
JSX stands for JavaScript XML.
JSX allows us to write HTML in React.
JSX makes it easier to write and add HTML in React.
If you’re curious to see more examples of how JSX is converted to JavaScript, you can try out the online Babel compiler.
Example without JSX:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<title>React App</title>
</head>
<body><div id="root"></div>
<script type="text/babel">
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
}
}
ReactDOM.render(
React.createElement(Hello, {toWhat: 'World'}, null),
document.getElementById('root')
);
</script>
</body>
</html>
Example with JSX:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<title>Document</title>
</head>
<body>
<div id="app"></div><script type="text/babel">
class App extends React.Component{
state = {
name: "meena",
age: 32
}
render(){
return(
<div className="app-content">
<h1>Hi Pradeepa</h1>
<p>{ Math.random()*10 }</p>
<p>My name is: {this.state.name}</p>
<p>My age is: {this.state.age}</p>
</div>
)
}
}ReactDOM.render(<App/>,document.getElementById('app'))
</script>
</body>
</html>
- why to render html inside component , instead we can write it inside html template directly?
Dynamic code is not possible inside html template. Rendering inside component allows us to write dynamic code using {} braces. - React Component is JavaScript code which returns HTML(JSX) dynamically. React.js library generates UI with the HTML(JSX). React.js library only updates the particular component which is needed to change with the help of virtual DOM. As a result the react application faster than other traditional web applications.
Components come in two types, Class components and Function(UI) components
Class components: When creating a React component, the component’s name must start with an upper case letter.
The component has to include the extends React.Component statement, this statement creates an inheritance to React.Component, and gives your component access to React.Component's functions.
The component also requires a render() method, this method returns HTML.
The class component also a code block of javascript and its state-full. This type of component has more features and it also maintains its own private data. You can maintain complex UI logic in the class components.
Functional component(UI Component): just a simple javascript function. Use functional component as much as possible and State not maintain in the functional component. This type of component only responsible for UI (User Interface of application). Generally in function component no complex logic exists. Also functional components called “Stateless” or “Dump”.
Now you can use the component in your project as a <TAG>. Please see the following example, hare we will use the above component in the “App.js” file.
Output : User Details
Hare we just simply use the User component. To use the component you need to import the javascript file which contains the component.
Lifecycle of Components
The three phases are: Mounting, Updating, and Unmounting.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — —Events!
Event Handler: onClick
<button onClick={this.clickMe()}></button>
- {this.clickMe()} This will automatically invoke, instead we need to invoke the function only when the user clicks the button. so we need to use {this.clickMe}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<title>Document</title>
</head>
<body>
<div id="app"></div><script type="text/babel">
class App extends React.Component{
state = {
name: "meena",
age: 32
}
clickMe = (e) => {
console.log(e.target+"state=="+this.state)
//this.sate.name = "ryan";
this.setState({
name: 'Ryan'
}); }
mouseOver(e){
console.log(e, e.pageX)
}
handleCopy(e){
console.log('Try to be original')
}
render(){
return(
<div className="app-content">
<h1>Hi Pradeepa</h1>
<p>{ Math.random()*10 }</p>
<p>My name is: {this.state.name}</p>
<p>My age is: {this.state.age}</p>
<button onClick={this.clickMe}>onClick</button>
<button onMouseOver={this.mouseOver}>onMouseOver</button>
<p onCopy={this.handleCopy}>What we think we become!</p>
</div>
)
}
}ReactDOM.render(<App/>,document.getElementById('app'))
</script>
</body>
</html>
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —Create React App
You’ll need to have Node >= 8.10 and npm >= 5.6 on your machine. To create a project, run:
npx create-react-app my-app
cd my-app
npm start